Member Avatar for arrbug

I´m trying to figure out why the left margin of:
displays differentlyin Firefox from the left margin of:

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;
 }
  • 3 Contributors
  • 7 Replies
  • 133 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by arrbug

Dani AI

Generated

The behavior is almost certainly caused by the vertical scrollbar appearing on some pages but not others. A fixed-width wrapper that’s centered with auto margins will shift horizontally by roughly half the scrollbar width when the viewport gains or loses the scrollbar. That fits ’s observation about the problem changing with window height, and explains why people with the same Firefox version saw different results.

Three practical fixes (in rough order of preference):

  • Reserve scrollbar space with modern CSS so the layout never reflows:

    html {
scrollbar-gutter: stable;
}

    (See the spec and browser support on MDN: scrollbar-gutter.)

  • Force a persistent vertical scrollbar as a simple fallback:

    html { overflow-y: scroll; }

    This keeps the layout stable across pages with different heights.

  • If you need a script fallback (older browsers), detect the scrollbar width and apply an equal right padding so the centered wrapper doesn’t jump:

    var sbw = window.innerWidth - document.documentElement.clientWidth;
if (sbw) document.documentElement.style.paddingRight = sbw + 'px';

Also make sure floats are contained without hacking the body’s overflow. Rather than setting overflow on body, create a block formatting context or a clearfix on the wrapper so float containment doesn’t force unexpected scroll behavior. A simple clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

(See the CSS-Tricks snippet for clearfix.)

Tie these back to earlier points: ’s note about handling floats is important — contain them on the wrapper instead of altering body scrolling — and ’s comment about browser box-model differences underscores the need to test on multiple browsers/OSes (Windows vs macOS overlay scrollbars). Test by comparing window.innerWidth vs document.documentElement.clientWidth to confirm scrollbar presence while you iterate.

Recommended Answers

All 7 Replies

Member Avatar for 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?

Member Avatar for 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.

Member Avatar for 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?

Member Avatar for 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!

Member Avatar for 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?

Member Avatar for MidiMagic

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

Member Avatar for arrbug

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

Page does validate as XHTML 1.0 Transitional.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.