jasonc Posted May 13, 2010 Share Posted May 13, 2010 i have divs side by side and this works in FF3.6.3 but not in IE 8. can someone please check my code to see if they can figure out why the page is all over the place. thanks for looking <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="csscode.css"> <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]--> <style type="text/css"> *{ margin:0; padding:0; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } body { background: #fff; } #wrap { width: 99%; margin: 0 auto; min-width: 700px; } #header { height: 60px; padding: 0px 5px 3px 10px; background: #7AB3D2; font-style: italic; font-size: 3em; font-family: Blackadder ITC;} .mytable { width: 100%; border-collapse: collapse; border-width: 0px; } #menu { list-style: none; background: #7AB3D2; padding: 10px; float: left; width: 155px; } /* the width here should be 20 less than the width in the content */ #content { margin-left: 175px; background: #FFF; background: url(images/top_left_inner.gif); background-repeat: no-repeat; background-position: left top; } #content p { padding:10px; } #menu li a { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; } #menu li a:hover { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; } #top_left_inner { padding: 10px; background: url(images/top_left_inner.gif); border-collapse: collapse; border-width: 0px; background-repeat: no-repeat; background-position: left top; } #bottom_left_trans { background: url(images/bottom_left_trans.png); background-repeat: no-repeat; background-position: left bottom; } #bottom_right_trans { background: url(images/bottom_right_trans.png); background-repeat: no-repeat; background-position: right bottom; } menubutton { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton:hover { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton-active { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton-active:hover { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } #footer { clear: both; background: #7AB3D2; text-align: right; } #footerleftimg { background: url(images/bottom_left_trans.png); background-repeat: no-repeat; background-position: left bottom; height: 28px; } #footerrightimg { background: url(images/bottom_right_trans.png); background-repeat: no-repeat; background-position: right bottom; height: 28px; } #footer a { text-align: right; padding: 0 10px; } </style> </head> <body> <div width="1164" id="mytable"> <div id="wrap"> <div id="header">.</div> <ul id="menu"> <li><a href="" class="one">Home</a><li> <li><a href="" class="one">Contact us</a></li> <br><br><br><br> </ul> <div id="content"> <p> <table width="100%"> <tr> <td> <form name="loginbox" method="post" action="adminauth.php"> <table width="100%"> <tr> <td><div align="center">Admin login</div></td> </tr> <tr> <td><div align="center"> <p><FONT face=Verdana size=1>Username</FONT> <INPUT style="FONT-SIZE: 8pt; COLOR: #333333; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff" size="16" type="text" name="username"><br><FONT face=Verdana size=1>Password</FONT> <INPUT style="FONT-SIZE: 8pt; COLOR: #333333; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff" size="16" type="password" name="password"><br> <INPUT style="FONT-SIZE: 8pt; COLOR: #ffffff; FONT-FAMILY: Arial; BACKGROUND-COLOR: #0066cc" type="submit" value="Log In" name="login"> <INPUT style="FONT-SIZE: 8pt; COLOR: #ffffff; FONT-FAMILY: Arial; BACKGROUND-COLOR: #0066cc" type="reset" value="Reset" name="reset"> </p> </div> </td> </tr> <tr> <td><div align="center"><font size="2"><a href="/index.php?a=fp">forgot password</a></font></div></td> </tr> </table> </FORM> </td> </tr> </table> </p> </div> <div id="footer"> <div id="footerrightimg"> <div id="footerleftimg"> <a href="#">Disclaimer</a> <a href="#">Privacy Policy</a> </div> </div> </div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
jacko310592 Posted May 13, 2010 Share Posted May 13, 2010 hi jasonc, IE depends highly on a correct doctype to be specified; replace your doctype for the following and it should look the same as in FF (: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> best regards Quote Link to comment Share on other sites More sharing options...
jasonc Posted May 13, 2010 Author Share Posted May 13, 2010 hi jasonc, IE depends highly on a correct doctype to be specified; replace your doctype for the following and it should look the same as in FF (: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> best regards thanks mate that did the trick. Quote Link to comment Share on other sites More sharing options...
haku Posted May 14, 2010 Share Posted May 14, 2010 Good eye Jacko! I'm impressed. I wouldn't have caught that invalid doctype at all. I usually look for the presence of a doctype, but not the actual structure of it. Quote Link to comment Share on other sites More sharing options...
jacko310592 Posted May 14, 2010 Share Posted May 14, 2010 thank you haku (: its something i picked up a while ago, its always best to give the doctype a quick check when there’s errors with the positioning of the site (as IE seems to depend on it so much when it comes to styling). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.