308687 - when width of element is set to 100%, the padding of the element is effectively included twice.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Paul]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4

when the width of an element is set to 100%, and the padding of that element is
set to a value greater than zero, the actual width of the element is calculated
to include the padding. When the element is displayed however, it is displayed
inside the padding, meaning that the padding has effectively been added twice.
When used inside a table, as in the example given, the width of table cells
become greater than the width of the table itself.

Reproducible: Always

Steps to Reproduce:
1. See the attached html and css file.
Actual Results:  
The code is a simplification of a list of links I am developing for a site. When
holding your mouse over a link, the background of the link changes colour.
Because of this fault, the background width exceeds the table width, and goes
beyond the displayed border.

Expected Results:  
The entire background of the cell should change colour, but no more. Or to put
it simply, 100% should only be 100%.

Works as expected in WinIE - which doesn't mean much I know, but gives a guide
to the result I expected.

Comment 1

[Paul]

Attachment: Example html

Comment 2

[Paul]

Attachment: Example css file

Comment 3

[Dave Townsend [:mossop]]

When attaching testcases you need to include the stylesheet in the html page
otherwise it doesnt show what you're talking about that.

Till then I can say that according to the CSS spec, the width property specifies
the content width of the element. It's something I've always thought of as not
being sensible.

Comment 4

[Paul]

Attachment: example html with embedded css

html and css merged as requested.

Comment 5

[Eli Friedman]

First of all, the XML declaration (<?xml version="1.0" encoding="iso-8859-1"?>)
puts IE in quirks mode, which changes the rendering; you should get rid of it. 
Secondly, the "width:100%" shouldn't be necessary, and in standards mode causes
incorrect rendering in both Firefox and IE, so get rid of it.  However, IE
doesn't do hovering right, so add ".menu a {position:relative}" to force the
hover area to extend over the whole box.  With all those changes, you menus
should work as expected.

You also might want to consider doing you menu as a <ul> to make it more
accessible; see http://www.alistapart.com/articles/taminglists for how to do that.

Comment 6

[Gérard Talbot]

*** Bug 333472 has been marked as a duplicate of this bug. ***

Comment 7

[Gérard Talbot]

(In reply to comment #5)

> Secondly, the "width:100%" shouldn't be necessary, and in standards mode causes
> incorrect rendering in both Firefox and IE, so get rid of it.

Eli, I fully agree with your previous comment.

I have uploaded the corrected testcase here

http://www.gtalbot.org/BugzillaSection/Bug308687_1.html

for people wishing to compare attachment 196336 [details] with its corrected code

Finally, I have contacted and notified Microsoft to fix their bug and their browser accordingly, at the very least in standards compliant rendering mode. 

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/TableCellWidth100pc.html

Even with IE 7 beta 2 build 5335.5, when clicking the link, the dotted outlines of the link are outside the table cell

What Safari 2.x, Opera 9 and all Mozilla-based browsers is correct: the link overflows the table cell dimension and that is as expected. People wrongly assume that, since IE handles width: 100%; padding: 5px fitting into the table cell without overlapping/overflowing, then all other browsers must be wrong.

Comment 8

[Molle Bestefich]

> I have uploaded the corrected testcase here
>
> http://www.gtalbot.org/BugzillaSection/Bug308687_1.html

The corrected test case does not work in IE6, which makes it rather useless ;-).

Click slightly to the right of the text "Test line (2/3/4)" in IE6 and nothing happens ;-(.