kwilliams Posted October 24, 2007 Share Posted October 24, 2007 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 More sharing options...
kwilliams Posted October 26, 2007 Author Share Posted October 26, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.