Hi, I'm pretty new to CSS and in trying to create a website, I've found that it works fine in IE7 and Firefox, but not in IE6. Specifically, I am having issues with positioning and borders. How can I fix this? The code is below. body{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; background: #eeeeee; } div, img, p, h1, ul, li { padding:0; margin:0; } #header_wrapper{ width:720px; margin:0 auto 0 auto; background:#4474a2; position: relative; display: block; top: 0px; height:inherit; outline:#FFFFFF solid 1px; word-wrap: } #header_wrapper #header{ width:700px; margin:0 auto 0 auto; top: 10px; background:url(banner1.jpg) no-repeat #003c8e; height:135px; position:relative; } #header_wrapper #header ul.navigation { width:600px; display:block; position:absolute; margin: 0 auto; padding: 0; top:95px; left:80px; height:40px; } #main{ background:#FFFFFF; width:700px; margin:0 auto 0 auto; position:relative; top:0px; padding:10px 0 0 0; } #content{ margin: 0 auto; } #footer{ position:relative; top: 20px; left: -10px; padding: 0; background: #4474a2; width:720px; } Code (markup): Thanks for your help.
Sure, I didn't realize it would be that relevant. <?xml version="1.0" encoding="UTF-8"?> <!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> <title>Test</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id = "header_wrapper"> <div id = "header"> <ul class = "navigation"> <li><a href = "./add.html" class ="add" title="Add new">add</a></li> <li><a href = "./search.html" class = "search" title = "Search">search</a></li> <li><a href = "./export.html" class ="export" title="Export">export</a></li> <li><a href = "./index.html" class = "home" title = "Home">home</a></li> </ul> </div> <div id = "main"> <div id = "content"> <h1>Welcome</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sem sem, feugiat id, malesuada nec, porta nec, elit. Mauris malesuada bibendum est. Cras consectetuer. Quisque ante. Maecenas lorem. </p> </div> <div id = "footer"> <p>© rbaga, 2007</p> </div> </div> </div> </body> </html> Code (markup):
Wow well, I took a look an it seems like you're gonna have to start over. I'd suggest you take a look at existing websites and see how they're structured or google some css templates you can use. It shouldn't be too difficult. There's no easy fix for your design, its gonna take a complete overhaul. And my suggestion is to keep IE6 in mind when designing it, have 2 windows open, one in Firefox and one in IE6, and check frequently to make sure there isn't any conflicts. If someone does happen in IE6 that isn't supposed to, then I would suggest you look for a solution in google, I bet you anything its a quick fix if you just spend the time to look at it. Google is your best resource, and remember, you can apply IE only CSS code aswell. Search google for "IE only CSS" and you'll get some results. Otherwise, the best way to learn is to make mistakes, and then learn from them!
Well, it's not as bad as it could be - FIRST, delete the XML prolog from before your doctype - it is optional in XHTML and puts IE into 'quirks mode' where it behaves like IE5 and not like 'rest of world' You REALLY might want to get into the habit of indenting your code in a meaningful manner... it does help... especially to show that your main and footer are inside your header_wrapper, which either means it has the wrong name or is placed incorrectly. Same for the CSS where one property per line makes selecting/deleting single properties easier, much less telling where one property begins and the next ends instead of the piecemeal jumble you have now. Starting out, you might as well bite the bullet and null all margins and padding at the start with the 'universal selector'. The outline property is so new nothing really supports it - I wouldn't use it... and you have no value assigned to word-wrap... which isn't even a CSS property, but it is a value for 'white-space'. (I THINK there's a IE specific property, but not sure.) You REALLY shouldn't be using position:relative to space items, as it doesn't move their 'flow' placement. That is what MARGINS are for. ID's are unique - there's no reason to ever declare #header_wrapper #header Uhm, header should be a header tag - either that or don't waste a div and class when you could style the UL (which is the only content) directly. #header_wrapper is a DIV - div's are inherently display:block, and height:inherit means jack since the body doesn't have a height declared. You don't need to declare any of those widths, the default behavior of a DIV and any other block level element is to expand to fit it's container - margins, padding and borders. That position:absolute on the UL is pointless and just asking for the code to break. I think this is about what you are trying to do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { padding:0; margin:0; } body{ font:normal 100%/140% arial,helvetica,sans-serif; background: #EEE; } #container { width:700px; margin:0 auto; padding:10px; background:#4474A2; border:#FFF solid 1px; } #header{ height:40px; padding-top:95px; background:#003c8e url(banner1.jpg) no-repeat; } #header ul { list-style:none; padding:0 5px; } #header li { display:inline; padding:0 2px; } #header li a { color:#FFF; /* just so we can see them for now */ } #content{ background:#FFF; padding:10px 5px 0; } #content h1 { line-height:140%; } #content p { padding-bottom:10px; } #footer{ background:#4474a2; padding-top:10px; } </style> </head><body> <body> <div id="container"> <div id="header"> <ul> <li><a href="./add.html" class ="add" title="Add new">add</a></li> <li><a href="./search.html" class="search" title="Search">search</a></li> <li><a href="./export.html" class ="export" title="Export">export</a></li> <li><a href="./index.html" class="home" title="Home">home</a></li> </ul> </div> <div id="content"> <h1>Welcome</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sem sem, feugiat id, malesuada nec, porta nec, elit. Mauris malesuada bibendum est. Cras consectetuer. Quisque ante. Maecenas lorem. </p> </div> <div id="footer"> © rbaga, 2007 </div> </div> </body></html> Code (markup): First I nulled all margins and padding on all elements, then set a default font size AND line-height all in one declaration. (ALWAYS declare a line-height, no two browsers default to the same value despite rabid claims to the contrary). for #container I set the overall width minus padding - rather than futzing with margins and positioning we just pad the container to get our nice inner border... then I use border instead of outline since outline doesn't work yet. The header I pad the top the height of your image, (I'm guessing) then set it's internal content height to the menu. That's what I'm assuming you wanted to do there with all that positioning code. No need for classes unless you are going to have other UL's inside the header, so we just hit the UL directly off it's parent's ID... which is fairly mundane - remove the styling, pad it a little bit to get it away from the header edges... I set the LI's to inline so they'd display across the top instead of behind your content (which didn't make a lot of sense to me) - if you want them to center just add text-align:center; to "#header ul" Content is real simple, just set the background color, pad the content inwards to look pretty. #content H1 gets it's line height manually reset - this gives us decent padding around it... and paragraphs we'll set a 10px bottom padding, which will make a nice space between paragraphs AND give us that bottom border we didn't declare on #content Which just leaves the footer. Color and a little padding-top to even out the padding-bottom on #container. That should do it, and work fine in IE 6, 7, FF, Opera and Safari... and if you add text-align:center; to body and text-align:left; to #container, it should work fairly well in IE 5.x as well since we avoided declaring widths for the most part - I THINK it will render 20px narrower in IE 5.x because of the box model difference, but given the age and low use of said browser these days, it's an acceptable 'flaw' since the rest of our content is all set to adjust to #container instead of being explicitly declared. Hope this helps - any questions fire away.