228944 - links with specified css width are not shown correctly

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Thomas Holzeisen]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
Build Identifier: Mozilla/5.0

if I define css tags like these: 

a.menuitem {
  width: 200px;
  padding-left: 16px;
  background: #FFFFFF;
  color: #000000;
}

a.menuitem:hover {
  width: 200px;
  padding-left: 16px;
  background: #000080;
  color: #FFFFFF;
}

... and then add a link like this to my page:

<a class="menuitem" href="anywhere">Klick me</a>

the defined width is not applied correct to the link. whether the normal nor 
the hovered drawing. the element always ends at the end of the text.


Reproducible: Always

Steps to Reproduce:
1. Start Mozilla
2. visit example page specified
3. hover over the menu



Expected Results:  
"a" tags, like all other tags can have an specified width. if 200px are 
specified the element should be at least 200px wide.

In this case, the M$ Browser works more correct.

Comment 1

[Anne (:annevk)]

'width' does not apply to inline elements.

-> INVALID

Comment 2

[Anne (:annevk)]

Additional info for the reporter can be found here:
<http://www.w3.org/TR/CSS21/visudet.html#the-width-property>:

> This property specifies the content width of boxes generated by block-level and
> replaced elements.

Without any additional styling a is not block-level.

Comment 3

[Thomas Holzeisen]

Agreed, if forced with { display: block; } "width" is aplied to the element. 

but width is computed incorrect, because padding is added to width.

i.e...

a
{
  width: 100px;
  display: block;
  padding-left: 10px;
}

results in an block with 110px width, even if the content is much smaller than 
width.

Comment 4

[Anne (:annevk)]

That is the correct behavior per the CSS specification
<http://www.w3.org/TR/CSS21/box.html#box-dimensions>:

> The box width is given by the sum of the left and right margins, border, and
> padding, and the content width. The box height is given by the sum of the top
> and bottom margins, border, and padding, and the content height.