258523 - Problem with DIV nested inside table cell, each with CSS border.

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Dave Stiles]

User-Agent:       Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.3) Gecko/20030312
Build Identifier: Mozilla/5.0+(Windows;+U;+Windows+NT+5.0;+en-US;+rv:1.7)+Gecko/20040803+Firefox/0.9.3

Table with CSS border, DIV inside cell with CSS border, inner box penetrates
outer box on right hand side. Removing width:100% fixes problem. Example is
minimum to reproduce the error. Padding optional but shows problem more clearly.

Reproducible: Always
Steps to Reproduce:
1. <table style="border:2px solid #6699ff;"><tr><td>
<div style="padding:0px 3px 0px 3px;border:2px solid #6699ff;width:100%;">
some sample text for testing
</div>
</td></tr></table>

Actual Results:  
Inner box penetrates right side of outer box.

Expected Results:  
Inner box should remain completely inside outer box.

Reproduced with Firefox on two separate installations (one Windows 2000 server,
the other unknown). No problem with MSIE 6 and
Mozilla/5.0+(Windows;+U;+WinNT4.0;+en-US;+rv:1.3)+Gecko/20030312 (other browsers
not tested).

Comment 1

[Bill Mason]

It's supposed to do that.  You'll telling the div to use 100% of the space for
width,  Then (per the CSS spec) border and padding add on top of that.  So
you've made the width 100% + 3px + 3px + 2px + 2px.

Not a bug.

Comment 2

[Bill Mason]

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

Comment 3

[Peter van der Woude [:Peter6]]

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