Jump to content

CSS Menu - Top list item not showing up in IE


kwilliams
 Share

Recommended Posts

I created a CSS-based menu using an unordered list based on this article: http://www.alistapart.com/articles/dropdowns/...and I created a 100% div height design from that with this article: http://www.webmasterworld.com/css/3333354.htm */My resulting stylesheet basically makes an unordered list within a <div> tag into a group of buttons. It worked great before I added the 100% div height code, but the background color is not showing up for the first list item in IE6 and IE7 (shocking, I know). It shows up fine in Firefox. The rest of the list items show up fine in all browsers. I've looked in the source code of the page, and the code appears to be correct. So I'm totally stumped. If anyone could let me know what I'm doing wrong, I'd REALLY appreciate it. I've included all of code below. If you copy & paste the code below, and check it in each of the referenced browsers, you should get the same result. Thanks for any and all help.menu.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>	<title>CSS List-based Menu</title>	<style type="text/css">		html {		font-size:62.8%;		margin:0;		padding:0;		}				body {			font-family:verdana, arial, helvetica, sans-serif;			font-size:1.2em;			margin:0;			padding:0;			color:#000;			background-color:#FFF;			empty-cells:show;			min-width: 100%; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */ 		}				#wrapper {			padding-left: 150px;	  /* LC fullwidth */			padding-right: 238px;	 /* RC fullwidth + CC padding 218 + */			overflow:hidden;			/*padding-bottom:75px;*/			padding-bottom:575px;			-padding-bottom:0px;		}				#wrapper .column {			position: relative;			height:100%;			float: left;			padding-bottom: 1001em;	 /* X + padding-bottom */			margin-bottom: -1000em;	 /* X */		}				#content {			padding: 15px 0px 0px 0px/*left*/; /* CC padding */ /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/			width: 100%;			background: #FFF;		}				.leftheader {			background-color:#000;			color:#FFF;			font-weight:bold;			text-align:center;			word-wrap:break-word; /* For Mozilla: Use 'zero width space' ​ to break long words */			border-top:0px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/			width:120px;			margin-top:3px;			margin-bottom:-13px;		}				#screenleftnav {			width: 120px; /* LC width */			padding: 0; /* LC padding */			right: 150px; /* LC fullwidth + CC padding */			margin-left: -100%;			margin-top:44px;			color:#FFF;			background-color:#000;			border-right: 3px solid #900; /*'border-right-width' 'border-right-style' 'border-right-color'*/			-left: 238px; /* RC fullwidth */		}				#screenleftnav ul {			padding:0px; /*removes indent Mozilla and NN7*/			list-style-type:none; /*turns off display of bullet*/			text-align:center;			margin:15px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/		}				#screenleftnav li {			display:inline;		}				#screenleftnav a {			display:block;			background-color:#99C;			padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/			border-bottom:1px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/		}				#screenleftnav a:link, #screenleftnav a:visited {/*THIS IS THE PROPERTY */			background-color:#99C;			color:#FFF;			text-decoration:none;		}				#screenleftnav a:hover, #screenleftnav a:active { 			background-color:#CCF;			color:#000;		}				#screenheader {			width:100%;			border:0px;/*???*/			height:110px;			width:100%;			margin-top:0px;			background-color:#336; /* navy blue */		}	</style></head><body>	<div id="wrapper">		<div id="content" class="column">PAGE CONTENT GOES HERE</div><!-- end content -->		<div id="screenleftnav" class="column">				  <div class="leftheader">Page Links</div>					<ul>						<li><a href="page1.aspx">Page 1</a></li>						<li><a href="page2.aspx">Page 2</a></li>						<li><a href="page3.aspx">Page 3</a></li>					  </ul>					<div class="leftheader">Section Home</div>					<ul>						<li><a href="home.aspx">Home Page</a></li>					</ul>			</div><!-- end screenleftnav -->		</div><!-- end wrapper --></body></html>

Link to comment
Share on other sites

Thankfully, this question was answered by another forum, and I wanted to put the fixed code in this forum as well:

#screenleftnav li {float:left;}#screenleftnav a {width: 117px;display:block;background-color:#99C;padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/border-bottom:1px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/}

Thanks:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...