Firefox and Opera don't read it...right?

[tlcook]

Hi,

I have the following as part of my CSS file on my main website:

.navigation a {
 font-family:Verdana, Arial, sans-serif;
 font-size:0.8em;
 color:#fff;
 background-color:#f88;
 height:auto;
 padding-right:10px;
 padding-left:10px;
 padding-top:5px;
 padding-bottom:5px;
 text-decoration:none;
 width:120px;
}

But when the page (http://www.tlcook.com) is rendered in Firefox or Opera, the links do not have a fixed width. They only have the padding, which makes each one a different width. In IE, they have the fixed width! For the first time, my site actually looks better in IE!

Is there a particular value or unit I have to use to get Firefox's and Opera's attention?

Any help would be greatly appreciated

[Steax]

I'm highly suspicious that they're being rendered as inline, which is what the a element usually is. Inline elements won't extend to their width. Try setting them to display:block.

[Ferro]

I'm highly suspicious that they're being rendered as inline, which is what the a element usually is. Inline elements won't extend to their width. Try setting them to display:block.

Agreed. Although if you display them as block, they'll need to be floated to create a horizontal menu, is that right?

[Steax]

I thought he wanted a vertical menu... and yes floating is how to create a horizontal menu. If you want to try it out, tlcook, you might want to put them near the header.

[tlcook]

Thanks for the fast response. I just added in 'display:block' and it worked! But I'm not sure as to what display:block actually does. I mean, besides the obvious, diplaying them as a block.

It worked though cheers!

[Steax]

display: block simply puts the element in its own line, like how paragraphs or headers automatically put blank spaces before and after it. Divs are also block elements. If you've ever put a border or background on a header/paragraph/div, you'll notice they expand to fill their containers. Try giving a background to a <h1> element. It fills up the entire line, as wide as the container of the <h1>. Set it's display to inline, though, which is the opposite of block, and the background only fills up to the text's length.

[tlcook]

Ah! Thanks Steax I understand now. Well, I think I understand. So for an example, if <h1> was given a width of 200px but the text inside it was only 2 characters, the background color would only span to two characters and any padding applied, right? So if I then add in display:block to the properties, the background color will then span the whole 200px instead?

Oh I do love CSS

[Steax]

No, a heading by default will be in display: block. Same goes for divs (their inline equivalent is span), paragraphs, lists, or anything in particular that logically should not share a line with other elements. So by default it would fill the whole 200px, unless you set it to display: inline in which case it only fits the text.

Btw, if you don't specify width, it'll automatically have the width of it's container minus its margin (if it's a block element) or have the width of it's contents plus padding (if it's an inline element).

Oh I do love CSS

And shall everyone else.

[tlcook]

Oh right. Okay I get it now. Simple, once understood

Thanks Steax!