<div> resizing and font property inheritance

[Martin Magnusson]

Hi, I'm in the process of migrating from "traditional" HTML layout to
CSS, and I have two questions.

I've posted minimal examples at
http://www.update.uu.se/~martin/wb/annat/index.htm and
http://www.update.uu.se/~martin/wb/annat/styles.css

Firstly, I would like the "navbar" <div> to resize vertically for people
with really narrow windows, when the horizontally aligned <ul> gets line
breaked (is that a proper expression?). Explorer 6 does this, but not NS
7.1 or Opera 7.2, so I suspect setting the height of "navbar" to 1 em is
not the way to go, but if I omit the height attribute entirely, the
height is set to zero and the floating <ul> ends up outside of the <div>.

Secondly, I would expect all of the text in the <ul> to be bold.
However, my fairly empty definition of the style for <a> seems to
override the font-weight. Is there an easy way to get bold links in the
list, which change colour on mouse-over?

/ martin

 

[rf]

Hi, I'm in the process of migrating from "traditional" HTML layout to
CSS, and I have two questions.

I've posted minimal examples at
http://www.update.uu.se/~martin/wb/annat/index.htm and
http://www.update.uu.se/~martin/wb/annat/styles.css

Firstly, I would like the "navbar" <div> to resize vertically for people
with really narrow windows, when the horizontally aligned <ul> gets line
breaked (is that a proper expression?). Explorer 6 does this, but not NS
7.1 or Opera 7.2, so I suspect setting the height of "navbar" to 1 em is
not the way to go, but if I omit the height attribute entirely, the
height is set to zero and the floating <ul> ends up outside of the <div>.

That is what float does. It removes the floated elements from the flow. IE
is in fact the one that is getting it wrong.

However, you are not in fact floating the ul, you are floating the li's.
This is what is confusing IE. It is laying out the ol as if the li's are
there, then floating the li's away, leaving the ol the 'right' size. It
should collapse the ol, just like the other browsers do.

Don't float the li's. If you want them to display across the page then give
them display: inline.

Secondly, I would expect all of the text in the <ul> to be bold.
However, my fairly empty definition of the style for <a> seems to
override the font-weight.

Nope, it's not the a styles overriding the font-weight. It is that the
font-weight is not inherited from the li into the a element.

Is there an easy way to get bold links in the
list, which change colour on mouse-over?

#navbar a {font-weight: bold;}

BTW your CSS is far too verbose. You don't need to set all those default
things in the * rule. If you want to specify a font then do it once in the
body rule. Don't use pt or px for font-size. Use em (one of them) or % (100
of them). When you specify a colour you should also specify a background
colour. The validator will get upset with you if you don't, as will a viewer
whose user style sheet sets her background colour the same as the colour you
have chosen for the text.

Cheers
Richard.