Raydot
asked on
CSS priority
All,
I'm having a problem getting a css menu to format properly. There's one large menu item that's pushing all of the other menu items out of alignment. If I expand the width of all menu items, the menu becomes too large for the page. If I try to override just that one menu items' width, with the "style" tag, css expands the width of the menu item but flows the text at the original setting. Any suggestions?
The code is below, and thanks!
I'm having a problem getting a css menu to format properly. There's one large menu item that's pushing all of the other menu items out of alignment. If I expand the width of all menu items, the menu becomes too large for the page. If I try to override just that one menu items' width, with the "style" tag, css expands the width of the menu item but flows the text at the original setting. Any suggestions?
The code is below, and thanks!
CSS:
#menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float:left;
margin: 0 0 0.15em;
font-size:10pt;
font-weight:bold;
font-family:arial, helvetica, san-serif;
}
#menu li a
{
background: #e85f31;
height: 2em;
line-height: 2em;
float: left;
width: 10em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
}
HTML:
<div id="menu">
<ul>
<li><a href="#">Short</a></li>
<li style="width:15em;"><a href="#">Long, long, long, long menu item</a></li>
<li><a href="#">Short</a></li>
<li><a href="#">Short</a></li>
<li><a href="#">Short</a></li>
</ul>
</div><!-- end menu -->
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks! Why doesn't it need to have a width?
<li>
<a href="#" style="width:auto;">Long, long, long, long menu item</a>
</li>