Hi, I'm really new to these forums but i have a bit of a CSS problem, i've tried everything under the sun to fix it, and its quite weird problem
The page: <!-- m --><a class="postlink" href="http://home.dave-w.net/www/zetecscom/index.asp?sr=false">http://home.dave-w.net/www/zetecscom/index.asp?sr=false</a><!-- m -->
If you take alook at the above url I'm using css positioning to put a 'zoom image' mouse over over the top of another image. Anyhelp would be appricated
p.s. the website is being built for IE only so please try to not cringe to much
p.p.s I can't use the background trick for this because the images change size Here's the offending code from the css & html
CSS:
table.image-block {
background-color: #475360;
border: 1px solid #28313C;
padding: 0px ;
margin-right: 10px ;
margin-bottom: 10px;
float: left;
}
td.image-block{
position: relative;
border: 1px solid #56606C;
margin: 0px ;
padding: 0px ;
}
HTML:
<table width="99" class="image-block" cellspacing="0" cellpadding="0">
<tr>
<td class="image-block">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"./images/albums/gallery-blue02-small.jpg" width="95" height="71" alt="" border="0" style="position: relative;">
<div style="position:absolute; left:0px; top:0px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.asp" onMouseOut="swapImgRestore()" onMouseOver="swapImage('image-2','','./images/images/zoomimage.gif',1)"><img name="image-2" src=http://www.webdeveloper.com/forum/archive/index.php/"./images/images/overlay.gif" width="95" height="71" alt="" border="0"></a>
</div>
</td>
</tr>
</table>Ah! i managed to fix it on my own accord! had to position: relative; the parent objects.<!-- m --><a class="postlink" href="http://banners.dollarmachine.com/pic/2014000/hal001.gif">http://banners.dollarmachine.com/pic/2014000/hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)
The page: <!-- m --><a class="postlink" href="http://home.dave-w.net/www/zetecscom/index.asp?sr=false">http://home.dave-w.net/www/zetecscom/index.asp?sr=false</a><!-- m -->
If you take alook at the above url I'm using css positioning to put a 'zoom image' mouse over over the top of another image. Anyhelp would be appricated
p.s. the website is being built for IE only so please try to not cringe to much
p.p.s I can't use the background trick for this because the images change size Here's the offending code from the css & html
CSS:
table.image-block {
background-color: #475360;
border: 1px solid #28313C;
padding: 0px ;
margin-right: 10px ;
margin-bottom: 10px;
float: left;
}
td.image-block{
position: relative;
border: 1px solid #56606C;
margin: 0px ;
padding: 0px ;
}
HTML:
<table width="99" class="image-block" cellspacing="0" cellpadding="0">
<tr>
<td class="image-block">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"./images/albums/gallery-blue02-small.jpg" width="95" height="71" alt="" border="0" style="position: relative;">
<div style="position:absolute; left:0px; top:0px;">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"./index.asp" onMouseOut="swapImgRestore()" onMouseOver="swapImage('image-2','','./images/images/zoomimage.gif',1)"><img name="image-2" src=http://www.webdeveloper.com/forum/archive/index.php/"./images/images/overlay.gif" width="95" height="71" alt="" border="0"></a>
</div>
</td>
</tr>
</table>Ah! i managed to fix it on my own accord! had to position: relative; the parent objects.<!-- m --><a class="postlink" href="http://banners.dollarmachine.com/pic/2014000/hal001.gif">http://banners.dollarmachine.com/pic/2014000/hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)