379802 - 100% width table overflowing the bounds of the parent element

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[J. Greene]

User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 1.0.3705)
Build Identifier: 

http://www.zmc2.net/themes/Leatherette/Templates/Theme_Page_Template_css.html

This is supposed to be a liquid layout. Although the center div container is not given an explicit width (because that would no longer be a liquid layout), the two outside boundaries of it are explicitly declared in the css via a right-margin and left-margin command.

Apparently Firefox can't calculate how many pixels are between these two boundaries despite all other widths being fixed, and when the 100% width table is put into the container, the layout is ruined.

This is not logical. According to W3, something set at 100% inside a parent element is supposed to fill it and there's no reason that the browser can't figure out how wide that element is.

The page renders perfectly in Internet Explorer. It is also fully compliant with W3 according to the add-in checker that I use in Firefox. 

Reproducible: Always

Steps to Reproduce:
1. Put a 100% width element into the center div container
Actual Results:  
The page looked like ****.

Expected Results:  
The browser should know how wide the viewport area is, and if the left and right boundaries are explicitly set it should be able to then calculate what is left over.

Oddly, if I just stick a bunch of text in the center, there are no such issues. So obviously Firefox CAN figure it out.

Comment 1

[Steve England [:stevee]]

Can you make a minimal testcase and then 'Add an attachment'?

Comment 2

[J. Greene]

Attachment: simplified version of page and css file

Here you are--very stripped with additional observations on the new page itself.

Comment 3

[J. Greene]

one additional note--even if margins aren't supposed to work on <div>, you can see there is still a problem--the stuff in the div is supposed to be in-between the floats, it isn't supposed to override them. And if you just have text in there, that's precisely  how it works, so why would a 100% element be a special case and why would overflow: hidden; make the element behave?

Comment 4

[philippe (part-time)]

Attachment: standalone testcase

Comment 5

[philippe (part-time)]

This is the correct behaviour.
From CSS 2.1:10.2 Content width: the 'width' property
"<percentage>
    Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block."
http://www.w3.org/TR/CSS21/visudet.html#propdef-width

IE windows seemingly calculates the width of the table 'correctly' because your centre column 'hasLayout', a IE only property (due to the height and max-height declaration) [1]
All other browsers calculate the width as quoted above.
Note also that your stylesheet has an error; you set the margins for the centre column thus:
#body_content_center {
left-margin: 190px;
right-margin: 190px;
}
Browsers will ignore this (and give the div {margin:0}), because it is invalid syntax. It should be
margin-left: 190px;
margin-right:190px
A quick trip to the css validator [2] would have revealed this error.
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://jigsaw.w3.org/css-validator/

Comment 6

[J. Greene]

What's really stupid is that I double checked that margin command twice and didn't pick up on it. Thanks for your time--I have the page validator but not the css validator, so that will be very helpful.