lucy Posted August 12, 2009 Share Posted August 12, 2009 I have created a header div and also a container div. I can not get them to vertically lineup in FF, i.e. they are vertically alligned but the top of the container div is not flush with the bottom of the header div. HTML code: <body> <!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>Un-named</title> <link rel="stylesheet" type="text/css" href="../layout.css" /> <link rel="stylesheet" type="text/css" href="../tabmenu.css" /> <link rel="stylesheet" type="text/css" href="../mainmenu.css" /> </head> <div id="header_container"> <ul class="tabmenu"> <li class="residential"><a href="" class="selected" title="residential"><span class="displace">Residential</span></a></li> <li class="commercial"><a href="../commercial/about.html" title="commercial"><span class="displace">Commercial</span></a></li> </ul> <ul class="mainmenu"> <li class="about"><a href="about.html" title="about"><span class="displace">About</span></a></li> <li class="survey"><a href="survey.html" title="survey"><span class="displace">Survey</span></a></li> <li class="order"><a href="order.html" title="order"><span class="displace">Order</span></a></li> <li class="track"><a href="" class="selected" title="track"><span class="displace">Track</span></a></li> <li class="contact"><a href="contact.html" title="contact"><span class="displace">Contact</span></a></li> <li class="faq"><a href="faq.html" title="faq"><span class="displace">FAQ</span></a></li> </ul> </div> <div id="content"><h1>Residential track </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor lobortis odio, at tincidunt nulla sagittis et. Donec gravida nulla sit amet purus faucibus elementum. Duis ac urna at arcu convallis dignissim at in nibh. Aliquam a molestie mi. Ut accumsan, felis vel vestibulum elementum, leo urna feugiat eros, at tincidunt lacus est eget eros. Aliquam eu nisi ultricies enim pretium interdum. Vivamus neque nulla, tempor eu bibendum eget, faucibus id dolor. Praesent venenatis enim quis neque laoreet sed sollicitudin risus pharetra. Nullam vitae mi ligula, sed porttitor lorem. Quisque mi enim, fermentum nec varius dapibus, mattis in libero. Cras volutpat velit eu libero cursus nec hendrerit urna facilisis. </p></div> <div id="footer_container">FOOTER</div> </body> </html> </body> CSS code for LAYOUT.CSS: /*Page styles*/ body { background-color:#e4e4e4; padding-left:5px; padding-right:5px; max-width:980px; margin-left:auto; margin-right:auto; } /*Header styles */ #header_container { height:200px; margin-left:auto; margin-right:auto; background-image:url(images/banner.jpg); background-repeat:no-repeat; } #header_container p { text-indent:60px; font-size:20px; } /*Main content styles */ #content { max-width:978px; top:auto; left:auto; right:auto; background-color:#FF0; margin-left:auto; margin-right:auto; } #footer_container { text-align:center; height:50px; margin-left:auto; margin-right:auto; background-color:#F00; } #footer_container ul li { margin-left:0px; padding-right:20px; padding-left:20px; display:inline; font-size:11px; } Any help would be appreciated. Thanks, Lucy Quote Link to comment Share on other sites More sharing options...
haku Posted August 12, 2009 Share Posted August 12, 2009 Your tags are all messed up. You need to fix that first. Your document should look like this: <doctype> <html> <head> // head stuff </head> <body> // body stuff </body> </html> Start with that, and see if it doesn't fix your problem. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.