Forum Moderators: not2easy
Here's my style sheet:
div#menu {
width: 131px;
}
div#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
font-weight: bold;
font-family: Tahoma, Arial, Verdana, sans-serif;
}
div#menu li#nav {
margin: 0px;
float: left;
}
div#menu li#nav a {
display: block;
width: 131px;
padding: 2px 2px 2px 5px;
border: 1px solid #000000;
background: #006600;
text-decoration: none;
}
div#menu li#nav a:link, div#menu li#nav a:active, div#menu li#nav a:visited {
color: #FFFFFF;
}
div#menu li#nav a:hover {
border: 1px solid #000000;
background: #000000;
color: #FFFFFF;
}
And here is a sample menu:
<div id="menu">
<ul>
<li id="nav"><a href="/html/eng/mgt/cmmrs.html" onFocus="this.blur()" target="_self">Commissioners</a></li>
<li id="nav"><a href="/html/eng/mgt/ops.html" onFocus="this.blur()" target="_self">Operations Committee</a></li>
<li id="nav"><img src="images/menu/bar_menu.gif" width="131" height="10" align="top"></li>
</ul>
</div>
If you are using a "strict" doctype declaration, your link is 131+2+2+1+1=137px wide (width, padding, border).
Do you need to set a width on the link?
And yes, I need to set a width for my links otherwise every option in the menu will be a different width. Removing "width: 131px;" from "div#menu li#nav a" fixes the width problem but now all the options in the menu are a different width. Is there any way I can do this with the method I'm using?
Also, you are using the same id for the list items and since an id only is allowed once on a page I think you should change them into classes.
<li class="nav">
Unfortunately, it broke the menu in IE, Opera, and Mozill but fixed it in Firefox. :(
Also, I removed the "nav" ids from the style sheet and from my menu since I don't really need them for what I'm doing.
Does anyone have any ideas on how else I might be able to get this thing to work?
Thanks in advance!
You shouldn't need to set any other widths, and doing so is asking for problems, like you're finding.
If the a nav link is set to display block, and the li is set to display block, they are going to expand to fill their container, in most cases anyway, the container having a width of 131px. Try simplifying your css, let the defaults do their thing, that tends to work better than trying to nest stuff and set specific widths on it, in most cases.
I have to say, however, that if I want problems on a css layout, I will use ul li navigation, that's the buggiest of almost all the methods I've found cross browser, using nested divs is a lot easier.
Thanks for the tips! :)
I tried simplifying my style sheet like you said but it didn't have any effect in Firefox.
However, I have redesigned the menu using nested DIVs and now it works perfectly in Firefox, Opera, and Mozilla but now IE has a problem.
.menu {
width: 131px;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
font-weight: bold;
font-family: Tahoma, Arial, Verdana, sans-serif;
float: left;
border: 1px solid #000000;
}
.menu a {
display: block;
padding: 2px 2px 2px 5px;
background: #006600;
text-decoration: none;
}
.menu a:link, .menu a:active, .menu a:visited {
color: #FFFFFF;
}
.menu a:hover {
background: #000000;
color: #FFFFFF;
}
Is this what you meant by nested DIVs?
<div>
<div class="menu"><a href="/html/eng/info/about.html" onFocus="this.blur()" target="_self">About</a></div><br clear="left">
<div class="menu"><a href="/html/eng/info/contacts.html" onFocus="this.blur()" target="_self">Contacts</a></div><br clear="left">
<div class="menu"><a href="/html/eng/info/links.html" onFocus="this.blur()">Links</a></div><br clear="left">
<div class="menu"><a href="/html/eng/info/pictures.html" onFocus="this.blur()" target="_self">Pictures</a></div><br clear="left">
<div><img src="images/menu/bar_menu.gif" width="131" height="10" align="top" alt=""></div>
</div>
For some reason IE will only change the background color for a link if I highlight the text itself. Not only that but the As you have probably guessed I'm pretty new at using style sheets in this manner. Am I doing something wrong with this new setup or does IE generally have problems with nested DIVs?
onFocus="this.blur()" arget="_self"
or this:
<br clear="left">
if you want spacing between the nav elements use
margin-top:1em; or whatever spacing you want.
the IE thing is a display property bug in IE, you can fix it I think by adding this style:
* html body .menu a {
width:100%;
}
although that might mess up IE 5x mac, since it also reads that hack, if you want to be safe, try this:
/* hide from ie mac \*/
* html body .menu a {
width:100%;
}
/* end hack */
and that should work fine, it also depends on whether your page is running in quirks mode or not, give it a try and see how it looks in IE 6, quirks mode is triggered by either not using a doctype, or by using an incomplete doctype, one line, no url.
* html body .menu a {
width: 100%;
}
fixed the problem with links in IE. :D
However, now I have a new problem. It won't float left unless I place float: left; in .menu a. This fixes the problem in IE but creates a whole new problem in Firefox, Mozilla, Opera, etc. The divs float left in those browsers but the background hugs the text so it doesn't fill the block. Placing float: left; in .menu fixes this problem in every browser I've tested except for IE. Placing it in both places creates some pretty strange results so that's out of the question.
Any suggestions?
My style sheet now looks like this:
.menu {
font-size: 12px;
font-weight: bold;
font-family: Tahoma, Arial, Verdana, sans-serif;
width: 131px;
margin: 0px;
padding: 0px;
}
.menu a {
display: block;
padding: 2px 2px 2px 5px;
background: #006600;
text-decoration: none;
float: left;
border: 1px solid #000000;
}
.menu a:link, .menu a:active, .menu a:visited {
color: #FFFFFF;
}
.menu a:hover {
background: #000000;
color: #FFFFFF;
}
/* hide from Mac IE 5.0 */
@media all {
* html body .menu a {
width: 100%;
}
}
Additionally I have removed onFocus="this.blur()" target="_self" and <br clear="left"> from each div producing:
<div>
<div class="menu"><a href="">Option 1</a></div>
<div class="menu"><a href="">Option 2</a></div>
<div class="menu"><a href="">Option 3</a></div>
<div class="menu"><a href="">Option 4</a></div>
<div class="menu"><img src="images/menu/bar_menu.gif" width="131" height="10" align="top"></div>
</div>
#menu div {
}
assuming you have only one menu container div, give it an id instead of class.
