...
PDA

is there a fix to remove IE extra padding/margin

jasonpc1
05-13-2010, 04:37 PM
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>&nbsp;
<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>
thresher
05-13-2010, 04:42 PM
Yikes, that's a load of code. It'd be easier to read if you only posted snippets, not the whole page!

I've not bothered reading all the code, but I know IE sometimes adds padding/ margin to items whereas FF doesn't; if this extra padding is pushing your divs outside of a container div's width, they appear under each other not side-by-side.

Could that be it?
jasonpc1
05-13-2010, 05:09 PM
Yikes, that's a load of code. It'd be easier to read if you only posted snippets, not the whole page!

I've not bothered reading all the code, but I know IE sometimes adds padding/ margin to items whereas FF doesn't; if this extra padding is pushing your divs outside of a container div's width, they appear under each other not side-by-side.

Could that be it?

yes thats whats happening.

check out

www.round shaw. co .uk (remove spaces!)
code beginner
05-13-2010, 08:49 PM
try performing a global whitespace reset. also declare all borders and margins. if you don't specify, IE might invent it's own ideas, rather than having them be 0 pixels.
abduraooft
05-14-2010, 09:46 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Your DOCTYPE (http://www.alistapart.com/articles/doctype/) is incomplete. I'd recommend to use an HTML Strict one and then validate your code to fix all errors in your markup, if any.

btw, Don't you know why using tables for layout is very bad (http://www.hotdesign.com/seybold/)?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum