Hi I have a simple html page that displays correctly under firefox-the page consists of: wrap header navigation bar content top panel All are displayed correctly on firefox but in IE 6 the top panel is thicker than it is supposed to be and the navigation buttons are jammed not aligned correctly. the html and css codes are listed below: (Sorry no URL) html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrap"> <div id="header"> <h3> HolidayDeals.Com </h3> <p class='title_right'>Text2</p> </div> <div id = "navigation"> <ul id="tabnav"> <li class="Home"><a href ="home.html">Home</a></li> <li class="Hotels"><a href ="hotels.html">Hotels</a></li> <li class="Flights"><a href ="flights.html">Flights</a></li> <li class="Cruises"><a href ="cruises.html">Cruises</a></li> <li class="Packages"><a href ="packages.html">Packages</a></li> <li class="Packages"><a href ="packages.html">Hot Deals</a></li> <li class="Packages"><a href ="packages.html">Promotions</a></li> </ul> </div> <div id="content"> <div id="toppanel"> </div> </div> </div> CSS code: body, html { margin:0; padding:0; background:white; } body { min-width:750px; } #wrap { background: white; margin:10px auto; width:750px; float: left; } #header { margin: 5px; background: white; float: left; } #header h3 { padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; color: purple; display: inline; font: bold 25px verdana, arial, sans-serif; } .title_right { padding: 10px 10px 10px 10px; margin: 10px 50px 30px 10px; color: purple; display: inline; } #navigation { float: left; border: 2px; } ul#tabnav { list-style-type: none; margin: 0; padding-left: 20px; padding-top: 0; font: bold 11px verdana, arial, sans-serif; } ul#tabnav li { float: left; height: 20px; background-color: #B51032; color: #FFFFFF; margin: 0px 4px 0 2px; } ul#tabnav a:link, ul#tabnav a:visited { display: block; color: FFFFFF; background-color: transparent; text-decoration: none; padding: 4px; } ul#tabnav a:hover { background-color: #F4869C; color: #FFFFFF; } #toppanel { background: #B51032; float: left; width:740px; color: navy; padding: 2px; } #content { background: white; float: right; width:750px; color: navy; Height: 200px; height: 900px; } can you please help sort out the problem in IE 6? Any workaround would be very much appreciated regards
Just a few tips. Replace the H3 with a H1 (semantically speaking, a H1 is a top-level heading, just like an outline). If you want the header text to be associated with the paragraph, keep it in the "header" DIV, but dont' put a class or ID on the heading itself - you can reference it via #header h1 instead. Then for your menu, remove the DIV and just apply your styles to the UL directly. Speaking of styles, it's always a good idea to use the universal selector (it's not a hack) to remove the margins and padding from every element so you can control the positioning of every element on the page. It looks like this: * { margin: 0; padding: 0; } Code (markup): Place this at the very top of your stylesheet. Don't add anything else to the style rule, or else you'll run into more problems than you'll want - especially with form controls. I'll get back to you on the rest later.
Thankx for your reply. I applied your changes but it didnt make a difference in IE. When I remove the navigation bar <div> the menus were misplaced. Any ideas?
If you can wait until I get home, I'll be able to tell you more. As for the menu styles, you need to change the CSS to reflect that the UL with the ID is now the parent, rather than the DIV that it was around.
I've fixed your ploblem replace your css code with code below Your ploblems are 1. you don't set the width of div inside wrapper(header and navigation). 2. at your toppanel div, you need to apply overflow: hidden (IE only) then you can set height of div to whatever you want. Hope this help