I know normally we should design for Firefox and adjust for IE, but for some reason my page is working correctly in IE, but not in FF. For example, the top div elements of my page look how they should in IE when the window is at the correct size and also when it is repositioned in any way. But in FF, the top right menu div moves when the window is repositioned/resized. I have tried different settings with the position and nothing seems to work. I just want it to look and operate the way it does in IE. I have validated both CSS and HTML. Please help, thanks in advance! This is for school so for whatever reason, the version of html we are using is transitional. http://www.amandambruce.com/DROH/index.html body{ background: url(images/background_solid.jpg) no-repeat top center;} #contain{ width: 800px; height: 640px; margin-left: auto; margin-right: auto; } #home{ width: 320px; height: 90px; float: left; margin-top: 5px; } #menu{ width: 466px; height: 98px; float: right; margin-top: 5px; } #dog{ width: 491px; height: 257px; margin-top: 19px; margin-left: 22px; float: left; } #community{ float: right; background: url(images/community_spot.jpg) no-repeat; width: 231px; height: 259px; margin-top: 19px; margin-right: 22px; } #arrival{ clear: right; background: url(images/arrivals.png) no-repeat; width: 800px; height: 286px; margin-left: auto; } #content{ background-image: none; background-color: #dce2f0; width: 800px; height: auto; margin-top: 0px; margin-left: 0px; float: left; } .communitytext { font-family: helvetica; font-size: 10pt; color: #000000; padding: 160px 10px 0 15px; /*up, right, bottom, left */ margin: 5px auto 5px 10px; /*up, right, bottom, left */ } .arrivaltext { font-family: helvetica; font-size: 10pt; color: #000000; padding: 105px 10px 0 10px; /*up, right, bottom, left */ margin: 15px 10px 5px 10px; /*up, right, bottom, left */ } .arrivaltext2 { font-family: helvetica; font-size: 10pt; color: #000000; padding: 3px 10px 0 10px; /*up, right, bottom, left */ margin: 15px 10px 5px 10px; /*up, right, bottom, left */ } .contenttext { font-family: helvetica; font-size: 10pt; color: #231f20; padding: 3px 10px 0 10px; /*up, right, bottom, left */ margin: 5px 10px 5px 10px; /*up, right, bottom, left */ } h1{ font-family: helvetica; font-size: 14pt; color: #231f20; text-align: left; padding: 5px 40px 0 30px; /*up, right, bottom, left */ margin: auto auto 5px auto; /*up, right, bottom, left */ } Code (markup): and HTML: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Dachsund Rescue of Houston</title> <meta name="keywords" content="dachshund, dachshunds, rescue dachshunds, miniature dachshund, pet, pet rescue, Houston, Houston dachshund"/> <meta name="description" content="Houston based dachshund rescue organization that provides resources for foster homes and permanent rescue homes for dachshunds"/> <link rel="stylesheet" href="droh.css" type="text/css"/> </head> <body> <div id="contain"> <div id="home"> <a href="index.html"><img src="images/home.png" alt="Home" title="Home" border="0"/></a></div> <div id="menu"> <a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a> <a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a> <a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a> <a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a> <a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a> </div> <div id="dog"> <img src="images/jumping.jpg" alt="" title="" border="0" /> </div> <div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of 'em - without having to keep 100 dogs at your house. MORE...</p></div> <div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with him. </p> </div> </div> </body> </html> Code (markup):
Firefox is performing correctly. You have the margins set to auto and they are properly adjusting as the window is resized. I don't have IE handy but if IE is not doing this then, as usual, it's wrong. In addition, your image is referenced to the body but the navigation is not. More info in a bit.
The easiest solution is to just move the background image to #contain and that solves the problem, I believe.