HTML and CSS

Firefox left-marin problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2005

Posts: 18

Reputation: arrbug is an unknown quantity at this point

Solved Threads: 0

arrbug

Offline

Newbie Poster

Firefox left-marin problem

Sep 13th, 2007

I´m trying to figure out why the left margin of: http://www.cis-elsalvador.org/temp/e...ry_mission.php
displays differentlyin Firefox from the left margin of:
http://www.cis-elsalvador.org/temp/e...ria_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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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;
 }

•

Join Date: Sep 2007

Posts: 8

Reputation: cmannering is an unknown quantity at this point

Solved Threads: 1

cmannering cmannering is offline

Offline

Newbie Poster

Re: Firefox left-marin problem

Sep 13th, 2007

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?

www.scrink.com

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Firefox left-marin problem

Sep 13th, 2007

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.

Last edited by MidiMagic; Sep 13th, 2007 at 5:06 pm.

Daylight-saving time uses more gasoline

•

Join Date: Jul 2005

Posts: 18

Reputation: arrbug is an unknown quantity at this point

Solved Threads: 0

arrbug

Offline

Newbie Poster

Re: Firefox left-marin problem

Sep 14th, 2007

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?

Last edited by arrbug; Sep 14th, 2007 at 12:08 pm. Reason: problem not fixed after all

•

Join Date: Jul 2005

Posts: 18

Reputation: arrbug is an unknown quantity at this point

Solved Threads: 0

arrbug

Offline

Newbie Poster

Re: Firefox left-marin problem

Sep 14th, 2007

•

Originally Posted by 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.

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!

•

Join Date: Jul 2005

Posts: 18

Reputation: arrbug is an unknown quantity at this point

Solved Threads: 0

arrbug

Offline

Newbie Poster

Re: Firefox left-marin problem

Sep 14th, 2007

•

Originally Posted by 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?

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?