Hey There, I was assigned the job of putting the site together and I built it while looking back and forth in Firefox, and now that I'm done, I checked it in Internet Explorer and of course it has issues. Here is how it is supposed to look (Firefox): and here are the errors in Internet Explorer: There is something going on that is pushing the end of the navigation bar (the star image) down a row, and also, down near the footer, the background image is being pushed down about 3 pixels. Here is the html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>321: Global Branding</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="321: Global Branding" /> <style type="text/css" media="all">@import "css/about.css";</style> </head> <body class="about"> <div id="page-container"> <div id="logo"> <a href="index.html"><img src="images/headers/logo2.jpg" alt="321TakeOff" /></a> </div> <div id="main-nav"> <div align="right"><img src="images/nav/brandlaunch.gif" alt="Brand Launch" /><br /><br /> <dl> <dt id="about"><a href="about.html"></a></dt> <dt id="brandslam"><a href="brandslam.html"></a></dt> <dt id="ourwork"><a href="ourwork.html"></a></dt> <dt id="capabilities"><a href="capabilities.html"></a></dt> <dt id="connect"><a href="connect.html"></a></dt> </dl> <div align="left"><img src="images/nav/star.gif" alt="star" /></div> <img src="images/nav/orangeline1.gif" alt="orangeline" /></div> </div> <div id="leftmenu"> <a href="why.html">WHY CHOOSE 321</a><br /><br /> <a href="testimonials.html">TESTIMONIALS</a><br /><br /> <a href="team.html">EXECUTIVE TEAM</a><br /><br /> </div> <div id="image"> <img src="images/image/authentic.jpg" alt="transact" /> </div> <div id="content-top"> ABOUT 321 </div> <div id="content-bot"> <p>Authentic is having honest conversations with your customers. Authentic is being faithful to your history. Authenticity is essential to motivating employees, captivating customers and differentiating your brand from the competition. We are uniquely positioned to uncover brands' distinct identity because we aren’t afraid to explore the unknown, the whatif’s.</p> <p>321 bridges that gap with a perfect blend of big agency experience and the agility, quality, and precision of a boutique shop.</p> </div> <div id="footer"> <b>{ <a href="why.html">See why clients choose 321</a> }<img src="images/footer/22.gif"></b> </div> </div> </body> </html> Code (markup): And here is the CSS: html, body { margin: 0; padding: 0; } img { border:0px; } body { font-family: Arial; font-size: 10px; } #page-container { width: 800px; background: white; } #logo { background: white; padding-left: 43px; padding-top: 7px; float: left; height: 123px; width: 199px; } /* Main Navigation */ #main-nav { height: 114px; width: 519px; line-height: 9px; padding-top: 20px; float: left; background: white; } #main-nav dl { margin: 0; padding: 0; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 21px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav dt { float: left; } #main-nav dt a { display: block; height: 0px !important; height /**/:64px; /* IE 5/Win hack */ padding: 64px 0 0 0; overflow: hidden; background-repeat: no-repeat; }#main-nav dt a:hover { background-position: 0 -64px; } #main-nav dt#about, #main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); } #main-nav dt#brandslam, #main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); } #main-nav dt#ourwork, #main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); } #main-nav dt#capabilities, #main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); } #main-nav dt#connect, #main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); } body.about dt#about, body.about dt#about a, body.brandslam dt#brandslam, body.brandslam dt#brandslam a, body.ourwork dt#ourwork, body.ourwork dt#ourwork a, body.capabilities dt#capabilities, body.capabilities dt#capabilities a, body.connect dt#connect, body.connect dt#connect a { background-position: 0 -128px; } #leftmenu { float: left; width: 106px; height: 256px; padding-left: 17px; padding-top: 10px; background: white; background-image: url(../images/leftmenu/bg1.gif); background-repeat: no-repeat; } #leftmenu a { color: #57768C; text-decoration: none; } #leftmenu a:hover { color: #57768C; text-decoration: none; } #image { float: left; width: 274px; height:204px; background: white; } #content-top { float: left; width: 370px; height: 20px; padding-left: 14px; padding-top: 10px; background: white; background-image: url(../images/content/topbg1.gif); background-repeat: no-repeat; } #content-bot { float: left; width: 370px; height: 164px; padding-left: 14px; padding-top: 10px; background: white; background-image: url(../images/content/botbg1.gif); background-repeat: no-repeat; overflow: auto; } #footer { float: left; width: 658px; height: 78px; background-image: url(../images/footer/bigbottom.gif); background-repeat: no-repeat; text-align: right; padding-top: 10px; text-decoration: none; } #footer a { color: #FF3000; text-decoration: none; } #footer a:hover { color: #FF3000; text-decoration: none; } Code (markup): Any help would be greatly appreciated! Also, how do I add some padding to the right of the content div? I tried doing padding-right and it made the whole div go down a line. Also, anyone know how to make custom sidebars using images? thats up next.
It's possible that your page is displaying incorrectly because of IE's "3 pixel jog" problem. Check out google for some more information. And what did you mean about custom sidebars?
hey Gordaen, thanks for the heads up, I did a little reading, found this site: hxxp://www.positioniseverything.net/explorer/threepxtest.html but I don't really know how to implement it into my site, a bit confusing. Here is a shot from IE with some colored backgrounds, and I managed to get the star on the same row but there is a 3 pixel gap in between the last navigation button and the star now. and here is the current css: html, body { margin: 0; padding: 0; } img { border:0px; } body { font-family: Arial; font-size: 10px; } #page-container { width: 800px; background: green; display: block; } #logo { background: blue; padding-left: 43px; padding-top: 7px; float: left; height: 123px; width: 156px; display: block; } /* Main Navigation */ #main-nav { height: 114px; width: 521px; line-height: 9px; padding-top: 20px; float: left; background: pink; display: block; } #main-nav dl { margin: 0; padding: 0; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 21px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav dt { float: left; display: block } #main-nav dt a { display: block; height: 0px !important; height /**/:64px; /* IE 5/Win hack */ padding: 64px 0 0 0; overflow: hidden; background-repeat: no-repeat; }#main-nav dt a:hover { background-position: 0 -64px; display: block } #main-nav dt#about, #main-nav dt#about a { width: 94px; background-image: url(../images/nav/about.gif); } #main-nav dt#brandslam, #main-nav dt#brandslam a { width: 95px; background-image: url(../images/nav/brandslam.gif); } #main-nav dt#ourwork, #main-nav dt#ourwork a { width: 80px; background-image: url(../images/nav/ourwork.gif); } #main-nav dt#capabilities, #main-nav dt#capabilities a { width: 95px; background-image: url(../images/nav/capabilities.gif); } #main-nav dt#connect, #main-nav dt#connect a { width: 80px; background-image: url(../images/nav/connect.gif); } body.about dt#about, body.about dt#about a, body.brandslam dt#brandslam, body.brandslam dt#brandslam a, body.ourwork dt#ourwork, body.ourwork dt#ourwork a, body.capabilities dt#capabilities, body.capabilities dt#capabilities a, body.connect dt#connect, body.connect dt#connect a { background-position: 0 -128px; } #leftmenu { float: left; width: 106px; height: 256px; padding-left: 17px; padding-top: 10px; background: white; background-image: url(../images/leftmenu/bg1.gif); background-repeat: no-repeat; display: block } #leftmenu a { color: #57768C; text-decoration: none; } #leftmenu a:hover { color: #57768C; text-decoration: none; } #image { float: left; width: 274px; height: 1%; background: red; display: block } #content-top { float: left; width: 370px; height: 20px; padding-left: 14px; padding-top: 10px; background: white; background-image: url(../images/content/topbg1.gif); background-repeat: no-repeat; display: block } #content-bot { float: left; width: 370px; height: 164px; padding-left: 14px; padding-top: 10px; background: white; background-image: url(../images/content/botbg1.gif); background-repeat: no-repeat; overflow: auto; display: block } #footer { float: left; width: 658px; height: 78px; background-image: url(../images/footer/bigbottom.gif); background-repeat: no-repeat; text-align: right; padding-top: 10px; display: block text-decoration: none; } #footer a { color: #FF3000; text-decoration: none; } #footer a:hover { color: #FF3000; text-decoration: none; } Code (markup):
in your Nav Container - add that star as a background image and align it right center; then you have like 100+ pixels to fudge with.