CSS Menu

tobyjoiner · #1 (**permalink**) 12-08-06, 11:22 PM

I cant make this work in IE and Firefox, Any ideas? it does the menu fine, but it should make a black background behind the menu and a red bar below it. Any help greatly appreciated. And I didnt include the code for the csshover.htc because that can be found anywhere on the net. If you want me to post it just let me know.

Toby

The HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet href="menuh.css" type="text/css">
<style type="text/css" media="screen">
	#menu {
		width: 100%;
		background-color: black;
		float: center;
	}
	.cntrall {
		background-color: black;
		margin-left: 0;
	}
	.redbar {
		background-color: red; 
		padding: 3px;
	}	
</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="white">
<div class="cntrall">
<div id="menu">
<ul>
	<li><h2>LOGIN</h2>
	    <ul>
	    	<li><a href="">Link 1</a></li>
	    	<li><a href="">Link 2</a></li>
	    	<li><a href="">Link 3</a></li>
	    	<li><a href="">Link 4</a></li>
	    	<li><a href="">Link 5</a></li>
	    	<li><a href="">Link 6</a></li>
	    	<li><a href="">Link 7</a></li>
	    </ul>							
	</li>
</ul>
</div>
</div>
<div class="redbar"></div>
</body>
</html>

The CSS Code (not my code, used from a tutorial)

Code:

#menu ul {
list-style: none;
margin-top: 0;
padding: 0;
width: 6em;
float: left;
}

#menu a, #menu h2 {
font: bold 12px/18px arial, helvetica, sans-serif;
display: block;
border-width: 2px;
border-style: solid;
border-color: black;
margin: 0;
padding-top: 0px;
}

#menu h2 {
color: white;
background: #000;
text-align: center;
text-transform: uppercase;
}

#menu a {
color: white;
background: black;
text-decoration: none;
}

#menu h2:hover {
color: red;
background: black;
}

#menu a:hover {
color: red;
background: black;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
width: 12em;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Shaffer · #2 (**permalink**) 12-09-06, 10:25 AM

There...

Code:

<script language="JavaScript" type="javascript/text">
<!--
var browserName=navigator.appName; 
if (browserName=="Microsoft Internet Explorer") { 
    menu.ul.li = float: left;
    menu.ul.li = width: 100%;
} else if (browserName=="Microsoft Internet Explorer") {
    body.style.behavior = url(csshover.htc);
    body.style.font-size = 100%;
}
//-->
</script>

I am pretty sure this has a mistake in it, but it is certainly progress...

Shaffer.

tobyjoiner · #3 (**permalink**) 12-11-06, 09:29 AM

im not sure what thats supposed to be for, but IE is working fine, its Firefox that is the problem. That code didn't do anything that the CSS doesn't already do.

tobyjoiner · #4 (**permalink**) 12-11-06, 02:45 PM

in case anyone cares or wants to know this, this is what I did to get it to work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Test Menu</title>
		<link rel="stylesheet" href="menuh.css" type="text/css" />
		<style type="text/css" media="screen">
			#menu {
				width: 100%;
				background-color: #000000;
				margin-left: 35%;
			}
			.cntrall {
				background-color: #000000;
				margin-left: 0%;
			}
		</style>
		<!--[if !IE]>-->
		<style type="text/css" media="screen">
			.blackbar {
				width: 100%;
				background-color: #000000; 
				padding: 12px;
			}
			.redbar {
				width: 100%;
				background-color: #ff0000; 
				padding: 3px;
			}
		</style>
		<!--<![endif]-->
		<!--[if IE]>
		<style type="text/css" media="screen">
			.redbar { width: 100%; background-color: #ff0000; height: 5px;}
			#menu ul li {float: left; width: 100%;}
		</style>
		<![endif]-->
		
		<!--[if lt IE 7]>
		<style type="text/css" media="screen">
			body { behavior: url(csshover.htc); font-size: 100%; }
			#menu ul li a {height: 1%;} 
			#menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; }
		</style>
		<![endif]-->
	</head>
	<body>
		<div class="cntrall">
			<div id="menu">
				<ul>
					<li><h2>MENU</h2>
					    <ul>
					    	<li><a href="">Link 1</a></li>
					    	<li><a href="">Link 2</a></li>
					    	<li><a href="">Link 3</a></li>
					    	<li><a href="">Link 4</a></li>
					    	<li><a href="">Link 5</a></li>
					    	<li><a href="">Link 6</a></li>
					    	<li><a href="">Link 7</a></li>
					    </ul>							
					</li>
				</ul>
				<ul>
					<li><h2>MENU</h2>
					    <ul>
					    	<li><a href="">Link 1</a></li>
					    	<li><a href="">Link 2</a></li>
					    	<li><a href="">Link 3</a></li>
					    	<li><a href="">Link 4</a></li>
					    	<li><a href="">Link 5</a></li>
					    	<li><a href="">Link 6</a></li>
					    	<li><a href="">Link 7</a></li>
					    </ul>							
					</li>
				</ul>
			</div>
		</div>
		<div class="blackbar"></div>
		<div class="redbar"></div>
</body>
</html>

and the CSS is the same I think, but if not, here it is too:

Code:

body {
	margin: 0 0 0 0;	
}

#menu ul {
list-style: none;
margin-top: 0;
padding: 0;
width: 6em;
float: left;
}

#menu a, #menu h2 {
font: bold 12px/18px arial, helvetica, sans-serif;
display: block;
border-width: 2px;
border-style: solid;
border-color: #000000;
margin: 0;
padding-top: 0px;
}

#menu h2 {
color: white;
background-color: #000;
text-align: center;
text-transform: uppercase;
}

#menu a {
color: white;
background-color: #000000;
text-decoration: none;
}

#menu h2:hover {
color: #ff0000;
background-color: #000000;
}

#menu a:hover {
color: red;
background-color: #000000;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
width: 12em;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}