I have this code but it doesn't work well on IE and I'm not sure why.
Each one of the "other" should be one under each other and it looks like it in FF but not in IE. What can it be?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#vertnav {list-style: none;}
#vertnav ul {padding:0; margin:0; list-style: none; width:12em; z-index:99; overflow: visible; position: absolute; background-color:#DFDFDF;}
#vertnav li {position: relative; width: 12em; background-color:#DFDFDF; border:solid 1px #CECECE; display: block; height:1.5em; margin:0;}
#vertnav ul li{ background-color:#DFDFDF;}
#vertnav li{ border-width: 1px 1px 0 1px;}
#vertnav a {text-decoration:none; display:block; padding: 0.1em; margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ width:11.5em; /*helps IE with hover */ height:1.2em;}
#vertnav li:hover, #vertnav a:hover {background-color:#DFDFDF;}
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{display:block; position:absolute; top:0; left:12em;}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul {display:none;}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul {display:block;}
li>ul {top: auto; left: auto;}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */
</style>
</head>
<body>
<ul id="vertnav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Colors</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"">Fake</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Red</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">White</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Blue</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"">Real</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
</ul>
</body>
</html>
I guess it's something small but I just can't figure it out.
ThanksYou have 3 CSS styles that refer to the li.. get rid of the second one (the one that only says "background-color:#DFDFDF"), and put "border-width: 1px 1px 0 1px;" into the first one (the one with the position: relative; and all that). I don't know if that'll help.. but try it.It didn't help. What can it be?/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */
That looks like the big problem to me.
Each one of the "other" should be one under each other and it looks like it in FF but not in IE. What can it be?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#vertnav {list-style: none;}
#vertnav ul {padding:0; margin:0; list-style: none; width:12em; z-index:99; overflow: visible; position: absolute; background-color:#DFDFDF;}
#vertnav li {position: relative; width: 12em; background-color:#DFDFDF; border:solid 1px #CECECE; display: block; height:1.5em; margin:0;}
#vertnav ul li{ background-color:#DFDFDF;}
#vertnav li{ border-width: 1px 1px 0 1px;}
#vertnav a {text-decoration:none; display:block; padding: 0.1em; margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */ width:11.5em; /*helps IE with hover */ height:1.2em;}
#vertnav li:hover, #vertnav a:hover {background-color:#DFDFDF;}
#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{display:block; position:absolute; top:0; left:12em;}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul {display:none;}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul {display:block;}
li>ul {top: auto; left: auto;}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */
</style>
</head>
<body>
<ul id="vertnav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Colors</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"">Fake</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Red</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">White</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Blue</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"">Real</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Other</a></li>
</ul>
</body>
</html>
I guess it's something small but I just can't figure it out.
ThanksYou have 3 CSS styles that refer to the li.. get rid of the second one (the one that only says "background-color:#DFDFDF"), and put "border-width: 1px 1px 0 1px;" into the first one (the one with the position: relative; and all that). I don't know if that'll help.. but try it.It didn't help. What can it be?/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */
That looks like the big problem to me.