Just curious, why does the #localnav need to be positioned absolutely? If you remove the absolute positioning it appears as expected here (FF Mac OS X).
Diona On Dec 20, 2006, at 9:29 AM, Ian Vaughan wrote: > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd";> > <html> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=iso-8859-1"> > <title>Untitled Document</title> <style> > > #wrapper{ > position: relative; > background-color: #FFFFFF; > border: 1px solid #000000; > width: 780px; > margin: 0 auto; > text-align: left; > } > .navblock{ > display: block; > background-color: #193C65; > padding-top: 2px; > padding-bottom: 3px; > border-top: 1px solid #FFFFFF; > > } > > #header{ > background-color: #193C65; > height: 64px; > border-bottom: 1px solid #DEDEDE; > width: 780px; > overflow: hidden; > background: url(header-m.jpg) repeat-x 0 0; } .menu { > background-color: #313131; > border-top: 1px solid #B5B5B5; > height: 20px; > font-weight: bold; > font-family: tahoma,verdana, arial, sans-serif; > font-size: 11px; > padding: 0 0px 0 0px; > position:relative; > z-index:100; > } > > #localnav{ > float: left; > position: absolute; > width: 154px; > height: 100%; > background-image:url(bg2.gif); > background-repeat: repeat; > text-align: center; > font-family: tahoma,verdana, arial, sans-serif; > font-size: 10px; > font-weight: bold; > color:#FFFFFF; > } > > #localnav ul{ > list-style: none; > margin-left: 7px; > margin-top: 5px; > padding: 0; > background-color: #255082; > } > > #localnav li{ > text-align: left; > border-top: 1px solid #193C65; > border-left: 1px solid white; > font-size: 10px; > background-image: url(navarrow.gif); > padding: 0 0 0 20px; > background-repeat: no-repeat; > line-height: 20px; > } > > #localnav a{ > text-decoration: none; > font-weight: bold; > color: #ffffff; > } > > #localnav a:hover{ > font-weight: bold; > color: red; > } > > .navpics{ > position: relative; > display: block; > margin-top: -20px; > } > > #content{ > float: right; > width: 585px; > background-color: #ffffff; > background-image: url(shading.gif); > background-repeat: repeat-x; > background-position: 0% 0%; > padding: 20px; > } > > #footer { > clear: both; > background-color: #404040; > padding: 3px; > } > > > </style> > </head> > > <body> > <div id="wrapper"> > > > <div id="header"> > <div class="mainlogo"><img src="logo.gif" alt="text" height="55" > width="174" /></div> > > <div id="topnav"> > <ul> > <li><a href="#">Search</a></li> > <li><a href="#">Feedback</a></li> > </ul> > </div> > > > </div> > > > > > <div class="menu"> > Menu here > </div> > > > <div id="localnav"> > <p class="navblock">Navigation</p> > <img class="navpics" src="image.gif" alt="picture"> > <ul> > <li><a href="">Link1</a> </li> > <li><a href="">Link2</a> </li> > <li><a href="">Link3</a> </li> > </ul> > </div> > > <div id="content"> > > > <p>text</p> > > </div> > > <div id="footer"> > Footer text > </div> > > > </div> > </body> > </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
