Inline Elements and the Width Property

[danlott]

hi all,
i've got 3D buttons generated from css. they work great in IE, but ns7 doesnt seem to give the buttons any width, they are only as wide as the text (the width of the buttons must all be the same). dont even ask what ns5 does!
heres the code:
a.nav{
text-align:center;
color: #fff;
text-decoration: none;
background-color: #B40A01;
padding: 4px;
border-style: outset;
border-width: 2px;
border-color: #E5625C;
width:121px;
}
so its as if ns7 just has width:auto instead of width:121px.
many thanks
- D

[Nick_W]

Hi,

I'm not certain of the specifics but I know that putting display: block; in your a.nav will fix it ;)

Nick

[grahamstewart]

Nicks right. <a> is an inline element (like <span>[smilestopper]) so you cannot actually specify a width for it unless you specify that it should display as a block.

The fact the IE lets you do this is a good example of IE allowing sloppy coding practises.

[Reflection]

What do you know I was looking for an answer to a similar question :).

I realized that mozilla was not creating my buttons at the width I was specifying because they were inline elements. But my problem is I want my buttons to be all on the same line, but display:block; prevents that.

Is there a way I can work around this?

Thanks.

[Nick_W]

Yep, ;)
[w3.org...]

Nick

[Reflection]

Thanks.

That was way too easy, should have thought of that :).

[danlott]

wicked guys, thats done it! many thanks.
- D