CSS Forum

**Rajaie** · 09:48 AM

More problems with IE, as you can see, it appears that the menu and content box have a larger margin in IE than in firefox, how can i fix this?

HTML

Code:

<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Rajaie AlKorani" /> 
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>HomePage</title>
</head>
<body>
<div id="wrapper">
<div id="head"></div>
<?PHP include($_SERVER['DOCUMENT_ROOT']."/ziimobile/menu.php"); ?>
<div id="body">
<div id="content">
Because of the way they are misused all over the Web, categories have grown to become something that we regard in a purely user-centric light. We think of them as navigational tools and guides for users, but in reality, categories are a powerful tool that bloggers can use to exercise precise control over content in a dynamic environment.
Unfortunately, the true power of categorized content has been masked by the one size fits all implementation you see everywhere on the Web—the proverbial long, ugly list of category links now appearing on a blog near you.
As luck would have it, that awful category list also turns out to be a very poor presentational strategy for you see everywhere on the Web—the proverbial long, ugly list of category links now appearing on a blog near you.
</div>
<div id="sidebar">
Because of the way they are misused all over the Web, categories have grown to become something that we regard in a purely user-centric light. We think of them as navigational tools and guides for users, but in reality, categories are a powerful tool that bloggers can use to exercise precise control over content in a dynamic environment.
Unfortunately, the true power of categorized content has been masked by the one size fits all implementation you see everywhere on the Web—the proverbial long, ugly list of category links now appearing on a blog near you.
As luck would have it, that awful category list also turns out to be a very poor presentational strategy for your site… Because on the Web—the proverbial long, ugly list of category links now appearing on a blog near you.
</div>
</div>
<div id="footer">
Copyright &copy; 2008 
</div>
</div>
</body>
</html>

CSS

Code:

html,body {
    font-family: Tahoma,Arial,Helvetica,Sans-serif;
    font-size: .87em;
    margin: 0;
    background: url('/ziimobile/bg.png');
}
#wrapper {
    margin: 0 auto;
    width: 62.56em;            
    border: 3px double #CCCCCC;
    overflow: hidden;
}
#head {
    height: 9em;
    overflow: hidden;
}
#menu {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 1.5em;
    background: #FFFFFF;
    overflow: hidden;
}
#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu ul li {
    display:inline;
}
#menu ul li a {
    float: left;
    line-height: 1.3em;
    color: #000000;
    border-right: 1px solid #000000;
    display: block;
    height: 1.5em;
    width: 7em;
    text-decoration: none;
    text-align: center;
}
#menu ul li a:hover {
    text-decoration: underline;
    background: #4692b9;
}
#body{
    float: left;
    width: 100%;
    background: #CCCCCC;
}
#sidebar {
    border: 1px solid #000000;
    background: #FFFFFF;
    width: 25%;
    float: right;
    margin: 5px;
}
#content {
    margin: 5px;
    border: 1px solid #000000;
    width: 70%;
    background: #FFFFFF;
    float: left;
}
#footer {
    clear: both;
    text-align: center;
    border-top: 1px solid #000000;
    background: #FFFFFF;
}

**LadynRed** · 03-01-2008, 11:04 AM

Doubled-float margin bug in IE.
Any time you have a floated element and you give it a margin going in the same direction, IE will DOUBLE that margin. You have margin: 5px; on your divs, and that margin is causing the problem.

Use conditional comments to target a CSS file that contains ONLY the fixes needed to make IE behave. In that separate file add display:inline; for all those floated divs you've applied the margins to.

You need to study ALL of IE's bugs - www.positioniseverything.net

**svirid** · 03-01-2008, 11:35 AM

Before I start any site I do this to force browsers to work the same way, it helped me hope it will help u

body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, button, p, blockquote, td, iframe {
margin: 0px;
padding: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-style: normal;
font-weight: normal;
font-size: 100%;
}

**Rajaie** · 03-01-2008, 11:49 AM

Thanks LadynRed, your trick worked