...

View Full Version : The old 'content pushed down in IE' problem



nathanoj
04-08-2011, 10:24 AM
I noticed with horror that my lovely layout (FF and Safari) was out of whack in IE7. It's a 2 column div-based layout - left links div with wide right margin and content div floated right. 'cept in IE the left links content gets pushed down below the right content in IE
I've read around the problem and tried a few suggestions - taking the width declaration off the content - but I'm shooting in the dark.

Any fresh eyes want to gaze at www.nima.co.nz for me?
Many thanks
Jon

Excavator
04-08-2011, 10:39 AM
Hello nathanoj,
There is a margin on that ul in IE7. Specify your own so it's the same in all browsers.

Here it is zero'd out, see highlighted in red -

#links ul {
list-style-type: none;
margin: 14px 0;
padding-left: 10px;
}

nathanoj
04-08-2011, 11:09 AM
Awesome - thanks so much Ex for your fast and effective reply.

Now I'll ruminate on why it should be so.....
Does IE add a default margin if none is specified?

Excavator
04-08-2011, 06:28 PM
Awesome - thanks so much Ex for your fast and effective reply.

Now I'll ruminate on why it should be so.....
Does IE add a default margin if none is specified?

Each browser had default margin/padding on some elements. Sometimes those defaults are different. That's the main argument for using a CSS reset.

I think, instead of using a reset, that it's better to leave the defaults alone and set your own margin/padding on those elements.

===================
I couldn't answer what the default margin IE adds as I didn't know. I set up this little experiment just for fun to find out.
Using this code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
margin: 0;
background: #FC6;
}
#container {
height: 500px;
width: 700px;
margin: 30px auto;
padding: 50px;
background: #999;
}
ul {
background: #c60;
list-style: none;
}
li {background: #396;}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#"></a>linky</li>
<li><a href="#"></a>linky</li>
<li><a href="#"></a>linky</li>
<li><a href="#"></a>linky</li>
</ul>
<!--end container--></div>
</body>
</html>

FF4 defaults

ul:

margin: 16px 0;
padding: 0 0 0 40px;
li:

margin: 0;
padding: 0;


IE9 and IE8 are the same as FF4

IE7 defaults

ul:

margin: 0 0 0 40px;
padding: 0;
li:

margin: 0;
padding: 0;

nathanoj
04-09-2011, 12:04 AM
Nice detective work!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum