Solved

CSS priority

Posted on 2009-05-06
3
323 Views
Last Modified: 2012-05-06
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
Comment
Question by:Raydot
3 Comments
 
LVL 13

Accepted Solution

by:
Brian Withun earned 250 total points
ID: 24318562
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
 
LVL 7

Expert Comment

by:ycTIN
ID: 24323230
inline-style have are highest priority


        <li>
            <a href="#" style="width:auto;">Long, long, long, long menu item</a>
        </li>
0
 
LVL 3

Author Closing Comment

by:Raydot
ID: 31578644
Thanks!  Why doesn't it need to have a width?
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question