CSS buttons

IE OK, Opera/Mozilla Not

[fraser]

I'm rebuilding my personal site, switching from a css-only design to one with tables (don't ask why). I am including some css buttons though, which work fine in IE but degrade in Opera and Mozilla. The css I've used for the buttons is below.

.nav {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 3px 15px;
font-family: arial, helvetica, sans-serif
text-align: center;
font-size: 11px;
line-height: 20px;
text-decoration:none;
width:100px;
font-weight : normal;
background:#57E3B4;
}
a.nav:hover {
background: #CCFFCC;
}

Any help is really appreciated. I'm a first time visitor here, so be gentle with me...

Thanks,

Fraser

[edited by: fraser at 4:47 pm (utc) on July 8, 2003]

[BlobFisk]

Welcome to WebmasterWorld, fraser!

Posting links to personal URL's is against the Terms of Service [webmasterworld.com] here. You should edit your post to remove it.

By button, do you mean a from input button?

I've tested your code, and the colour and text styling work on the inputs. How do they look at your end?

Are you using a valid doctype, and have you run your html and CSS through a validator?

[drbrain]

width cannont be set on inline elements. What is the surrounding HTML for these links?

If you make them block-level, you'll have to float them or do something similar.

[DrDoc]

Welcome to Webmaster World!

What exactly doesn't work in Opera/Mozilla? I have used CSS to style my links to look like buttons in the past, and it worked very well in those browsers.

<added>ooh, well spotted, drbrain :)</added>

[edited by: DrDoc at 4:54 pm (utc) on July 8, 2003]

[BlobFisk]

drbrain,

Width can also be set for replaced elements.

A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.

[fraser]

Thanks for the heads up - I've removed the link. I haven't validated the code or css yet as it's still very much a work-in progress, but I will do that. The problem is that in Mozilla the 100px width of the elements seems to be ignored - the 'button' width depends on the length of the text contained with its borders, nor are the font-family attributes being picked up, whereas with Opera only the latter is an issue.

[DrDoc]

Yes, BlobFisk, but now we're not talking about input elements, but plain links (hence the a.nav rule) ;)

[DrDoc]

That's because you missed the semicolon:

font-family: arial, helvetica, sans-serif;

[Reflection]

The problem is that in Mozilla the 100px width of the elements seems to be ignored

Setting the element to display:block; will fix that.

[fraser]

Thanks drbrain. You've given me something to work on. And thanks to everyone else.