Margin error in IE [Archive] - Dynamic Drive Forums

burgeamon

09-24-2007, 01:44 PM

Hi guys, im fairly new to CSS so if i've made an errors then please let me know.

Im creating a simply layout that will have a header, 2 columns then a footer.
The issue im having is in IE where the margins don't seem to be correct. The page looks fine in Netscape but in IE it seems to add a few pixels to the margins.

A screenshot showing the 2 pages can be found here...
http://i12.tinypic.com/63ra63m.jpg

Here's the HTML.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="headerlogo">
<img src="images/motlive_logo.jpg" alt="MOTlive logo" width="280" height="46" />
</div>

<div id="headermenu">
<img src="images/menu.jpg" alt="menu test" width="389" height="19" /> </div>
</div>

<div id="content">
<div id="leftcol">
<h1>content</h1>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Phasellus varius eleifend.
Donec euismod.
Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit.
</div>
<div id="rightcol">
<h1>sidebar
<BR /></h1>
</div>
</div>

<div id="footer">
footer
</div>
</div>
</body>
</html>

and here is the CSS.

/* REMOVE DEFAULTS */
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
/* END REMOVE DEFAULTS */

#wrapper {
width:996px;
}
#content {
clear:both;
width:994px;
border: 1px solid #CCCCCC;
margin-top:4px;
padding-bottom:4px;
height:200px;
}
#header {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
height:50px;
margin:0px;
display:block;
}
#leftcol {
width: 691px;
float: left;
background-color:#ffffff;
border: 1px solid #CCCCCC;
margin-left:4px;
margin-top:4px;
margin-bottom:4px;
margin-right:4px;
}
#rightcol {
width: 287px;
float: right;
background-color:#ffffff;
border: 1px solid #CCCCCC;
margin-top:4px;
margin-bottom:4px;
margin-right:4px;
}
#footer {
background: #d7dabd;
clear: both;
height:44px;
}
#headerlogo {
width:308px;
float:left;

}
#headermenu {
float:left;
width:389px;
position:relative;
top:31px;
}

Thanks,

Andy

boogyman

09-24-2007, 01:53 PM

read this article (http://www.dynamicdrive.com/forums/showthread.php?t=24866)

defining a width explicitly will always cause errors, instead try to make them percentages of the screen resolutions available width. because you will get people with 800x600 browsers, and people with 1280x1024. and everywhere in between and even above / below.

body {
width: 90%;
margin: 0 auto;
}
#wrapper {
text-align: left;
}
#rightcol {
float: right;
width: 70%;
}
#leftcol {
float: left;
width: 25%;
}
#footer {
clear: both;
}

that will create the page 90% of the available width of the screen.
the left column will take up 25% of the #wrapper while the right column will take up 70%. I purposely kept a 5% margin between the two to deal with IE6 rendering problem, and also makes for a page that doesnt look squished.

when you are posting code please use the [c.ode][/c.ode] tags without the dots

burgeamon

09-24-2007, 02:36 PM

i've tried that, and while it does work im not sure if it will be helpful in this instance as the left column has to be a fixed width due to the content that will be going in there.

I also had it so all of the borders were 4 pixels apart, something that i don't believe will be possible using percentages.

boogyman

09-24-2007, 02:44 PM

i've tried that, and while it does work im not sure if it will be helpful in this instance as the left column has to be a fixed width due to the content that will be going in there.
okay so expand the left column some. say to 30%; and define a minimum width of the body to 760, for 800x600 friendly

body {
margin: 0 auto;
width: 90%;
min-width: 760px;
}
#leftcol {
float: left;
width:30%;
}
#rightcol {
float: right;
width: 65%;
}

I also had it so all of the borders were 4 pixels apart, something that i don't believe will be possible using percentages.
there will always be a slight difference between browsers in rendering. that is why its best to avoid absolutes as much as possible. I dont think that having a margin of more then 4 pixels will make that big of an impact on the cosmetics of your site; it will probably help the accessibility / user-friendliness of it actually. you should make sites that are accessible to all regardless of any hinderance, whether it be screen size, color blindness, blindness in general, deaf, etcetc...

By all means if you wish to use absolute pixels go for it, but I will guarentee that IE6 will always render your content differently then most of the standards compliant browsers, just because of the engine they use. I am/was just trying to offer you a solution that will take care of your problem as well as provide better user accessibility.

burgeamon

09-24-2007, 03:03 PM

ok, i'll give what you've sugested a go, and im probably gonna move away from the absolutes as you said, so that the site is more userfriendly.

thank you for your clear responses.