IE and Firefox positioning different

pasdecrap

The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure it out!
TIA
Jeff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Browser Quirks</title>
<style type="text/css">

div.navmenu{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
background-color:#e4e4e4;
position:absolute;
left:5px;
top:60px;
height:800px;
width:200px;
padding:0;
border-left:1px solid gray;
}
div.content{
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
position:absolute;
left:470px;
top:60px;
width:400px;
}

</style>

</head>

<body>

<div class="navmenu">
Line A
</div>
</body>
</html>

Jul 21 '05 #1

Subscribe Reply

14350

Els

pa*******@yahoo.com wrote:

The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
[snip]
border-left:1px solid gray;

If you take the border off, do FF and IE have equal left margin sizes?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: L.A. Guns - The Ballad of Jane

Jul 21 '05 #2

Tony

pa*******@yahoo.com wrote:

The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure it out! div.navmenu{ <...> border-left:1px solid gray;

There's your problem. IE and FF handle the display of borders differently.
Change the border width and watch how your spacing changes.

--
Tony Garcia
Web Right! Development
Riverside, CA
www.WebRightDevelopment.com

Jul 21 '05 #3

pasdecrap

Thanks for the replies.. changing border width will not change the
margin problem - try it yourself with the code above. Firefox still
has has left margin of 4 px, IE has 5.

Jul 21 '05 #4

Els

pa*******@yahoo.com wrote:

Thanks for the replies.. changing border width will not change the
margin problem - try it yourself with the code above. Firefox still
has has left margin of 4 px, IE has 5.

Code above?

Please quote what you are replying to - it's easier for everyone.
Also, I don't feel like copy pasting someone else's code into my text
editor, save it somewhere where it occupies space, upload it to my
webserver, and then open a browser window to see it.

So.. how about /you/ do all that, and then we'll look :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone

Jul 21 '05 #5

pasdecrap

Sorry about that, I'm being lazy. Here it is:

http://www.aztecfreenet.org/azaclub/

Simple Code. The left border helps show the margin difference. Again,
IE is 5 pixels, FF is 4. Changing doctype header between various
"quirks" and "standards" mode doesn't make any difference, AFAIK.

Jul 21 '05 #6

Els

pa*******@yahoo.com wrote:

Sorry about that, I'm being lazy. Here it is:

http://www.aztecfreenet.org/azaclub/

Simple Code. The left border helps show the margin difference. Again,
IE is 5 pixels, FF is 4. Changing doctype header between various
"quirks" and "standards" mode doesn't make any difference, AFAIK.

The difference you see is an optical illusion, caused by the light
grey part of the blue (in WinXP at least) border of the window.

It does look like a pixel difference, but if you change the value of
'left' to 4px, then 3, then 2, then 1px, you'll first see that the
margin does get smaller every time, and also, that even when it's set
to 1px, both browsers show a 1 pixel gap. Easier to see by setting the
background to red.
To make the gap disappear, both browsers need "left:0;".

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone

Jul 21 '05 #7

pasdecrap

OK - so this is a basic problem between the browsers.
I need the navigation bar to have a left margin. ( required pixel
perfect aligment)
Unfortunately I will have to go back to tables to make this happen!
Thanks anyway

Jul 21 '05 #8

Els

pa*******@yahoo.com wrote:

OK - so this is a basic problem between the browsers.
I need the navigation bar to have a left margin. ( required pixel
perfect aligment)
Unfortunately I will have to go back to tables to make this happen!
Thanks anyway

You're misunderstanding, and you're not quoting anything.
I said: it's an optical illusion. In reality, both FF and IE show the
same margin.
If you set left:5px, this margin is 5px.
If you set left:1px, this margin is 1px.

On a side note: it is (imnsho of course) completely and utterly
ridiculous to go back to table design because of 1px which isn't even
there.

If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)

Now try and set a table, absolute positioned with "left:5px;". My best
guess is that you'll see the same difference between FF and IE as you
are seeing now.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone

Jul 21 '05 #9

Beauregard T. Shagnasty

Els wrote:

pa*******@yahoo.com wrote:
OK - so this is a basic problem between the browsers. I need the
navigation bar to have a left margin. ( required pixel perfect
aligment)
Why? Do you think various visitors will be comparing their
experiences with each other? "Hey, did you see pasdecrap's web site?
There's a *missing pixel* on his home page!!!!!1!!"

