• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

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!
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 -->

Open in new window

0
Raydot
Asked:
Raydot
1 Solution
 
Brian WithunCommented:
I think padding is the trick here:

#menu li a
{
      background: #e85f31;
      height: 2em;
      line-height: 2em;
      float: left;
      /*width: 6em;*/
      display: block;
    padding: 0 1em;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
}
<html>
<head>
<style>
 
#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;
	border-left: 1px solid white;
    border-right: 1px solid white;
 
} 
 
#menu li a
{
	background: #e85f31;
	height: 2em;
	line-height: 2em;
	float: left;
	/*width: 6em;*/
	display: block;
    padding: 0 1em;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
} 
 
.longlong
{
    text-decoration:underline;
}
 
</style>
</head>
<body>
 
<div id="menu">
<ul>
<li><a href="#">Short</a></li>
<li><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 -->
 
</body>
</html>

Open in new window

longlong.jpg
0
 
ycTINCommented:
inline-style have are highest priority


        <li>
            <a href="#" style="width:auto;">Long, long, long, long menu item</a>
        </li>
0
 
RaydotAuthor Commented:
Thanks!  Why doesn't it need to have a width?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now