CSS horzontal drop-down menu appear to be vertical in IE

This is not the common Hover issue. I can't get the horizontal men

Page 1 of 1

0 Replies - 5000 Views - Last Post: 08 May 2007 - 08:37 AM

#1 alfee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 26-April 07

CSS horzontal drop-down menu appear to be vertical in IE

Posted 08 May 2007 - 08:37 AM

Hi,

I'm learning and trying to create the horizontal dropdown menu bar for a site i'm working on. everything looks beautiful in Firefox, but quite ugly in IE. I've taken care of the hover dropdown issue. it actually drop down in IE. But since the Menu bar is a list of item, the bar appears just like a regular list (vertically) in IE browser.

This is the html code:
<div id="nav">
	<div class="skip">
				<a href="#skip-menu">Return to Skip Menu</a> 
		<a name="skipto-main-nav"></a> 
		<h2> Main Navigation </h2> 
	</div>
	<div id="main-nav">
		<ul>
			<li>
				<a href="http://www.vt.edu/">Virginia Tech Home</a> 
			</li>
			<li>
				<a href="http://www.eng.vt.edu/">College of Engineering</a> 
			</li>
			<li>
				<a href="http://www.me.vt.edu/">Mechanical Engineering</a> 
			</li>
		</ul>

		<div class="clear">
			<span>   </span> 
		</div>
	</div>
	<div id="menu">
		<ul>
			<li><a href="">Overview</a></li>
			<li><a href="">Members</a>
				<ul>
					<li><a href="">Present Members</a></li>
					<li><a href="">Past Members</a></li>
					<li><a href="">Collaborations</a></li>
				</ul>
			</li>
			<li><a href="">Research</a>
				<ul>
					<li><a href="">Research</a></li>
					<li><a href="">Facilities</a></li>
					<li><a href="">Papers</a></li>
						<li><a href="">Codes</a></li>	
				</ul>
			</li>
			<li><a href="">Articles</a> </li>
			<li><a href="">Animations</a> </li>
			<li><a href="">Download</a>
				<ul>
					<li><a href="">Download</a></li>
					<li><a href="">Register</a></li>
					<li><a href="">Documentation</a></li>
					<li><a href="">F.A.Q.</a></li>	
				</ul>
			</li>
			<li><a href="">Links </a>
				<ul>
					<li><a href="">VPI links</a></li>
					<li><a href="">Related Projects</a></li>
					<li><a href="">Other Web links</a></li>
				</ul>
			</li>
			<li><a href="">Contact</a> </li>
		</ul>
	</div>
</div>



The #main-nav menu bar does appear to be horizontal (it came with the template), while my add-on #menu menu bar is VERY vertical. Seems to me that the key thing that make the #main-nav horizontal is that its ul li elements are floated left. #menu elements are floated left too, along with other things, but it's not horizontal.
here's the code for #main-nav

#main-nav {
	background: #497381 url(../img/main_nav_vnav.jpg) repeat-y top left;
	clear: both;
	}

.horizontal #main-nav {
	border-bottom: 1px #fff solid;
	float: left;
	width: 100%;
	background: #557082 url(../img/main_nav_hnav.gif) repeat-x top left;
	}

#main-nav ul {
	background: transparent url(../img/nav_separator.jpg) no-repeat top right;
	}

.horizontal #main-nav ul {
	background: none;
	}


Here's the css for #menu code
#menu {
	border-bottom: 1px #fff solid;
	float: left;
	width: 100%;
	white-space:nowrap;
	background: #eee;
	}
#menu ul {
	list-style: none;
	margin: 0;
	  padding: 0 0 0 20px;
	width: auto;
	float: left;
	clear: both;
}



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

#menu a:hover {
		color: #5c0000;
}

#menu li {
	position: relative; 

}

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

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

div#menu ul {
		background:#f5f5eb;
}

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;}

</style>
<!--[if IE]>
<link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="all" />

<style type="text/css" media="screen">
body  {
 	behavior: url(../assets/css/sshover.htc);
	font-size: 100%;
}
 
#menu ul il {float: left;  height: 1%; }
#menu ul li a {height: 1%;}
 
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
	   behavior: url(../assets/css/sshover.htc);
font-size: 100%;
}




This is the ie.css code (the part that deals with list
ul, ol ul {
	list-style-image: url(../img/list_bullet_fw_ie.gif);
	}

ul li {
	margin-bottom: 5px;
	margin-left: 18px;
	}

ol li {
	margin-bottom: 5px;
	margin-left: 25px;
	}

#sub-content .sub-section ul li {
	margin-left: 18px;
	}

#sub-content .sub-section ol li {
	margin-left: 25px;
	}




Here's part of the code the deals with #nav positioning (#nav is the container div of #menu, which is what i'm working on). I'm trying to add more to a pre-design template:
#nav {
	width: 191px;
	float: left;
	display: inline;
	background: #42657b url(../img/nav_bg.gif) repeat-y top left;	
	color: #fff;	
	}

.horizontal #nav {
	width: 758px;
	float: none;
	clear: both;
	}

/* Headers */

#nav h2, #nav h3, #nav h4,
#nav h5, #nav h6 {
	color: #fff;
	}

/* Lists */

#nav ul {
	margin: 0 0 0 8px;
	padding: 10px 10px 5px;
	list-style-image: none;
	}

.horizontal #nav ul {
	margin: 0;
	padding: 0 0 0 20px;
	float: left;
	clear: both;
	width: auto;
	}

#nav ul li {
	margin: 0;
	padding: 0 0 5px;
	line-height: 1.1em;
	}

.horizontal #nav ul li {
	margin-right: 15px;
	padding: 0;
	float: left;
	width: auto;
	display: inline;
	line-height: 2.5em;
	text-align: center;
	}




I know very little about CSS, I'd appreciate any help.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1