That said, use the style
body { margin: 0; padding: 0 }
and see if your non-troubles go away.
Unfortunately I will have to go back to tables to make
this happen! Thanks anyway

Only because you don't know CSS.

[Els:] You're misunderstanding, and you're not quoting anything.
Organization: http://groups.google.com
If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)

Oh yeah, you already said that. <g>

--
-bts
-This space intentionally left blank.

Jul 21 '05 #10

Els

Beauregard T. Shagnasty wrote:

Els wrote:

You're misunderstanding, and you're not quoting anything.

Organization: http://groups.google.com

I know, but that's not an excuse. Even if he can't find the slightly
obscured reply button that /does/ quote, (or so I've heard), he could
copy paste to make things easier for the rest of the Usenet population
:-)

If you want to go back to table design because you don't understand
CSS, fine. But don't blame it on the poor pixel ;-)

Oh yeah, you already said that. <g>

Indeed I did ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Blondie - Hanging On The Telephone

Jul 21 '05 #11

Gérard Talbot

Beauregard T. Shagnasty wrote :

Els wrote:
pa*******@yahoo.com wrote:
OK - so this is a basic problem between the browsers. I need the
navigation bar to have a left margin. ( required pixel perfect
aligment)

Why? Do you think various visitors will be comparing their experiences
with each other? "Hey, did you see pasdecrap's web site? There's a
*missing pixel* on his home page!!!!!1!!"

That said, use the style
body { margin: 0; padding: 0 }
and see if your non-troubles go away.

Sorry but that sounds like bad advice. When the element is absolutely
positioned, its containing block is either another abs. pos. element or
the initial containing block according to CSS 2.x: here (CSS 2.1), it is
the dimensions of the viewport. So, removing the margin and padding on
the body element will do nothing.
MSIE 6 does not comply with sections 10.1 and 10.2 of CSS 2.1.

The origin of the single pixel might be in the border surrounding the
root element in MSIE 6.

This is a default declaration for MSIE 6 in standards compliant
rendering mode:

html {border: 1px white inset; }

and MSIE 6 treats the root element as the initial containing block.
I can prove this.

Gérard
--
remove blah to email me

Jul 21 '05 #12

Michael Winter

On 08/07/2005 11:05, Gérard Talbot wrote:

[snip]

When the element is absolutely positioned, its containing block is
either another abs. pos. element or the initial containing block
[...]
Its containing block is any positioned element. That is, relatively,
fixed, or absolutely positioned.
So, removing the margin and padding on the body element will do
nothing.
Yes.
MSIE 6 does not comply with sections 10.1 and 10.2 of CSS 2.1.
Care to elaborate? I'm well aware that IE doesn't do many things when it
comes to CSS, but I'm not sure precisely what it is you're referring to.

Perhaps a minor, obscure, and highly debatable difference is that the
HTML element doesn't have the dimensions of the viewport. As it has a
border, its width and height is slightly less (four pixels; see below)
than that of the viewport.

So, what am I overlooking?

[snip]
This is a default declaration for MSIE 6 in standards compliant
rendering mode:

html {border: 1px white inset; }
Not here it isn't. The border property has the following values[1]:

border: medium #000000 inset;

This is what provides the slight 3D effect in the content region between
the address bar and the status bar. Override the border-style property
with the value 'none', and IE will look similar to Firefox in this regard.
and MSIE 6 treats the root element as the initial containing block.

As it should.

[snip]

To the OP: Els is, of course, correct. There is no difference between
Firefox and IE in what you've posted. If you won't take our word for it,
take screenshots of both browsers and zoom in using an image editor.
You'll be able to count five white pixels between the document border
and that of the DIV element (in Opera, too).

Mike
[1] with(document.documentElement.currentStyle) {
document.write(['border:',
borderWidth,
borderColor,
borderStyle].join(' '));
}

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Jul 21 '05 #13

Gérard Talbot

Michael Winter a écrit :

On 08/07/2005 11:05, Gérard Talbot wrote:

[snip]
When the element is absolutely positioned, its containing block is
either another abs. pos. element or the initial containing block
[...]

