website layout is working fine with firefox, opera and netscape but has problems in IE. plz look at the code below. site is being designed with dreamweaver. where is the problem? can anyone help? thnx <!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>Untitled Document</title> <style type="text/css" media="screen"> body{ background-color:#EBEBEB; margin-bottom:0em; margin-left:2em; margin-right:2em; margin-top:0em; color:#FFFFFF; padding-bottom:0em; padding-left:2em; padding-right:2em; padding-top:0em; } #header{border:none; font-family:Haettenschweiler; margin-bottom:0; margin-left:2em; margin-right:0.5em; margin-top:0; } .logo{font-family:Haettenschweiler; font-size:4em; font-weight:bold; color:#CC3300; font-style:italic; width:6em; text-align:center; display:inline-block;} .logobottom{ font-family:Haettenschweiler; font-style:italic; font-weight:bold; color:#999999; font-size:1.2em; text-align:center; position:absolute; top:105px; left:301px; } #navigation{ text-align:center; margin-top:1em; font-size:1.4em; } a{ color:#999999; text-decoration:none;} a:hover{color:#666666; text-decoration:none;} #main{background-image:url(images/bgrd_seashell.jpg); color:#999999; font-family:Arial, Helvetica, sans-serif; margin-bottom:0; margin-left:2.6em; margin-right:2.6em; margin-top:1em; font-size:0.8em; } #links{ font-size:1.4em; border-right:solid; margin-right:35em; border-right-color:#666666; border-right-width:thin; } </style> </head> <body> <div id="header"> <img src="images/hg-sand1.jpg" align="middle" width="820" height="40" /> <img src="images/txt00403.jpg" align="middle" width="820" height="5" /> <img src="brazil_fl_md_clr.gif" style="float:left; vertical-align:text-top; margin-right:2em; margin-left:3em; margin-top:0.8em;" /><span class="logo">www.sitename.com</span> <img src="united_states_of_america_fl_md_clr.gif" style="float:right; vertical-align:text-top; margin-left:2em; position:absolute; top:59px; left:707px;" /> <span class="logobottom">education guide</span><br /> </div> <div id="main"> <img src="images/txt00403.jpg" width="820" height="5" /> <div id="navigation"><span style="font-weight:bold; margin-right:1em;">Home</span> <a href="index.html">Home</a> |<a href="contact.html">Contact Us</a><br /> <img src="images/in00104.jpg" width="310" /> </div> <br /> <div id="links"> <span style="text-decoration:underline; font-weight:bold;">Education Resources</span><br /> <ul style="list-style-type:none; text-align:left; padding:0; display:inline; "> <li><a href=" ">Degree Programs</a></li><br /> <li><a href=" ">Courses</a></li> </ul></div> </div> </body> </html> Code (markup):