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)
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%;
}
Comment 1•23 years ago
|
||
http://195.149.51.152/test2.php:
Forbidden
You don't have permission to access /test2.php on this server.
Comment 2•23 years ago
|
||
100% + 3px > 100% therefore there's an overflow, or am I misreading CSS2's
description of the box model?
Assignee | ||
Comment 3•23 years ago
|
||
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
Reporter | ||
Comment 4•23 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 :)
Reporter | ||
Comment 5•23 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.
Description
•