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

Eugen.Konkov@aldec.com wrote:
> I am confising with 'line-height' implem    entation between FF and IE
What are these differences in implementation and what is the cause for 
confusion?

Eugen.Konkov@aldec.com wrote:
> The recomendation also does not allow to setup height to 'inline' elements
> http://www.w3.org/TR/CSS2/visudet.html#q4
> The 'height' <http://www.w3.org/TR/CSS2/visudet.html#propdef-height> 
> property doesn't apply, but the height of the box is given by the 
> 'line-height' 
> <http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height> property.
> http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
> If the property is set on an inline-level 
> <http://www.w3.org/TR/CSS2/visuren.html#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
>  
You should be referencing the more up‐to‐date CSS2.1 specification. You 
can find it at <http://www.w3.org/TR/CSS21/>.

Eugen.Konkov@aldec.com wrote:
>  
> 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>
It helps when you reference complete documents instead of a fragment of 
a document since those missing parts could affect the output in certain 
browsers and you force people to fill in the missing code in order to 
use the fragment for testing. It also helps if you use correct CSS; your 
padding property values require units. Due to these issues, I didn’t 
bother testing your code.

Eugen.Konkov@aldec.com wrote:
> 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
By affecting the spacing between lines of text, the heights of ancestor 
elements are affected. How do you propose preventing the latter?

Eugen.Konkov@aldec.com wrote:
> 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
Have you looked up the display: inline-block declaration in the CSS2.1 
specification? It allows you to utilize the height property on an inline 
element. Note that browser support for it is poor at the moment.

Eugen.Konkov@aldec.com wrote:
>  PS. May be HERE you mean 'min-height'?
> >If the property is set on a block-level 
> <http://www.w3.org/TR/CSS2/visuren.html#block-level> element whose 
> content is composed of inline-level 
> <http://www.w3.org/TR/CSS2/visuren.html#inline-level> elements, it 
> specifies the /minimal/ height of each generated inline box.
It specifies the “minimal” height since the line‐height can increase due 
to the presence of inline content with a height greater than the 
line‐height; such content can be an inline object (e.g., inline image) 
or elements with display: inline-block or display: inline-table. The 
line‐height can also increase due to vertical alignment via the 
vertical-align property.

Received on Thursday, 25 October 2007 12:18:59 UTC