Hi, I have found a web template I would like to use but the problem is that FireFox views it fine and IE does not. Here is a screenshot of FireFox: http://i186.photobucket.com/albums/x211/lord_garriston/FF.jpg and here is a screenshot of what happens in IE: http://i186.photobucket.com/albums/x211/lord_garriston/IE.jpg Obviously I want it to look the way it does in FireFox in all other browsers. Here is the original code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>THREE COLUMN WEBSITE TEMPLATE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Navigation --> <div id="navigation"> <ul> <li><a href="http://www.getcsstemplates.com" title="Free CSS Templates">Free CSS Templates</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> <li><a href="#">Link Five</a></li> <li><a href="#">Link Six</a></li> <li><a href="#">Link Seven</a></li> </ul> </div> <!-- End Navigation --> <!-- Begin Left Column --> <div id="leftcolumn"> <div class="logo"> <h1 id="lineone">Free <span>CSS</span> Template</h1> <h2 id="linetwo">provided by: <a href="http://www.getcsstemplates.com">Get Free CSS Templates</a></h2> </div> <h3>More Links</h3> <ul> <li><a href="http://www.getcsstemplates.com" title="Free CSS Templates">Free Website Templates</a></li> <li><a href="#" title="#">Link Two</a></li> <li><a href="#" title="#">Link Three</a></li> <li><a href="#" title="#">Link Four</a></li> <li><a href="#" title="#">Link Five</a></li> <li><a href="#" title="#">Link Six</a></li> </ul> <h2>Lorem ipsum dolor sit</h2> <img src="images/img2.gif" class="floatTR" alt="Image" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing ...<br/> <a href="#">read more</a></p> </div> <!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> <div id="boxes"> <h1>Lorem Ipsum Dolor Sit Amet</h1> <div id="box1"> <h2>Lorem ipsum </h2><img src="images/img1.jpg" class="floatTL" alt="Image" /><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Donec rutrum neque eu nisl. Morbi eget felis. </h3><p class="box"><a href="#">Read more</a></p></div> <div id="box3"> <h2>Lorem ipsum </h2><img src="images/img1.jpg" class="floatTL" alt="Image" /><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Donec rutrum neque eu nisl. Morbi eget felis. </h3><p class="box"><a href="#">Read more</a></p></div> <div id="box2"> <h2>Lorem ipsum </h2><img src="images/img1.jpg" class="floatTL" alt="Image" /><h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Donec rutrum neque eu nisl. Morbi eget felis. </h3><p class="box"><a href="#">Read more</a></p></div> <br/> <hr/> <h1>Lorem Ipsum Dolor Sit Amet</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p> </div> <div class="onemorebox"> <h2>Lorem ipsum dolor sit</h2> <img src="images/img1.jpg" class="floatTL" alt="Image" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus...<br/> <a href="#">read more</a></p> <br/> <h2>Lorem ipsum dolor sit</h2> <img src="images/img1.jpg" class="floatTL" alt="Image" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus...<br/> <a href="#">read more</a></p> </div> </div> <!-- End Content Column --> <!-- Begin Right Column --> <div id="rightcolumn"> <h2>Sponsored Links</h2> <div class="ads"> <h4>Ads by Whooooever</h4> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <h3>Lorem ipsum dolor</h3> <p>Lorem ipsum dolor sit amet conesctetuer.</p> <a href="#">www.somewebsite.com</a> <br /> <br /> <h4>Avertise on this site</h4> </div> </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> <p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> Copyright © 2007 by Free CSS Template :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts"><em>GET FREE CSS TEMPLATES</em></a> </p> </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html> <div style="text-align: center; margin-top: 1.0em;"> Service provided by <a href="http://www.freewebtemplates.com">FreeWebTemplates.com</a><br> Get free web design, web templates, web layouts, url redirection, contact forms, guestbooks, and other website tools and resources! </div> Code (markup): I did some Google searching and found that it's probably something to do with Float and after playing around with the code, I was able to get it to work in IE but then of course FireFox had it all over the page. I do know HTML but unfortunately not much about CSS although I will definitely be studying up more on it after this. Any help would be much appreciated. Thanks so much!
Sorry for the double post, the system would not allow me to edit my post above, here is the CSS code: * { padding : 0; margin : 0; } body { font-family : Arial, Helvetica, sans-serif; font-size : 13px; } img { padding : 5px; border : 1px solid #caff7a; } img.floatTL { float : left; margin-right : 10px; margin-bottom : 5px; margin-top : 5px; margin-left : 10px; } img.floatTR { float : right; margin-left : 7px; margin-bottom : 0; margin-top : -2px; margin-right : 10px; } #wrapper { margin : 0 auto; width : 922px; } #navigation { float : left; width : 920px; height : 36px; color : #333; margin : 0 0 0 0; } #navigation { background-color : #88cc33; border : 1px solid #004ab2; } #navigation ul { font-family : Arial, Helvetica, sans-serif; font-weight : bold; color : #0066ff; text-align : right; margin : 0; padding-bottom : 5px; padding-top : 10px; padding-left : 0; } #navigation ul li { display : inline; } #navigation ul li a { padding : 5px 10px 5px 10px; color : #004ab2; text-decoration : none; border-right : 1px solid #004ab2; margin-right : -1px; } #navigation ul li a:hover { color : #fffffe; } #leftcolumn { color : #333; margin : -37px 0 0 0; height : 700px; width : 220px; float : left; background-image : url(images/lefttopbg.jpg); background-repeat : no-repeat; background-color : #6699cc; } #leftcolumn img { border : 0; padding-top : 20px; } .logo { height : 200px; } .logo h1#lineone { font-size : 2em; font-weight : lighter; font-family : helvetica, arial, sans-serif; padding-top : 130px; padding-left : 5px; color : #ff8811; border : none; top : 0; left : 14px; letter-spacing : -1px; } .logo h1#lineone span { color : #8dcb32; } .logo h2#linetwo { padding-left : 5px; font-size : 0.9em; font-family : helvetica, arial, sans-serif; text-transform : none; top : 25px; left : 14px; color : #8dcb32; } .logo h2#linetwo a { color : #8dcb32; text-decoration : none; } #leftcolumn ul { background-color : #1b66bc; padding : 0 0 15px 0; border-bottom : 2px solid #dd6600; } #leftcolumn li { line-height : 18px; background : #1b66bc; list-style : square; padding-left : 0; padding-top : 10px; margin-left : 21px; color : #fa890b; } ul a { font-size : 1em; font-weight : bolder; color : #fa890b; text-decoration : none; } #leftcolumn p { text-align : justify; padding-top : 10px; color : #caff7a; padding-left : 5px; } #leftcolumn h2 { font-size : 1.2em; color : #dd6600; padding-top : 10px; padding-left : 10px; } #leftcolumn a { color : #fa890b; } #leftcolumn h3 { background : #1b66bc; font-size : 1.2em; color : #dd6600; padding-top : 10px; padding-left : 10px; border-top : 2px solid; } #content { float : left; color : #333; margin : 0 0 0 0; min-height : 450px; width : 472px; display : inline; padding-top : 10px; padding-bottom : 10px; padding-left : 5px; padding-right : 5px; } #boxes { height : 400px; margin-top : 20px; background-color : #f1f1f3; } #box1 { background : #fff; width : 140px; height : 235px; float : left; margin : 0 2px; text-align : left; padding : 1px; margin-top : 10px; margin-left : 10px; } #box2 { background : #fff; width : 140px; height : 235px; margin : 0 auto; text-align : left; padding : 1px; margin-top : 10px; } #box3 { background : #fff; width : 140px; height : 235px; float : right; margin : 0 2px; text-align : left; padding : 1px; margin-top : 10px; margin-right : 10px; } #boxes h1 { font-size : 1.6em; font-weight : lighter; color : #903142; padding-top : 10px; padding-left : 10px; } #box1 h2, #box2 h2, #box3 h2 { margin-left : 10px; font-size : 1.5em; color : #df7111; font-weight : lighter; } #box1 h3, #box2 h3, #box3 h3 { margin-left : 10px; font-size : 1em; color : #070707; font-weight : lighter; } #boxes p { padding-left : 10px; padding-right : 10px; } .onemorebox { padding-top : 5px; padding-bottom : 15px; } .onemorebox h2 { font-size : 1.6em; color : #7e9dc8; padding-top : 10px; margin-left : 10px; font-weight : lighter; } .onemorebox p { margin-right : 10px; text-align : justify; } #rightcolumn { color : #333; margin : 0 0 0 0; padding : 10px; height : 643px; width : 200px; float : left; background-color : #ffffdd; } #rightcolumn h2 { font-size : 1.6em; color : #7e9dc8; margin-left : 20px; font-weight : lighter; } .ads p { font-family : verdana; font-size : 0.9em; padding-left : 5px; padding-bottom : 5px; margin-right : 10px; text-align : justify; padding-right : 10px; } .ads { border : 1px solid #86c216; width : 160px; height : 600px; margin-left : 20px; margin-top : 10px; } .ads h4 { background-color : #86c216; color : #fff; font-weight : lighter; font-size : 0.8em; padding-bottom : 3px; text-decoration : underline; } .ads h3 { font-family : verdana; font-size : 1em; padding-top : 22px; padding-left : 3px; padding-bottom : 5px; color : #86c213; text-decoration : underline; } .ads a { margin-right : 25px; margin-bottom : 2px; color : #dd6601; font-size : 0.8em; font-weight : bold; padding-left : 3px; text-decoration : none; padding-bottom : 15px; } #footer { width : 920px; clear : both; color : #333; text-align : center; background : #86c216; display : inline; float : left; padding-top : 5px; padding-bottom : 5px; } #footer p { font-size : 0.8em; color : #eeeeee; } #footer a { color : #dd6601; } Code (markup):
Well, it LOOKS like the traditional IE double margin error, but could also be a content rounding error or someone not doing their math right. (common issue on fixed width layouts)... looking at the code there's a lot of 'surplus' with things like that DIV wrapping the topmenu, and all the improper use of header tags makes it a confusing scramble... One BIG error stands out right off though - HTML AFTER </body></html> - that's ALWAYS bad. The lack of 'proper' formatting, being more "let's slap tabs in there willy-nilly" makes debugging it a nightmare though. The CSS - I'm seeing redundant properties, properties that should be condensed, properties declared for no reason... There's a touch of classitus to it as well. Tell you what - if I have time during lunch tomorrow, I'll bop out a somewhat cleaner version of that template for you.
Yeah, I did play around with the code for awhile and I cleaned up all the HTML "extra" that they put in there I figured I should send the entire unedited version in case there was someone here that could help. I just don't know about the CSS, it's something I've been needing to learn for awhile now and now I have a good reason to learn it. Any help you could give me on the CSS would be appreciated, thanks