I am having probelm when the menu bar, its coming up twice in internet explorer, but it looks fine, i have screenshots, showing how messed up it looks in ie, and then how it looks in chrome. Google Chrome: Internet Explorer: css: .menu { margin: 0 auto; background-image: url('images/footer.png'); height: 40px; width: 900px; } .nav { height: 20px; margin: 0 auto; width: 900px; padding-top: 10px; } .nav a{ text-decoration: none; color: black; height: 35px; margin: 10px; position: relative; font-weight: bold; } .nav a:hover{ color: white; } html: <div class="menu"><div class="nav"> <a href="index.php">Home</a>· <a href="courses.php">Courses</a>· <a href="fee.php">Fee Structure</a>· <a href="download.php">Download</a>· <a href="reviews.php">Testimonials</a>· <a href="contact.php">Contact Us</a> </div></div>
.menu { margin: 0 auto; background-image: url('images/footer.png'); background-repeat:none; height: 40px; width: 900px; } HTML:
sash, that didnt work, its still the same. and i dont have a doctype, its jsut <html> ??? and i think its ie 9, the latest one!
You're in quirks mode. And by the way, there's one pointless div as well as some unneeded css rules. Imagine the rest of the markup!
Yeah, quirks mode... extra DIV for nothing, run-on with no block-level separators, Much less the non-semantic markup... since a menu is a LIST of choices, which is why the preferred code is a UL. Much less trying to fix the height of the container which is most always the road to failure... and fixing the width probably means there's something awry with the rest of the document and/or the parent container... and not declaring line-height which is inconsistent across browsers... or font-size for that matter... attempting to set padding the same time as height which is bad practice even when not in quirks (and PRECISELY what breaks in quirks)... and those middot are presentation, really don't belong in the markup either. First, get yourself out of quirks mode... then for code, try this on for size: Markup: <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="courses.php">Courses</a></li> <li><a href="fee.php">Fee Structure</a></li> <li><a href="download.php">Download</a></li> <li><a href="reviews.php">Testimonials</a></li> <li><a href="contact.php">Contact Us</a></li> </ul> Code (markup): CSS: #mainMenu { list-style:none; text-align:center; font:bold 14px/16px arial,helvetica,sans-serif; background:#479; box-shadow:inset 0 16px 16px #58B; border-radius:6px; } #mainMenu li { display:inline; } #mainMenu li:before{ content:'\B7\20'; } #mainMenu li:first-child:before { content:''; } #mainMenu a { display:inline-block; padding:8px 4px; text-decoration:none; color:#000; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { color:#BFF; } Code (markup): this assumes a reset like this one: /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } Code (markup): Is in use... if not you'll need to say 'margin:0; padding:0;' on anything that isn't setting margins and paddings. I used generated content for the middots -- IE7/earlier won't see those, OH WELL.. likewise I used CSS3 instead of a background-image, so IE8/eariler doesn't get rounded corners and a gradient -- OH WELL. Also, that black on blue is below accessibility minimums, so I'd try to find a bit better a color combination. I'd also consider losing the px metrics and go for em so it's elastic, particularly on the text.