Accessibility

CSS Advisor

Elastic layout bug

by Thierry Koblentz on April 9, 2007 Avg Rating 4.2 (6)   |   Log in to rate post.

Tagged with Margin , Border , em-layout , Padding , Width/Height , elastic , Firefox 0.8

Problem

In some browsers (i.e. Firefox 0.8), centered em-based layouts expand beyond both edges of the browser window when a user increases text-size.

Solution

Use min-width on body or apply padding or border to the container itself.

Detailed description

In some browsers (i.e. Firefox 0.8) centered em-based layouts expand beyond both edges of the browser window when a user increases text-size. This will cause part of the page to move off the left edge of the viewport with no option for scrolling left to view it.


Solutions:

1. Use "min-width" on body (matching the width of your wrapper - 34em here)

body {min-width:34em;}

2. Use padding on the container

#wrapper {padding-left:1px;}

3. Use border on the container

#wrapper {border-left:1px;}


Live demo:

View Live Demo




Text ID: ELASTIC_LAYOUT_BUG



Comments (2)

To add a comment, please Log in.




IE has the problem - this is W3C compliant

Actually, min-width is most assuredly a valid property according to the W3C - http://www.w3.org/TR/CSS21/visudet.html#min-max-widths ... It's IE6 and earlier that have problems with it. There are expressions you can use for IE to force/mimic min-width, but since this bug affects FFOX, that's not necessary.

CSS validation

min-width is not a W3C compliant, so bear that in mind.  Firefox shouldn't have any problems with min-width attributes  because it follows the CSS standards.  You should be more aware with Internet Explorers and Opera.  





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)