Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    is there a fix to remove IE extra padding/margin

    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

    Code:
    <!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>
    Last edited by jasonpc1; 05-13-2010 at 08:23 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Hamphire, UK
    Posts
    47
    Thanks
    7
    Thanked 1 Time in 1 Post
    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?

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by thresher View Post
    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!)

  • #4
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    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.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Your 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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •