mozilla bg width for text problem

ie obeys width attribute but mozilla dosen't

[vwds]

I am working on a menu for a website and am trying to make all of the links have a bg color and a hover color. I am also trying to make all of the links of the same width. IE makes the links the correct size by just defining the width in my external css sheet, but mozilla doesn't obey that definition.
here is my code: ( I use classes to define only the menu links)

CSS::

.menutitle
{
cursor: pointer;
width: 90px;
border: 1px solid #dcd600;
background-color: #000000;
margin: 2px;
text-align:center;
font-weight:bold;
color: #dcd600;
display: inline;
}

.menutitle a:link, .menutitle a:visited
{
width: 90px;
background-color: #000000;
color: #dcd600;
text-decoration: none;
display: inline;
}

.menutitle a:hover
{
width: 90px;
background-color: #101010;
color: #dcd600;
text-decoration: none;
display: inline;
}

HTML sample::

<div class="menutitle"><a href="main.html">Home</a></div>

[rogerdp]

Next time validate your CSS. You can do that at [jigsaw.w3.org...]

Width does not apply to inline elements. Make your links display: block.

[edited by: tedster at 11:10 pm (utc) on Mar. 15, 2004]
[edit reason] Sorry, no personal URLs. See TOS [/edit]

[vwds]

if I change the display to block than the links stack since they are a block item. I need them to be inline. Thanks though

[vwds]

I ran my css through rogerdp's validator and it said that it was valid css. I also tried to validate the html but it didn't have a doctype declared. I then added the appropriate doctype, and now I have the same problem in IE. Does any body know how to alter the background width of the hyperlinks while still keeping the doctype declaration?

thanks for the validator and info rogerdp!

[Bonusbana]

I think I understand what you want. A float:left and a list should do the trick and also make your menu semantic correct.

Try this code:

<style type="text/css" media="screen"><!--

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
width: 90px;
border: 1px solid #dcd600;
background: #000;
margin: 2px;
padding: 0;
font-weight: bold;
color: #dcd600;
display: block;
text-align: center;
text-decoration: none;
}

#menu ul li a:hover {
background: #999990;
color: #dcd600;
text-decoration: none;
}

--></style>

HTML:

<div id="menu">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="main.html">Home</a></li>
<li><a href="main.html">Home</a></li>
</ul>
</div>

Kind regards
david

[edited by: Bonusbana at 11:06 pm (utc) on Mar. 15, 2004]

[rogerdp]

Hmm, you are right, logically invalid CSS can validate syntactually. However, that doesn't change that applying width to inline <a> tags is wrong.

See [w3.org...] , specifically the "applies to" part.

[vwds]

I want my menu to be horizontal as in - not ¦.
rogerdp I did not know that invalid CSS code could validate syntactually. I was not aware of that. Thanks

[Bonusbana]

If you try my code that I posted earlier, your menu will become horizontal thanks to the float:left, even though its in a list.

[vwds]

Sorry about the misunderstanding bonusbana, I should have tried your code or inspected it closer before jumping to conclusions. The suggested code would work perfectly except that I need the menu to be centered, I know it is possible, but I am not sure how to do it with out destroying the horizontal aspect of the code. If anyone has a suggestion as to how to center bonusbana's provided code that would be great. I understand that a float left (or right) command is supposed to send something to the side but is there a way to center it? I modified the padding on the menu and it is fit to use now, but if there are suggestions on how to center bonusbana's code than let me know I would prefer to have the buttons a standard width.

[Bonusbana]

hm, you could always put the menu into a wrapping div, give it an exact width according to the number of menu items and then center it.

Consider this:

#wrap {
margin: 0 auto;
width: 288px;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
width: 90px;
border: 1px solid #dcd600;
background: #000;
margin: 2px;
padding: 0;
font-weight: bold;
color: #dcd600;
display: block;
text-align: center;
text-decoration: none;
}

#menu ul li a:hover {
background: #992;
color: #dcd600;
text-decoration: none;
}

<html>
<body>

<div id="wrap">
<div id="menu">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="main.html">Home</a></li>
<li><a href="main.html">Home</a></li>
</ul>
</div>
</div>

</body>
</html>

Now, the wrap width is 288px because the three menu items + margins & borders: 90+90+90+2+2+2+2+2+2+1+1+1+1+1+1. Please note that you will need some hack to make the width display correct in IE5/win, because IE5/win does not count borders or padding in the total width. Try the box model hack:

#wrap {
margin: 0 auto;
padding: 0;
width: 288px;
voice-family: "\"}\""; */ box model hack */
voice-family:inherit;
width: 282px;
}
/* opera hack */
html>#wrap {
width: 282px;
}

I dont know if there is an easier way at the moment, sorry.

[vwds]

Thanks bonusbana, I knew there was a way to do it. If I have any problems I'll let you know.