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




17 years ago
17 years ago


(Reporter: martin, Assigned: dbaron)


Windows 98

Firefox Tracking Flags

(Not tracked)





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

On this page: 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: td a:link, 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%; 

Comment 1

17 years ago

You don't have permission to access /test2.php on this server.

Comment 2

17 years ago
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'.
Last Resolved: 17 years ago
Resolution: --- → INVALID

Comment 4

17 years ago
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 :)

Comment 5

17 years ago
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.