my layout doesnt work in IE

**simster** · 04-23-2008, 06:23 AM

can someone rewrite my css so it looks the same in IE as it does now in mozilla

css

Code:

body,
html {
    margin:0;
    padding:0;
    }
body {
    min-width:800px;
    }
#wrap {
    margin:0 auto;
    width:800px;
    }
#header {
    }
#nav {
    }
#main {
    float:right;
    width:600px;
    margin-right:25px;
    background-color:#3C4856;
    }
#sidebar {
    float:left;
    width:145px;
    margin-left:25px;
    padding-left:5px;
    background-color:#3C4856;
    overflow-y:auto;
    }
#footer {
    clear:both;
    }

html/php code

PHP Code:


			
<html>
<head>
<title>Simster's Space</title>
</head>
<link rel="stylesheet" type="text/css" href="<?php print $CSS; ?>" />
<body bgcolor="#000000">
<div id="wrap">
    <div id="header"><img src="<?php print $Header; ?>"></div>
    <div id="nav"><img src="<?php print $One; ?>"></div>
    <div id="box">
    <div id="main">the content</div>
    <div id="sidebar">the nav bar</div>
    </div>
    <div id="footer"><img src="<?php print $Two; ?>"></div>
</div>
</body>
</html>

**LadynRed** · 04-23-2008, 11:19 AM

You are triggering several IE bugs, but the big one is the doubled-float margin bug.
Rather than doing the work for you, you should read about the many IE bugs and how to fix them.

www.positioniseverything.net

**simster** · 04-25-2008, 08:13 AM

im sorry i cant find how to fix my css code and even if i could find it i probably wont be able to understand it. (I still go to high school (2nd year high school New Zealand.)

**LadynRed** · 04-25-2008, 08:55 AM

2nd year high school.. you should be able to read AND understand what's on that site.

Any time you float something right or left, then add margin right or left to that same floated element, IE will DOUBLE that margin amount, throwing off the layout. You need to do one of 2 things - rework the layout to remove the margins going in the same direction as the float, or you need to use conditional comments (look that up on Google) to call a 2nd css file that will contain ONLY those properties needed for IE to do it correctly.

The fix for the doubled-float margin bug is to add display:inline. So, for example, you would need this to fix part of your layout:

#sidebar, #main{display: inline;}

That goes in a separate css file that ONLY IE will read when you use conditional comments.

**simster** · 04-25-2008, 09:02 AM

thank you very much.