Mozilla & Netscape vs. IE

p_hp_fan · June 2nd, 2005, 03:26 PM

I have no idea why but for some reason IE's left:0;top:0; seems to be off. For example, when the code is...

Code:

<div style="position:absolute;left:0px;top:0px;"> 
[img]images/b.jpg[/img]
<div style="position:absolute;left:0px;top:0px;"> 
[img]images/a.jpg[/img] 
</div>

A small image (image b) is supposed to be in the top left hand corner, obviously, but instead it's all the way to the left but about 4 or 5 pixels from the top, but the bigger image is at the top right hand corner, but it still throws all other <div> values off by about 5px's too far down. In Mozilla and Netscape the code runs as I'd like it to with the small image being in the corner and the bigger one directly beneath with no effect on other <div> values. What can I do to fix this IE frustration?

Rob · June 2nd, 2005, 04:19 PM

This is likely because the image is positioned absolutely... but WITHIN a relative container.

The <body> element by default has padding so try setting padding and margin to zero on the body element (or the images parent container)

Hope this helps.

D3mon · June 2nd, 2005, 04:21 PM

try tidying up your code:

Code:

<div style="position:absolute;left:0;top:0;"> 
[img]images/b.jpg[/img]
</div> 
<div style="position:absolute;left:0;top:0;"> 
[img]images/a.jpg[/img] 
</div>

Does that help any?

D3mon · June 2nd, 2005, 04:32 PM

With this updated code...

Code:

<div style="position:absolute;left:0px;top:0px;border:1px solid black;"> 
[img]images/a.gif[/img] 
</div>

<div style="position:absolute;left:0px;top:0px;border:1px solid black;"> 
[img]images/b.gif[/img] 
</div>

I get this in IE...

and this in Firefox...

Is that the problem you have?

p_hp_fan · June 2nd, 2005, 04:40 PM

No, the problem is that the small box will not go up to the corner it stays about 5 pixels away. I've tried setting margins and padding to 0 on the body and cleaning the code, and it's still doing this in IE; firefox and netscape are okay.

D3mon · June 2nd, 2005, 04:42 PM

Do you have any other styles applied to the page or its elements?

You'll note that I changed the order of the DIV's, otherwise (in your code) the little image is hidden under the bigger one.

p_hp_fan · June 2nd, 2005, 04:48 PM

I have other elements later on in the page but no visual elements before those two. I'm not sure if I'm seeing your screenshot correct or not but if the gray one is sticking out of the bottom of the red one then that's how mine is.

p_hp_fan · June 2nd, 2005, 04:52 PM

That's a drawing of what it looks like.

p_hp_fan · June 2nd, 2005, 04:57 PM

That's firefox and netscape

Rob · June 3rd, 2005, 12:03 PM

I think the best thing you can do here is to post it up on a url so we can see whats going on.