This a code I got for a menu.
As you can see I have a class ("current") that stands for a stedy mouseover that the user will see on a certin tab of the menu once he is in the spcific page (The "About Us" tab will highlight once he is in the "About Us" page).
The problem is that the current class doesn't work. I can't see what have I missed. Can someone help me please, I'm going nuts!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#menu {list-style: none; list-style-image: none; margin: 0px; padding: 0px 0px 4px 0px; width: 182px; border-top: 1px solid #b7bbb7;}
#menu li {margin: 0px; padding: 0px; font: 1em Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px solid #fff;}
#menu li a, #menu li a:visited {display: block; background: #c73400; color: #fff; text-decoration:none; line-height: 19px; margin: 0px; padding: 0px 14px; width: 154px !important; width /**/:184px; background-image: none;}
#menu li a span {margin: 0px; padding: 0px;}
#menu li a:hover {background: #dc3B01; color: #fff;}
#menu li a:hover span {display: inline; color: #fff;}
#menu li a.current, #menu li a.current: visited, #menu li a.current:hover {background: #404240; color: #fff;}
#menu li a.current span, #menu li a.current: visited span, #menu li a.current: hover span {display: none;}
</style>
</head>
<body>
<div id="menuHolder">
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="current">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pricing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Payment</a></li>
</ul>
</div>
</body>
</html>
Thanks!here you are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#menu {list-style: none; list-style-image: none; margin: 0px; padding: 0px 0px 4px 0px; width: 182px; border-top: 1px solid #b7bbb7;}
#menu li {margin: 0px; padding: 0px; font: 1em Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px solid #fff;}
#menu li a, #menu li a:visited {display: block; background: #c73400; color: #fff; text-decoration:none; line-height: 19px; margin: 0px; padding: 0px 14px; width: 154px !important; width /**/:184px; background-image: none;}
#menu li a span {margin: 0px; padding: 0px;}
#menu li a:hover {background: #dc3B01; color: #fff;}
#menu li a:hover span {display: inline; color: #fff;}
#menu li a#current {background: #404240;}
</style>
</head>
<body>
<div id="menuHolder">
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pricing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Payment</a></li>
</ul>
</div>
</body>
</html>With a clean code in it. As you can see, it's working on FF but it won't in IE.i don't get it... is what i supplied not right? what you posted in menu.txt is the same thing that you posted at first, but i thought my code i supplied did what you were asking? what exactly are you asking?I tried you code but it didn't work.
Does it work for you?yes, did you copy the whole thing? mine works in html-kit, ie, and firefox...
all you are trying to do is make the current pages link to be a constant color with no hover changes right?You know what JDM71488?! I missed something when I copied it!
I'm sorry man, it's working fine now!
Thanks a lot just tell me one thing. Why you took the last line? no need for it or what?
Thanks again!no problem... and to explain:
#menu li a.current, #menu li a.current: visited, #menu li a.current:hover {background: #404240; color: #fff;}
i took this one out because it is changing the background on hover, but it wasn't working anyway...
#menu li a.current span, #menu li a.current: visited span, #menu li a.current: hover span {display: none;}
i took this one out because you didn't have spans inside your anchors...
i just made an id to change the background on one of your links... classes would be theoretically used for more than one, but since you can only be on one page at a time i just use an id...
and really you don't need #menu li a span {margin: 0px; padding: 0px;} either with no spans inside your anchors...
ill clean your code up a bit so you can just copy it:
#menu {
list-style: none;
margin: 0px;
padding: 0px 0px 4px 0px;
width: 182px;
border-top: 1px solid #b7bbb7;
}
#menu li {
font: 1em Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px solid #fff;
}
#menu li a, #menu li a:visited {
display: block;
background: #c73400;
color: #fff;
text-decoration: none;
line-height: 19px;
padding: 0px 14px;
width: 154px !important;
width /**/:184px;
}
#menu li a:hover { background: #dc3B01; }
#menu li a#current { background: #404240; }
that should do it, i didn't retry it, but if it don't work just let me know.
It's working great! Thanks a lot JDM71488 
Thanks for the details.
I'd like to ask you one more thing.
I have this menu you saw and I'm trying to have it work with sub categories.
The file I attached has the code and you can it's working BUT I'm gettin' this strange space between the menu and the sub menu.
Why's that?
What's wrong with it?
Can you help me with it?
Thanks!well i messed around with it, BUT, it looks fine if you change this line:
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{display: none; position: absolute; top: 0; left: 142px;}
it works fine in IE, and firefox... take it easy!Thank you so much!
As you can see I have a class ("current") that stands for a stedy mouseover that the user will see on a certin tab of the menu once he is in the spcific page (The "About Us" tab will highlight once he is in the "About Us" page).
The problem is that the current class doesn't work. I can't see what have I missed. Can someone help me please, I'm going nuts!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#menu {list-style: none; list-style-image: none; margin: 0px; padding: 0px 0px 4px 0px; width: 182px; border-top: 1px solid #b7bbb7;}
#menu li {margin: 0px; padding: 0px; font: 1em Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px solid #fff;}
#menu li a, #menu li a:visited {display: block; background: #c73400; color: #fff; text-decoration:none; line-height: 19px; margin: 0px; padding: 0px 14px; width: 154px !important; width /**/:184px; background-image: none;}
#menu li a span {margin: 0px; padding: 0px;}
#menu li a:hover {background: #dc3B01; color: #fff;}
#menu li a:hover span {display: inline; color: #fff;}
#menu li a.current, #menu li a.current: visited, #menu li a.current:hover {background: #404240; color: #fff;}
#menu li a.current span, #menu li a.current: visited span, #menu li a.current: hover span {display: none;}
</style>
</head>
<body>
<div id="menuHolder">
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="current">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pricing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Payment</a></li>
</ul>
</div>
</body>
</html>
Thanks!here you are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
#menu {list-style: none; list-style-image: none; margin: 0px; padding: 0px 0px 4px 0px; width: 182px; border-top: 1px solid #b7bbb7;}
#menu li {margin: 0px; padding: 0px; font: 1em Verdana, Arial, Helvetica, sans-serif; border-bottom: 1px solid #fff;}
#menu li a, #menu li a:visited {display: block; background: #c73400; color: #fff; text-decoration:none; line-height: 19px; margin: 0px; padding: 0px 14px; width: 154px !important; width /**/:184px; background-image: none;}
#menu li a span {margin: 0px; padding: 0px;}
#menu li a:hover {background: #dc3B01; color: #fff;}
#menu li a:hover span {display: inline; color: #fff;}
#menu li a#current {background: #404240;}
</style>
</head>
<body>
<div id="menuHolder">
<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" id="current">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pricing</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Payment</a></li>
</ul>
</div>
</body>
</html>With a clean code in it. As you can see, it's working on FF but it won't in IE.i don't get it... is what i supplied not right? what you posted in menu.txt is the same thing that you posted at first, but i thought my code i supplied did what you were asking? what exactly are you asking?I tried you code but it didn't work.
Does it work for you?yes, did you copy the whole thing? mine works in html-kit, ie, and firefox...
all you are trying to do is make the current pages link to be a constant color with no hover changes right?You know what JDM71488?! I missed something when I copied it!
I'm sorry man, it's working fine now!
Thanks a lot just tell me one thing. Why you took the last line? no need for it or what?
Thanks again!no problem... and to explain:
#menu li a.current, #menu li a.current: visited, #menu li a.current:hover {background: #404240; color: #fff;}
i took this one out because it is changing the background on hover, but it wasn't working anyway...
#menu li a.current span, #menu li a.current: visited span, #menu li a.current: hover span {display: none;}
i took this one out because you didn't have spans inside your anchors...
i just made an id to change the background on one of your links... classes would be theoretically used for more than one, but since you can only be on one page at a time i just use an id...
and really you don't need #menu li a span {margin: 0px; padding: 0px;} either with no spans inside your anchors...
ill clean your code up a bit so you can just copy it:
#menu {
list-style: none;
margin: 0px;
padding: 0px 0px 4px 0px;
width: 182px;
border-top: 1px solid #b7bbb7;
}
#menu li {
font: 1em Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px solid #fff;
}
#menu li a, #menu li a:visited {
display: block;
background: #c73400;
color: #fff;
text-decoration: none;
line-height: 19px;
padding: 0px 14px;
width: 154px !important;
width /**/:184px;
}
#menu li a:hover { background: #dc3B01; }
#menu li a#current { background: #404240; }
that should do it, i didn't retry it, but if it don't work just let me know.
It's working great! Thanks a lot JDM71488 Thanks for the details.
I'd like to ask you one more thing.
I have this menu you saw and I'm trying to have it work with sub categories.
The file I attached has the code and you can it's working BUT I'm gettin' this strange space between the menu and the sub menu.
Why's that?
What's wrong with it?
Can you help me with it?
Thanks!well i messed around with it, BUT, it looks fine if you change this line:
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{display: none; position: absolute; top: 0; left: 142px;}
it works fine in IE, and firefox... take it easy!
Thank you so much!