Current location: Hot Scripts Forums » General Web Coding » CSS » CSS Menu


CSS Menu

Reply
  #1 (permalink)  
Old 12-08-06, 11:22 PM
tobyjoiner tobyjoiner is offline
Newbie Coder
 
Join Date: Nov 2006
Posts: 87
Thanks: 0
Thanked 0 Times in 0 Posts
CSS Menu

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;}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 12-09-06, 10:25 AM
Shaffer Shaffer is offline
Wannabe Coder
 
Join Date: Sep 2006
Location: Israel
Posts: 149
Thanks: 0
Thanked 0 Times in 0 Posts
Post

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.
__________________
Hello from Israel!

Last edited by Nico; 12-09-06 at 10:40 AM. Reason: Please use [code] wrappers when posting code.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 12-11-06, 09:29 AM
tobyjoiner tobyjoiner is offline
Newbie Coder
 
Join Date: Nov 2006
Posts: 87
Thanks: 0
Thanked 0 Times in 0 Posts
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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 12-11-06, 02:45 PM
tobyjoiner tobyjoiner is offline
Newbie Coder
 
Join Date: Nov 2006
Posts: 87
Thanks: 0
Thanked 0 Times in 0 Posts
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;}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - Menu Problem vivabensmith CSS 7 12-04-06 04:06 AM
CSS Drop-down Menu rendering problem in IE. HELP?! martongergo CSS 0 09-07-06 12:31 PM
CSS, Xoops, DHTML menu.. need your help billyvision CSS 0 08-11-05 09:05 AM
CSS drop down menu!! nouaman CSS 6 07-01-05 05:46 PM
Xml / Dom / Css Mark_SC.SE JavaScript 0 06-29-05 09:05 AM


All times are GMT -5. The time now is 11:24 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.