Mon, 2008-08-18 15:47
Hi
I am having problems with the absolute div named "navigation" in ie 5, 6 and more importantly 7 the main nav shifts to the right of the main content area, not sure how to solve this, and help would be appreciated
<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>39steps</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- --> </style> </head> <!--[if lte IE 7]> <script defer type="text/javascript" src="pngfix.js"></script> <style type="text/css"> .burger { background-image: url(images/blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/clip.png", sizingMethod="scale"); } </style> <![endif]--> <body> <div id="logo"></div> <div id="wrapper"> <div id="navigation"> <ul id="nav"> <li id="nav-home"><a href="#" class="active">Home</a></li> <li id="nav-news"><a href="#">Case studies</a></li> <li id="nav-casestudies"><a href="#">Case studies</a></li> <li id="nav-services"><a href="#">Services</a></li> <li id="nav-team39"><a href="#">Team39</a></li> <li id="nav-profile"><a href="#">Profile</a></li> <li id="nav-contact"><a href="#">Contact</a></li> </ul></div> <!-- start #content --> <div id="content"> <div id="heroimage"><img src="images/hero_home.png" alt="" width="494" height="672" border="0" /></div> <!-- start #section --> <div id="section"> <div class="post"> <div class="story"> <h1>Home</h1> <table id="subnavtable" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="#">Sub nav 01</a></td> <td><a href="#">Sub nav 02</a></td> <td><a href="#">Sub nav 03</a></td> <td><a href="#">Sub nav 04</a></td> </tr> <tr> <td><a href="#">Sub nav 05</a></td> <td><a href="#">Sub nav 06</a></td> <td><a href="#">Sub nav 07</a></td> <td><a href="#">Sub nav 08</a></td> </tr> <tr> <td><a href="#">Sub nav 09</a></td> <td><a href="#">Sub nav 10</a></td> <td><a href="#">Sub nav 11</a></td> <td><a href="#">Sub nav 12</a></td> </tr> </table> <p><img src="images/divider_large.gif" alt="Divider" /></p> <h2>39steps takes a LEEP into the future</h2> <p>Lothian and Edinburgh Environmental Partnership (LEEP) have appointed 39steps to redesign and develop their website.</p> <p>Following a 4 way pitch, 39steps will handle the redesign and development of the new site. The new site will give more information to businesses on just how easy it is to recycle, as well as promoting valuable new services.</p> <p>Tom Kenny, Head of Commercial Operations at LEEP, stated, “With almost 2,000 recycling customers LEEP Recycling engages with a wide cross section of the Edinburgh business community. When we went out to tender, competitive 39steps </p> <!-- COLUMNS END! --> </div> </div> </div> <!-- end #section --> <!-- start #footer --> <div id="footer"> <div id="legal">39steps, 22 Fleshmarket Close, Edinburgh, EH1 1DY <strong>T:</strong> 0131 220 3851<a href="mailto:[email protected]"></a><br/> All content © 39steps 2008 | Registered in Scotland no SC255951 | Registered office as above<br/> <br /> <a href="#">Join our mailing list</a> | <a href="#">Visit our blog</a></div> </div> <!-- end #footer --> <div style="clear: both;"> </div> </div> </div> <!-- end #content --> </body> </html>
body { margin: 0; padding: 0; background: #333333 url(images/background.jpg) repeat-x; font-size: 14px; font-family: Helvetica, Arial, sans-serif; line-height: 16px; color: #ffffff; } h1, h3{ margin: 15px 0px 20px 0px; padding: 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-weight: normal; } h2 { margin: 0px 0px 20px 0px; padding-left: 0px; font-size: 18px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; } h3 { font-size: 14px; font-weight: 200; font-family: Helvetica, Arial, sans-serif; } p, blockquote, ul, ol { margin-top: 0; } a { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ffba00; } a:visited { text-decoration: none; color: #666666; } /*---------------------------------------- WRAPPER -------------------------------------*/ #wrapper { } /*---------------------------------------- HEADER -------------------------------------*/ #header { width: 494px; height: 163px; margin: 0 0; padding: 0px 0px 15px 0px; float: left; } #logo { position:absolute; left:30px; top:86px; width:277px; height:97px; z-index:1; background-image: url(images/logo.png); } /*---------------------------------------- CONTENT -------------------------------------*/ #content { width: 955px; margin: 0 0; } /*---------------------------------------- SECTION -------------------------------------*/ #section { float: right; width: 461px; padding: 0px 0px 0px 0px; background-color: #2a2a2a; height: 462px; margin-top: 170px; } #section .post { padding-bottom: 0px; } #section .story { padding: 30px 25px 30px 25px; } /*---------------------------------------- HERO IMAGE -------------------------------------*/ #heroimage { float: left; width: 494px; height: 672px; } /*---------------------------------------- MENU -------------------------------------*/ #navigation{ position:absolute; left:556px; top:134px; width:398px; height:36px; z-index:2; } ul#nav { position: relative; height: 36px; width: 398px; } ul#nav li { float: left; list-style: none; } ul#nav li a { position: absolute; text-indent: -9999px; text-decoration: none; border: none !important; top: 0; height: 36px; } ul#nav li#nav-home a { left: 0; width: 43px; background: url("images/navigation.jpg") no-repeat; } ul#nav li#nav-news a { left: 43px; width: 45px; background: url("images/navigation.jpg") -43px 0 no-repeat; } ul#nav li#nav-casestudies a { left: 88px; width: 85px; background: url("images/navigation.jpg") -88px 0 no-repeat; } ul#nav li#nav-services a { left: 173px; width: 60px; background: url("images/navigation.jpg") -173px 0 no-repeat; } ul#nav li#nav-team39 a { left: 233px; width: 58px; background: url("images/navigation.jpg") -233px 0 no-repeat; } ul#nav li#nav-profile a { left: 291px; width: 50px; background: url("images/navigation.jpg") -291px 0 no-repeat; } ul#nav li#nav-contact a { left: 341px; width: 57px; background: url("images/navigation.jpg") -341px 0 no-repeat; } ul#nav li#nav-home a:hover { background-position: -0px -36px; } ul#nav li#nav-news a:hover { background-position: -43px -36px; } ul#nav li#nav-casestudies a:hover { background-position: -88px -36px; } ul#nav li#nav-services a:hover { background-position: -173px -36px; } ul#nav li#nav-team39 a:hover { background-position: -233px -36px; } ul#nav li#nav-profile a:hover { background-position: -291px -36px; } ul#nav li#nav-contact a:hover { background-position: -341px -36px; } ul#nav li#nav-home a.active { background-position: -0px -72px; } ul#nav li#nav-news a.active { background-position: -43px -72px; } ul#nav li#nav-casestudies a.active { background-position: -88px -72px; } ul#nav li#nav-services a.active { background-position: -173px -72px; } ul#nav li#nav-team39 a.active { background-position: -233px -72px; } ul#nav li#nav-profile a.active { background-position: -291px -72px; } ul#nav li#nav-contact a.active { background-position: -341px -72px; } /*---------------------------------------- SUB NAVIGATION -------------------------------------*/ #subnavtable{ color:#666666; width:411px; margin:0px 0px 0px 0px; font-size: 12px; } #subnavtable td{ color:#666666; padding:5px 0px 5px 0px; } /*---------------------------------------- FOOTER -------------------------------------*/ #footer { padding: 30px 0 0px 0; float: right; } #footer p { width: 750px; color: #969292; } #footer a { background: none; font-weight: normal; color: #969292; text-decoration: none; } #footer a:hover { text-decoration: none; color: #ffffff; } #legal { width: 461px; margin: 0 0; text-align: right; font-size: 11px; color: #969292; }
