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> Link to comment https://forums.phpfreaks.com/topic/201659-is-there-a-fix-to-remove-ie-extra-paddingmargin/ 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 Link to comment https://forums.phpfreaks.com/topic/201659-is-there-a-fix-to-remove-ie-extra-paddingmargin/#findComment-1057959 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. Link to comment https://forums.phpfreaks.com/topic/201659-is-there-a-fix-to-remove-ie-extra-paddingmargin/#findComment-1057975 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. Link to comment https://forums.phpfreaks.com/topic/201659-is-there-a-fix-to-remove-ie-extra-paddingmargin/#findComment-1058333 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). Link to comment https://forums.phpfreaks.com/topic/201659-is-there-a-fix-to-remove-ie-extra-paddingmargin/#findComment-1058396 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.