Its containing block is any positioned element.

Containing block is defined in CSS 2.1. The containing block of an abs.
pos. element has to be the first abs. pos. element within the
containment hierarchy. Not just any positioned element.

That is, relatively,
fixed, or absolutely positioned.

A relatively positioned element is not taken out of the normal flow.
Fixed positioned elements are just a sub-category of absolute
positioning; position fixed is just a type, a special category of
absolute positioning.

So, removing the margin and padding on the body element will do
nothing.

Yes.
MSIE 6 does not comply with sections 10.1 and 10.2 of CSS 2.1.

Care to elaborate? I'm well aware that IE doesn't do many things when it
comes to CSS, but I'm not sure precisely what it is you're referring to.

Yes. Go to:

http://channel9.msdn.com/wiki/defaul...rSupportforCSS

and then (early at the top of the page) see, search for the item
starting with

"percentage width value on absolutely positioned elements should
calculate the %tage of the containing block, not %tage of the immediate
parent node of the abs. pos. elements. Safari 1.x and Mozilla-based
browsers supports this correctly; MSIE 6 does not, even in standards
compliant rendering mode. IE6 calculates the percentage with respect to
the width of the content box of the nearest dimensioned ancestor.
(...)
http://www.satzansatz.de/cssd/tmp/ap...tagewidth.html

http://www.gtalbot.org/BrowserBugsSe...sPosElem2.html

Mozilla-based browsers render this testcase accordingly
"

Section 10.2 of CSS 2.1 says:

"Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the width of the padding box of that element."
and MSIE 6 does not do that.

Perhaps a minor, obscure, and highly debatable difference is that the
HTML element doesn't have the dimensions of the viewport. As it has a
border, its width and height
What about its margin? MSIE 6 does not render margin but Mozilla-based
browsers will.

is slightly less (four pixels; see below) than that of the viewport.

"The containing block in which the root element lives is a rectangle
with the dimensions of the viewport"
Section 10.1 of CSS 2.1

That means

---------------------
| ============== |
| ! .......... ! |
| ! . . ! |
| ! . . ! |
| ! . . ! |
| ! . . ! |
| ! . . ! |
| ! . . ! |
| ! .......... ! |
| ============== |
---------------------

The outer box (---) is the viewport.
The middle box (===) is the initial containing block.
The inner box (...) is the document root element (<html>).

Conceptually, there is no gap between the viewport and the initial
containing block.
From this understanding, Mozilla stopped trying to put a block with the
declaration
{position: absolute; bottom: 0}
at the bottom of the document and instead places, puts such block at the
bottom of the viewport.
So, what am I overlooking?

[snip]
This is a default declaration for MSIE 6 in standards compliant
rendering mode:

html {border: 1px white inset; }

Not here it isn't. The border property has the following values[1]:

border: medium #000000 inset;

Yes. Correct. And that medium #000000 inset equates to 1px white inset.
This is what provides the slight 3D effect in the content region between
the address bar and the status bar. Override the border-style property
with the value 'none', and IE will look similar to Firefox in this regard.

Yes.

and MSIE 6 treats the root element as the initial containing block.

As it should.

No. These are 2 distinct "birds". The initial containing block shouldn't
be the root element. See section 10.1 of CSS2.1 on this.

Gérard
--
remove blah to email me

Jul 21 '05 #14

Gérard Talbot

Gérard Talbot wrote :

[snipped]

That is, relatively, fixed, or absolutely positioned.

A relatively positioned element is not taken out of the normal flow.

Sorry, I got that wrong. "If the element has 'position: absolute', the
containing block is established by the nearest ancestor with a
'position' of 'absolute', 'relative' or 'fixed'(...)"
Section 10.1 of CSS2.1

Gérard
--
remove blah to email me

Jul 21 '05 #15

Michael Winter

On 09/07/2005 06:55, Gérard Talbot wrote:

Michael Winter a écrit :
[snip]

I'm well aware that IE doesn't do many things when it comes to CSS,
but I'm not sure precisely what it is you're referring to.
[snip]
"Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the width of the padding box of that element."
and MSIE 6 does not do that.
However, what did that have to do with the current topic? No-one's
mentioned percentage widths yet, have they? :P
What about its margin?
I wasn't considering margin (or padding) because browsers don't apply
any to the root element by default. Well, at least not in

