Forum Moderators: not2easy
I am setting up a simple left-side navigation meun with the following attributes: 1) a bottom border so that each menu item has a separation and 2) a hover background color that consumes the entire cell
Even though to sounds simple I can't get it to work. It seems like the "display: block;" adds a line feed to each menu item. But If I don't use it, the hover background color does not consume the entire cell. I also noticed that if I don't display 2 items in a cell or row it works fine, but I need to display an image and a link on the same row.
Below is the least amount of code that gets right to the problem. I have tested this on IE7 and IE6 machines.... Thanks in advance for any help!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
@charset "utf-8";
.leftnavmenu table{
width: 300px;
float: left;
}
.leftnavmenu td{
color: #A70303;
border-bottom: 1px solid #dadada;
}
.leftnavmenu a{
color: #A70303;
display: block;
text-decoration: none;
}
.leftnavmenu td a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #FFFF66; /* yellow */
}
</style>
</head>
<body>
<div class="leftnavmenu">
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr height=10>
<td>some text or image <a href="http://www.webmasterworld.com">Web Master World 1</a> </td>
</tr>
<tr>
<td>some text or image <a href="http://www.webmasterworld.com">Web Master World 2</a> </td>
</tr>
</table>
</div>
</body>
</html>
Ready for the deep end of the pool ? :)
First: when developing CSS, do not use IE. Use any other browser, but not IE6 or IE7, they really mess with your mind and are so riddled with bugs and features that it'll drive you insane.
Moreover it's faster to get it working in all browsers and then use conditional comments to fix it for those two legacy browsers.
On to your code:
html nowadays really needs to start with a full doctype, you'll trip browsers into quirksmode if you don't have that (and you really don't want IE6 to be that way -- it'll act like it's got a real bad case of toothache)
The div around your table in reality isn't needed, you can give anything applied on the div directly to it's content.
The table ... you felt this coming I guess: it's not only (ab)used to do layout, but it'll also makes it harder to do what needs to be done, so why not replace it with a simple <ul>, that's after all how most of our menus are in html, regardless of layout ?
The very deep end:
names like "navmenu" are generally thought to be better and more lasting than "leftnavmenu", you don't want to have to edit all your htmlpages case you changed it to a right or top navigation ...
hover state: you can in CSS hover any element, so hovering the <li> is probably what you seek.
There will be a gotcha when you try looking at it with IE6 ... it's the nightmare browser of many a web master. In this case you'll notice it will simply refuses to hover anything but an <a>. Either you live with that limitation, or either you fix IE with EI7.js.
There are plenty of navigation menus out there, look for them.
Tables and borders: take a look at "border-collapse" should you want to persist with styling tables for (ab)use as menu.
[edited by: swa66 at 10:57 pm (utc) on May 5, 2009]
In my code (below) I changed to <li> but still can't get the menu item to display correctly. Can you tell me if this menu displays correctly for you? Or can you see anything I am missing? Thanks again for your patience and help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
@charset "utf-8";
.leftmenu{
width: 200px;
}
.leftmenu ul{
list-style-type: none;
margin: 1px;
padding: 0;
margin-bottom: 38px;
}
.leftmenu ul li{
padding-bottom: 2px;
}
.leftmenu ul li a{
color: #A70303;
display: block;
padding: 0px 0;
padding-left: 1px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.leftmenu ul li a:visited{
color: #A70303;
}
.leftmenu ul li a:hover{
color: #A70303;
background-color: #FFFF66;
}
</style>
</head>
<body>
<div class="leftmenu">
<ul>
<li>some text <a href="www.someurl.com">Link 1</a> </li>
<li>some text <a href="www.someurl.com">Link 2</a> </li>
<li>some text <a href="www.someurl.com">Link 3</a> </li>
<li>some text <a href="www.someurl.com">Link 4</a> </li>
</ul>
</div>
</body>
</html>
