Mozilla & Netscape vs. IE

p_hp_fan · #1 (**permalink**) Jun 2nd, 2005, 19:26

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...

<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 · #2 (**permalink**) Jun 2nd, 2005, 20:19

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 · #3 (**permalink**) Jun 2nd, 2005, 20:21

try tidying up your code:

Code: Select all

<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 · #4 (**permalink**) Jun 2nd, 2005, 20:32

With this updated code...

Code: Select all

<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 · #5 (**permalink**) Jun 2nd, 2005, 20:40

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 · #6 (**permalink**) Jun 2nd, 2005, 20:42

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 · #7 (**permalink**) Jun 2nd, 2005, 20:48

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 · #8 (**permalink**) Jun 2nd, 2005, 20:52

That's a drawing of what it looks like.

p_hp_fan · #9 (**permalink**) Jun 2nd, 2005, 20:57

That's firefox and netscape

Rob · #10 (**permalink**) Jun 3rd, 2005, 16:03

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS & Firefox/Netscape	beerme	Web Page Design	1	Feb 9th, 2008 03:46
Footer in Netscape	Moonlilly	Starting Out	2	Apr 29th, 2007 09:14
Netscape 6 crashing	imagesetting	Web Page Design	5	Apr 3rd, 2007 09:06
DIV alignment in Firefox and Netscape	johnmr	Web Page Design	1	Sep 11th, 2006 17:15
Netscape/Mozilla - skinning those scrollbars!	gwx03	Web Page Design	15	Apr 8th, 2004 19:37

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Mozilla & Netscape vs. IE