dsonesuk
-
Posts
11,221 -
Joined
-
Last visited
-
Days Won
117
Content Type
Profiles
Forums
Events
Posts posted by dsonesuk
-
-
Give the container position: relative;, with icon background-image, with counter inside overlapping icon, create anchor and make it display: block; position: absolute; top:0; left: 0; right:0; bottom:0;, this will overlap both icon image and counter, but you may have to adjust z-index; to fully overlap.
-
Right!, because different browser show different borders, and IF you are allowed too, I suggest using cellspacing="1" with a background colour (black for instance) to show between spacing, the problem with this is you have to use, for instance a white background colour for each cell, but the results are consistent in all browsers, but you still end up with double border on bottom and left of five row table.
-
The only way I can see this being done without the use of css, and with text appearing in blank left hand side of 5 cell rows, is by using two tables, one without borders on left, obviously the other with borders on right. You will!, end up with double borders showing in some browser, you may be able to use 'frame' attribute to help remove non required borders from showing in these browsers. IT is very much harder to achieve a design like this, that will look identical in all browsers, without the use of css.
-
You don't require two tables, you just need to use border-collapse: and apply/remove borders to cells to achieve the same end result.
-
1
-
-
Usually you don't lose quality shrinking, its usually the other way round, when you enlarge a small pixel image to a larger size it ends up pixelated and colour blurs from on pixel to the next. All you need to do is get the proportion correct, when he's finished, use high res for scanner while scanning the images, the file size will be huge, but then you just reduce it in size and res to go into you website to the quality you are happy with.
-
150px = 3.96875cm is exactly right, what you could do is draw these boxes in a graphics program, print it out and compare.
-
Works fine on mine, as soon as i reduce the height of table_inner div so the data content is greater than that element height, so can scroll the data content, and the header is fixed!
-
Must be my PC and browsers then? getting a lot of that here recently, guess I'm a lucky chappy, cause the headers fixed on mine.
-
??? I think you will they are fixed, IF the content data exceeds the height set for .table_inner
-
The only way I could get this to work cross browser was this method
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.table_wrapper {width:1024px; overflow-x:auto;}.table_inner{height:500px; overflow-y:auto; width:2021px;padding-bottom:60px;} .tloc { width: 110px; } .tsite{ width: 110px; } .tbusunit { width: 180px; } .titem { width: 200px; } .taction { width: 200px; } .tspecial { width: 130px; } .tFM { width: 50px; } .tcompliant { width: 90px; } .tdatecomp { width: 120px; } .tdatereview { width: 120px; } .tfreq { width: 100px; } .tremedial { width: 100px; } .tcnw { width: 120px; } .tcomments { width: 160px; } .tinforce { width: 180px; } .tlastchange { width: 180px; } .tnotes { width: 180px; }</style><!--[if lte IE 7]> <style> .table_wrapper{overflow-y:hidden;} </style><![endif]--><!--[if IE 8]> <style> .table_inner table{ padding-bottom:60px;} </style><![endif]--></head><body><div class="table_wrapper"><table width="2004" border="1" cellspacing="0" cellpadding="0"> <tr> <td class="tloc">first head</td> <td class="tsite">head</td> <td class="tbusunit">head</td> <td class="titem">head</td> <td class="taction">head</td> <td class="tspecial">head</td> <td class="tFM"> </td> <td class="tcompliant">head</td> <td class="tdatereview">head</td> <td class="tfreq">head</td> <td class="tremedial">head</td> <td class="tcnw ">head</td> <td class="tcomments">head</td> <td class="tinforce">head</td> <td class="tlastchange">head</td> <td class="tnotes">last head</td> </tr> </table> <div class="table_inner"> <table width="2004" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#CCFFCC"> <td class="tloc">first rec</td> <td class="tsite"> </td> <td class="tbusunit"> </td> <td class="titem"> </td> <td class="taction"> </td> <td class="tspecial"> </td> <td class="tFM"> </td> <td class="tcompliant"> </td> <td class="tdatereview"> </td> <td class="tfreq"> </td> <td class="tremedial"> </td> <td class="tcnw "> </td> <td class="tcomments"> </td> <td class="tinforce"> </td> <td class="tlastchange"> </td> <td class="tnotes">last rec</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></div></div></body></html>With the usual conditional fixes for crappy IE. Note: not tested in IE9.
-
1
-
-
Or just use normal js of jquery formula
window.onload = function(){var tdChild = document.getElementsByTagName("td");for(var i=0; i<tdChild.length; i++){ if(tdChild[i].getAttribute("itemprop")=="productID") { alert(tdChild[i].innerHTML); }}} -
if you want to find that custom attribute, you might want to consider jquerys each() and attr()
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){$("td").each(function(){ if($(this).attr("itemprop")=="productID") { alert($(this).html()) } });});/*--*//*]]>*/</script> -
Geees, i thought we had finally got rid of this posting with no body, and then DAMN! got me doing it now. Please terminate this posting.
-
Oh my Gosh you are right! the background colours, solid borders, not to mention dashed borders, and there's totally the wrong number of images, wrong background(well there's no background actually) all would make this code unusable. if only there was a way to remove these, and restrict the number of images to be resized and reposition? looks like a job for Mr Picky! enter YOU.
-
try this<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>auto iframe height adjust</title><style></style><script type="text/javascript"><!--//function sizeFrame(frameId) { var F = document.getElementById(frameId); if(F.contentDocument) { F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome } else { F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome } }// window.onload=sizeFrame; //--></script></head><body><iframe width="100%" id="myFrame" src="aliens.htm" scrolling="no" frameborder="0" onload="sizeFrame('myFrame')">An iframe capable browser isrequired to view this web site.</iframe></body></html>
-
i've just put this together, which sorts out the resize and positioning issue<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function resizeme(){imgtotal = document.images.length;requiredimgsize = 50; //percentagefor(i=0;i<imgtotal;i++){currentHeight = document.images.height;currentWidth = document.images.width;newHeight = (currentHeight/100)*requiredimgsize;newWidth = (currentWidth/100)*requiredimgsize;document.images.style.width=parseInt(newWidth)+"px";document.images.style.height=parseInt(newHeight)+"px";document.images.style.marginTop="-"+((parseInt(newHeight))/2)+"px";}}window.onload=resizeme;/*--*//*]]>*/</script> <style type="text/css">.wall img{ border: 1px solid #00ff00; top: 50%; position: relative; padding: 0 10px;}.wall a {display: block; float:left; height: 100%; border: 1px dashed #0000ff; }</style></head><body><div class="wall" style="border: 1px dashed red; background-color:#FF9933; height: 100px; overflow:hidden;"><a href="#"><img src="one.png" /></a><a href="#"><img src="two.png" /></a><a href="#"><img src="three.png" /></a><a href="#"><img src="four.jpg" /></a></div></body></html>
-
this works in all browsers<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>auto iframe height adjust</title><style></style><script type="text/javascript"><!--//function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) { F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome } else { F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome } } window.onload=sizeFrame; //--></script></head><body><iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">An iframe capable browser isrequired to view this web site.</iframe></body></html>
How to make a Div with higher z-index not affect anchor below
in HTML/XHTML
Posted
??? iconbar or iconslist, anyway changed it to iconbar for this, in this situation it would be easier to us jquery to hide the counter when icon hovered over
$(document).ready(function(){$("#iconbar").hover(function(){$("#unread_container").hide()},function(){$("#unread_container").show();});});The other way would be apply position: relative; to li elements then remove the image from anchor link element, and place it beside it so anchor element it is now empty, you then make the anchor links the same size as images, and use position: absolute to place these above the respective image, AND the counter by using a higher z-index,