Firefox left-marin problem

[arrbug]

I´m trying to figure out why the left margin of: http://www.cis-elsalvador.org/temp/en/history_mission.php
displays differentlyin Firefox from the left margin of:
http://www.cis-elsalvador.org/temp/es/historia_mision.php

even though they share the same stylesheet and, as far as I can tell, the exact same HTML.
I had a similar problem with other pages because certain text elements did not have their margin and padding defined as 0, but these don´t have any HTML tags that are different from each other. Thanks!

Here´s the layout stylesheet:

body { 
margin : auto ; 
padding : 0px ; 
background: #CCCC99;
} 

#wrapper { 
width : 778px ; 
margin : 0px auto;
padding: 0;
} 

#header { 
text-align : left;
width: 778px;
} 

#leftmenu { 
float : left ; 
width : 200px ; 
}

#content { 
float : left; 
width : 578px ; 
} 

#footer { 
clear : both ; 
text-align : right; 
} 

.print_hidden
 {
display: none;
 }

[cmannering]

Maybe try setting the body margin and padding both to 0 to override the predefined attributes across browsers.

And also make sure you handle the overflow of floats, overflow:hidden on the parent/container of the floats should keep them all in order.

Though sometimes fiddling with the DOC type will fix your problems. Have you tried validating yet?

[MidiMagic]

They look the same to me, on FF 2.0.0.6.

Maybe it's the difference between how FF and IE handle margins, borders, and padding:

FF puts them outside the measured position and size of a block item.

IE puts them inside the measured position and size of a block item.

[arrbug]

Oh wait. I thought I had fixed it ... setting overflow: hidden on the body fixed it, but then of course you can´t scroll. I think, however, that I now see the problem ..............

Any time the page has vertical overflow, it pushes the left margin over to the left a few pixels.

Setting the body to overflow: scroll fixes it in firefox, but then it causes problems in internet explorer....

Any more suggestions?

[arrbug]

They look the same to me, on FF 2.0.0.6.

Maybe it's the difference between how FF and IE handle margins, borders, and padding:

FF puts them outside the measured position and size of a block item.

IE puts them inside the measured position and size of a block item.

I have the same version of firefox. Two friends who looked at it also have the same version -- but one saw the problem and one didn´t. Strange. In any event, thanks for your help!

[arrbug]

Maybe try setting the body margin and padding both to 0 to override the predefined attributes across browsers.

And also make sure you handle the overflow of floats, overflow:hidden on the parent/container of the floats should keep them all in order.

Though sometimes fiddling with the DOC type will fix your problems. Have you tried validating yet?

Page does validate.
Since it was a problem with the overflow (see post below) I tried setting the min-height of the body for a quick fix. Do you see any problem with this? (I.e., what about safari and opera?)

Even if I.e. doesn´t display min-height well, it seems to be working in both browsers now, even if the fix isn´t ideal.

This also explains why people using the same browsers saw it display differently --- depending on the height of their window, and whether there was vertical overflow or not.

Any other suggestions?

[MidiMagic]

If the page won't validate, anything can happen.

[arrbug]

If the page won't validate, anything can happen.

Page does validate as XHTML 1.0 Transitional.