If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
16 years ago
16 years ago

People

(Reporter: Martin Cavanagh, Assigned: dbaron)

Tracking

Trunk
x86
Windows 98
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

16 years ago
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

16 years ago
http://195.149.51.152/test2.php:

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

Comment 2

16 years ago
100% + 3px > 100% therefore there's an overflow, or am I misreading CSS2's
description of the box model?
(Assignee)

Comment 3

16 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
Last Resolved: 16 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

16 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

16 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.