[snip]
"The containing block in which the root element lives is a rectangle
with the dimensions of the viewport"
I didn't read that properly. Sorry.

[snip]
border: medium #000000 inset;

Yes. Correct. And that medium #000000 inset equates to 1px white inset.

It equates to 'black inset'. What medium means in this context is rather
odd, though. Normally, medium in IE is four pixels, but on the root
element, it's two pixels on the top and left edges, and one on the
bottom and right. Bizarre.

[Treating root element as initial containing block]
No. These are 2 distinct "birds". The initial containing block
shouldn't be the root element. See section 10.1 of CSS2.1 on this.

If that reading is correct then Mozilla misbehaves as it uses the
padding edge of the root element for calculating the position of
absolutely positioned elements. Opera doesn't, and IE probably doesn't
only because it ignores margins on the root element (as you mentioned
earlier).

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Jul 21 '05 #16

Gérard Talbot

Michael Winter wrote :

On 09/07/2005 06:55, Gérard Talbot wrote:
Michael Winter a écrit :

[snip]
I'm well aware that IE doesn't do many things when it comes to CSS,
but I'm not sure precisely what it is you're referring to.

[snip]
"Note: For absolutely positioned elements whose containing block is
based on a block-level element, the percentage is calculated with
respect to the width of the padding box of that element."
and MSIE 6 does not do that.

However, what did that have to do with the current topic? No-one's
mentioned percentage widths yet, have they? :P
What about its margin?

I wasn't considering margin (or padding) because browsers don't apply
any to the root element by default. Well, at least not in

[snip]
"The containing block in which the root element lives is a rectangle
with the dimensions of the viewport"

I didn't read that properly. Sorry.

[snip]
border: medium #000000 inset;

Yes. Correct. And that medium #000000 inset equates to 1px white inset.

It equates to 'black inset'.

Yes, black, not white.

What medium means in this context is rather odd, though. Normally, medium in IE is four pixels, but on the root
element, it's two pixels on the top and left edges, and one on the
bottom and right. Bizarre.

That has to be a bug, IMO. Of course, medium should mean more than 1px.
[Treating root element as initial containing block]
No. These are 2 distinct "birds". The initial containing block
shouldn't be the root element. See section 10.1 of CSS2.1 on this.

If that reading is correct then Mozilla misbehaves as it uses the
padding edge of the root element for calculating the position of
absolutely positioned elements.

The root element has no padding in Mozilla. Mozilla does consider the
pading when calculating the position of abs. pos. elements.

Opera doesn't, and IE probably doesn't only because it ignores margins on the root element (as you mentioned
earlier).

Mike

No. MSIE does not position an abs. pos. element according to the ICB in
cases where there isn't any abs. pos. elements within the containment
hierarchy. It positions the abs. pos. element relative to its immediate
dimensioned container (more like in CSS1) which is wrong.

Gérard
--
remove blah to email me

Jul 21 '05 #17

Michael Winter

On 09/07/2005 15:38, Gérard Talbot wrote:

Michael Winter wrote :
[snip]

[...] Mozilla misbehaves as it uses the padding edge of the root
element for calculating the position of absolutely positioned
elements.

The root element has no padding in Mozilla.

I never said it did.
Mozilla does consider the pading when calculating the position of
abs. pos. elements.

It shouldn't (and doesn't).

The padding edge is the division between the border and padding regions
of a box (see the diagram in section 8[1]). Applying a left margin (or
left border) to the root element will cause absolutely positioned
elements relative to the initial containing block (ICB) to shift left.
If the root element is not to be considered the ICB, then this behaviour
is incorrect.

Of Opera, Mozilla, and IE, only the former reacts correctly here (IE
fails with a border).

[snip]

Mike
[1] <URL:http://www.w3.org/TR/CSS2/box.html>

The diagram seems to be missing from the revised draft, so the link
above is to the Level 2 chapter. They are the same, anyway.

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Jul 21 '05 #18

Similar topics

FireFox and Opera

by: Aurelio | last post by:

I'm developing a Web application with ASP.NET and C# and i'm having problems with Opera and FireFox. The controls don't appear situated correctly. Why?. What ca i do?