I have a site that I am doing and it works great in IE, but when I view it in Firefox, none of my divs line up correctly. Can someone look at this and tell me what they think will fix it. I thought it could be the z-index, so I removed all of those and then I thought maybe the HXW attributes, but now I am stumped. html,body,div,p,ul,ol,li,h1,h2,h3,h4,h5,pre,form,p,button,img { margin: 0 auto; padding: 0; border: 0; } ul,li { list-style-type: none; } a {outline: none;} button span,a span,li span {display: none;} table,tr,td { border: 0; border-collapse: collapse; vertical-align: top; } body{padding-top:5px;background: #FFF; font: 30% Arial,sans-serif; background-image: url("images/world_map1a.png"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; margin:0 auto; margin-left:auto; margin-right:auto; text-align:left; } body.lineht {line-height:50%} h4 { width: 250px; height: 34px; } h4.topics {background: url(images/topics_head.png) 0 0 no-repeat; border:0;; width:250px;} h4.ccorner {background: url(images/ccorner_head.png) 0 0 no-repeat; border:0;} h4.content {background: url(images/content_events.png) 0 0 no-repeat; border:0; width:550;} h4 span {display: none;} h5 { font-size: 9px; color: #a57c4a; margin: 0 17px 0 17px; padding: 6px 0 0 0; } img.head {position: absolute; top:50px} img#head { position:relative; top:5px; width:800px; height:100px; margin:0 auto;} table.col {border-collapse:collapse; table-layout: auto} /* Minitabs Text Navbar courtesy of Dynamic Drive */ ul#minitabs{list-style: none;margin: 0;padding: 7px 0; border-bottom: 1px solid #FFF;font-weight: bold; text-align: center;white-space: nowrap; font-size: 12px} ul#minitabs li{display: inline;margin: 0 2px} ul#minitabs a{text-decoration: none;padding: 0 0 3px; border-bottom: 4px solid #rgb(192,192,192);color: #999} ul#minitabs a#current{border-color: rgb(128,0,0);color: #06F} ul#minitabs a:hover{border-color: rgb(128,0,0);color: #06F} hr#thin {size:0} /* Clearing div ---------------------------------- */ div.clear { position: relative; clear: both; line-height: 1px; font-size: 1px; float:right; } /* Transparent Aircraft images ---------------------- */ div.transbox { width: 150px; height: 100px; margin: 10px 10px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=10); /* CSS3 standard */ opacity:0.6; /* for Mozilla */ -moz-opacity:0.1; } div.transbox p { margin: 15px 10px; font-weight: bold; color: #000000; } /* Left-hand column Divs ---------------------------- */ #LHC { width: 250px; position: relative; top: 10px; left: 25px; text-align:left; } #LHC .section { background: url(images/sidebar_back.png) 0 0 repeat-y; } #LHC .section_top { background: url(images/sidebar_head.png) 0 0 no-repeat; height:34px; font-size: 10px; line-height: 12px; } #LHC .section_bottom { background: url(images/sidebar_bottom.png) 0 0 no-repeat; margin: 0 0 0px 0; height: 22px; } #LHC p { font-size: 10px; line-height: 12px; margin: 10px 17px 0px 17px; } #LHC p.top { font-size: 10px; line-height: 10px; margin: 0 17px 0 17px; padding: 4px 0 0 0; } #LHC p span {color: #ae8f58;} #LHC p a, #LHC p a:visited { color: #bc6125; background: none; border-bottom: 1px dotted #df996b; } #LHC p a:hover { color: #5d2a08; background: none; } /* Content Divs ------------------------- */ #CONTENT { width: 530px; position: absolute; top: 30px; right: 0px; font-size: 10px; line-height: 10px; margin: 0px 0px 0px 0px; } #CONTENT .section { background: url(images/content_body.png) 0 0 repeat-y; } #CONTENT .section_top { background: url(images/content_top.png) 0 0 no-repeat; height:40px; font-size: 10px; line-height: 10px; } #CONTENT .section_bottom { background: url(images/content_bottom.png) 0 0 no-repeat; margin: 0 0 0px 0; height: 31px; right: 200; } #CONTENT p { font-size: 10px; line-height: 10px; margin: 5px 5px 0px 5px; } #CONTENT p.top { font-size: 10px; line-height: 10px; margin: 0 17px 0 17px; padding: 4px 0 0 0; } #CONTENT p span {color: #ae8f58;} #CONTENT p a, #CONTENT p a:visited { color: #bc6125; background: none; border-bottom: 1px dotted #df996b; } #CONTENT p a:hover { color: #5d2a08; background: none; } /* Aircraft Section -------------------------------- */ #ACFT { width: 540px; position: absolute; top:420px; right:0px; font-size: 10px; line-height: 12px; margin: 10px 11px 0px 17px; } #ACFT .section { background: url(images/content_body.png) 0 0 repeat-y; } #ACFT .section_top { background: url(images/content_top.png) 0 0 no-repeat; height:39px; font-size: 10px; line-height: 10px; } #ACFT .section_bottom { background: url(images/content_bottom.png) 0 0 no-repeat; margin: 0 0 0 0; height: 31px; right: 200; } #ACFT p { font-size: 10px; line-height: 10px; margin: 5px 15px 0px 5px; text-align:left; } #ACFT p.top { font-size: 10px; line-height: 10px; margin: 0 17px 0 17px; padding: 4px 0 0 0; } #ACFT p span {color: #ae8f58;} #ACFT p a, #ACFT p a:visited { color: #bc6125; background: none; border-bottom: 1px dotted #df996b; } #ACFT p a:hover { color: #5d2a08; background: none; } /* Placemarker */ #LAYOUT { width: 900px; position: relative; top:0px; margin:0 auto; text-align: left; } #LAYOUT .body { background: url(images/main_body.png) 0 0 repeat-y; text-align: left; } #LAYOUT .top { background: url(images/main_top.png) 0 0 no-repeat; height:21px; font-size: 10px; line-height: 12px; } #LAYOUT .bottom { background: url(images/main_bottom.png) 0 0 no-repeat; margin: 0px 0px 0px 0px; height: 22px; } #CONTAINER { width:900px; position: relative; top:0px; text-align:left; } #FOOTER { width:900px; position: fixed; bottom: 10px; text-align:left; } #FOOTER .body { background: url(images/main_body.png) 0 0 repeat-y; } #FOOTER .top { background: url(images/main_top.png) 0 0 no-repeat; height:21px; font-size: 10px; line-height: 12px; } #FOOTER .bottom { background: url(images/main_bottom.png) 0 0 no-repeat; margin: 0px 0px 0px 0px; height: 22px; } #GALLERY { position:relative; top: 10px; left:10px; width:900px; padding: 10px 0px 10px 10px; text-align:center; } #OPEN { position:relative; width: 450px; top:0; left:0; margin: 0 0 0 0; padding:5px 5px; } #OPEN .top { background: url(images/open_top.png) 0 0 no-repeat; width: 450px; height: 13px; } #OPEN .section { background: url(images/open_body.png) 0 0 repeat-y; width:450px; text-align: center; } #OPEN .bottom { background: url(images/open_bottom.png) 0 0 no-repeat; height: 14px; width:450px; } #OPEN p { text-align: center; font-size: 12px; line-height: 12px; margin: 0px 17px 0px 17px; font-family: arial, tahoma, default; } #OPEN p.em { font-size: 14px; font-weight: bold; } #OPEN p.base { text-align: right; } Code (markup): Any help will be greatly appreciated. Mahalo!
Somewhere you have bad CSS... you'll just have to find it. I can't do anything without seeing the problem and seeing the HTML.
The problem is that you coded for a specific browser, and the worst (IE) at that. Start the whole thing over and avoid absolute positioning like you did with your content division. This time, unless you have time to read the html/css specs, code to a browser that supports them the most (Opera 9, Firefox 2, Safari 3).
CSS train wreck. margin: 0 auto; - on EVERYTHING? Bad idea. on Body: margin:0 auto; margin-left:auto; margin-right:auto; redundant to the first declaration AND to itself. font: 30% Arial,sans-serif; Sweet heyzeus - WHY?!? 30% is so small as to be useless. No wonder everything else looks to be declared in PX. body.lineht {line-height:50%} Do I even want to KNOW?!? clearing DIV - probably not even NEEDED. #content - position:absolute - /FAIL/FAIL/FAIL/ As mentioned though, we really can't help too much without the HTML, preferably a link to a copy of this live - though I have the feeling this is a DEFINATE chuck it and start over.