This code works great with a single image but i have some multiply thumbs on a webpage but used this way any magnified image sits behind other thumbs. I would like any larger image on top of anything else is there a way round this, i use IE 8. Works fine in other browsers but not IE 8 Does anyone have any ideas. This is the code <html> <head> <title>0122</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> table#menu td {font-family: Monotype Corsiva; padding-bottom: 20px; vertical-align: top;} .thumbnail {position: relative; z-index: 0;} .thumbnail:hover {background-color: transparent; z-index: 50;} .thumbnail span {position: absolute; background-color: #ccc; padding: 4px; left: 0px; border: none; visibility: hidden; margin:100px 0px 0px 70px; color: black; text-decoration: none; width: 0px; height: 0px;} .thumbnail:hover span {visibility: visible; width: auto; height: auto; display: block;} img.hoverThumb {border: 1px solid fff;} .unnamed1 {color: #33FF00; text-decoration: none;} .links {color: #FFFFFF; text-decoration: none;} </style> </head> <table width="70" border="0" align="center"> <tr> <td> <a href="#nogo" target="_blank" class="thumbnail" ><span><img src="Duplicate%20site/Expanded/(034).jpg" alt="Detailed view" width="250" height="333" border="0"></span><img src="Duplicate%20site/CURRENT%20STICKS%20FOLDER/Animal%20and%20Bird%20sticks/Thumbs/2071.jpg" width="90" height="120" border="1" class="hoverThumb"></a> </td> <td> <a href="#nogo" target="_blank" class="thumbnail" ><span><img src="Duplicate%20site/Expanded/(034).jpg" alt="Detailed view" width="250" height="333" border="0"></span><img src="Duplicate%20site/CURRENT%20STICKS%20FOLDER/Animal%20and%20Bird%20sticks/Thumbs/2071.jpg" width="90" height="120" border="1" class="hoverThumb"></a> </td> </tr> </table> </body> </html>
Alot of the editing doesn't work on my site too. I just use best viewed in Mozilla Info For my pages.
Thanks for that, i have been thinking of doing so... but there must be away round it, or is it just useless IE
1) use a doctype so IE isn't in quirks mode. 2) you probably shouldn't be using tables for layout. 3) You seem to be declaring a whole bunch of properties that aren't going to do anything, and if I'm reading what you are trying to do properly... hmm. I have time when I wake up (heading to bed right now) I'll show you how I'd approach that. You seem to have a lot of excess/unneccessary code in there we can easily axe. Oh, and as to that 'best viewed in' asshattery, IMHO that's just used by people too lazy to learn to code properly... It's why I use "Best viewed with eyeballs" on my websites.
Alright, I have to retract the bit about using a table because you want it centered, and the various browsers STILL have their heads up their collective asses about erasing hovers on a inline-block container or positioning anything correctly in relation to one. In any case, check this out: http://www.cutcodedown.com/for_others/twosheds/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/twosheds is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.64 and 10 beta, Firefox 2 and 3, Safari 4 and Chrome. I put both the table and floated version in there so you can see each. In IE each has their own quirks so there are some differences between them on the positioning. (like on the second one not drawing the border until hover, brought IE 6 into line)