W3C home > Mailing lists > Public > www-style@w3.org > October 2007

'height' and 'inline-height' properties of inline elements

From: <Eugen.Konkov@aldec.com>
Date: Thu, 25 Oct 2007 14:11:40 +0300
Message-ID: <018801c816f7$d28b3210$0100a8c0@kharkov.localhost>
To: <www-style@w3.org>
I am confising with 'line-height' implem    entation between FF and IE

The recomendation also does not allow to setup height to 'inline' elements
http://www.w3.org/TR/CSS2/visudet.html#q4
The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.
http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
If the property is set on an inline-level element, it specifies the exact height of each box generated by the element.

line-height "specifies exact height of each box generated by the element" not hight of element itself


Test case for browsers:
<div style="position: relative; width: 300px; height: 30px; border: 1px solid">
 <ul style="border: 1px solid red; margin: 0pt; padding: 0pt; height: 100%;">
   <li style="height: 100%; line-height: 30px; border: 1px solid; list-style-type: none; display: inline; padding-left: 2; padding-right: 2;" 

onmouseout="this.style.backgroundColor= null" onmouseover="this.style.backgroundColor= 'gray'"> File
   <li style="height: 100%; border: 1px solid; list-style-type: none; display: inline; padding-left: 2; padding-right: 2;" onmouseout="this.style.backgroundColor= 

null" onmouseover="this.style.backgroundColor= 'gray'"> Options
 </ul>
</div>

<div style="width: 300px; height: 30px; border: 1px solid;">
  <span style="height: 100%; border: 3px solid red;">HELLO</span>
</div>

<div style="width: 300px; height: 30px; border: 1px solid;">
  <div style="height: 100%; width: 50px; border: 3px solid red;">HELLO</div>
</div>

I think it will be cleary if you depricate 'line-height' property to set up box heights and leave 'line-height' to affect only fonts
And allow 'height' to do its job: set up content height for all elements. So this wil allow to do next thing:
<span style="height: 35px; width: 35px; border: 2px solid red;"></span>
Now this is impossible


PS. May be HERE you mean 'min-height'?
>If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each generated inline box.
>If the property is set on an inline-level element, it specifies the exact height of each box generated by the element
Received on Thursday, 25 October 2007 11:13:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:55 GMT