/    Sign up×
Community /Pin to ProfileBookmark

IE CSS Image Overlay Absolute/Relative position

Copy linkTweet thisAlerts:
Mar 02.2003

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: [url]http://home.dave-w.net/www/zetecscom/index.asp?sr=false[/url]

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 ?

[upl-file uuid=9f96a7f8-5a07-416e-b65d-3d394bab823a size=83kB]untitled-1.jpg[/upl-file]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@dave_zetecs_comauthorMar 02.2003 — Here's the offending code from the css & html
[CODE]
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="./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="./index.asp" onMouseOut="swapImgRestore()" onMouseOver="swapImage('image-2','','./images/images/zoomimage.gif',1)"><img name="image-2" src="./images/images/overlay.gif" width="95" height="71" alt="" border="0"></a>
</div>
</td>
</tr>
</table>
[/CODE]
Copy linkTweet thisAlerts:
@dave_zetecs_comauthorMar 02.2003 — Ah! i managed to fix it on my own accord! had to position: relative; the parent objects.
×

Success!

Help @dave_zetecs_com spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...