img522.imageshack.us/g/firefoxg.png/ ^^These are images of the problem. My css design works well in Opera, but has troubles rendering in Firefox and Internet Explorer. I have asked other people, and they usually say that I should use divs instead of frames, but I am already doing that. I validated the HTML and CSS using the W3C validator, and there are no problems. I just need to know which bit of my code is the problem, I could fix it myself once I know a bit about what I am doing wrong. freetexthost.com/idu5g0ihtw ^^HTML Code freetexthost.com/dz2a3cv5kd"]Link to CSS Code ^CSS Code
First part of your problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Code (markup): That's called an incomplete doctype, and IE will still go into quirks mode with it. Copy-paste the full, correct HTML4.01 Strict doctype from here: http://www.w3.org/QA/2002/04/valid-dtd-list.html You want strict instead of transitional anyway, so the validator can yell at you when you use deprecated tags that should have died last millenium. Unless you didn't copy everything exactly, you haven't finished your page (where are the closing </body> and </html> tags?). As for your layout problems (AFTER fixing the doctype, since Quirks Mode will make your page look different compared to Standards Mode), you are absolutely positioning the #header. I can't really see any reason why. You may not be aware of what all happens with that: no other elements on the page can see #header because once someone is abso-po'd, they are out of the document flow (you may want to look "document flow css" up in Google if you haven't heard that before, because if you're going to use positioning you'll need to be aware of it!) so the #tabs box coming afterwards does not get pushed down by anything alone. Height 18% may also be confusing for the browser. It may wonder, 18% of what? and may not calculate that correctly. If the box weren't absolutely positioned, height:18% would get converted to height: auto. You are not using frames, correct, and you seem to have a decent start with HTML/CSS... just always start with a Good Doctype before doing anything else, and continue validating like you have been (remember, the validator can only say what is against the rules, but lots of bad code can still be valid... the validator won't say "that's a stupid way to do it!" but still, good to make sure you don't have typos or missing closing tags before hunting bugs!).
Yeah, as the stupid kitty pointed out, you've got a bunch of unneccessary stuff. There is NOTHING in that layout so far that should warrant the use of absolute positioning, you're declaring heights in invalid methods, and you even have an excess of markup for no good reason. The use of strict will also stop you from using deprecated attributes - not just tags; See 'align' which has no place in modern markup. Really, for what I'm seeing for appearance in your jpegs, there's little reason for that to be more than: <!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" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title> JC's Template </title> </head><body> <h1>Welcome</h1> <ul id="mainMenu"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Articles</span></a></li> <li><a href="#"><span>Links</span></a></li> </ul> <div id="content"> <p>Some test Content</p> <p>Some test Content</p> <p>Some test Content</p> <!-- #content --></div> <div id="footer"> Theme © JC Leyba 2010 <!-- #footer --></div> </body></html> Code (markup): Everything else you were doing belongs in that external stylesheet - Those images you are putting in the markup were presentational - as such they don't belong in the markup - pad the bottom of #mainMenu and apply it there as a background. You should also try adding some FORMATTING to your markup - it stops your from making a lot of mistakes in the first place.