Closed Bug 111198 Opened 23 years ago Closed 23 years ago

Block-level A tag with width 100% and padding overflows container

Categories

(Core :: CSS Parsing and Computation, defect)

x86
Windows 98
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: martin, Assigned: dbaron)

References

()

Details

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
BuildID:    2001112009

On this page: http://195.149.51.152/test2.php the menu items are Anchor tags 
using CSS to make them block-level elements.  Their width is set to 100%, and 
they have a padding of 3px.  The width is being mis-calculated as a result of 
having padding, so that the clickable area exceeds the containing TD tag.  
Hovering over each item in the menu makes it easier to see the problem.

Reproducible: Always
Steps to Reproduce:
1. See page source of the URL mentioned above


Expected Results:  Should contain the A tag within the surrounding TD, and 
compensate for the padding.  If you're running Windows, try viewing the same 
page mentioned above in IE, where it seems to work fine (unlike most CSS :)

The CSS information for the A tag in question:

table.menu td a:link, 
table.menu td a:visited {       
  display: block; 
  border-top: solid 1px #1A2032;                           
  text-decoration: none; 
  vertical-align: middle; 
  text-align: left; 
  padding: 3px; 
  width: 100%;                           
  height: 100%; 
}
http://195.149.51.152/test2.php:

Forbidden
You don't have permission to access /test2.php on this server.
100% + 3px > 100% therefore there's an overflow, or am I misreading CSS2's
description of the box model?
No, you're not.   The 'width' property in CSS describes the content width. 
Therefore saying 'width: 100%' and 'padding: 3px' means that the box should have
a padding-width 6px larger than its container (and presumably thus the same
border-width).  What you want here is 'width: auto'.
Status: UNCONFIRMED → RESOLVED
Closed: 23 years ago
Resolution: --- → INVALID
Yup, my bad.  I was just playing with width: auto before reading your comments,
and as you say, that's the one to use.  Yet another case of RTFM :)
Also, sorry to anyone who tried to view the URL I mentioned.  I'd restricted
access to it by IP and forgot about it.  I'll put my spare brain in before my
next post.
You need to log in before you can comment on or make changes to this bug.