Forum Moderators: not2easy
I have a site, on which I have a <div> container holding the majority of my content.
This <div> currently has the following CSS...
#Content {
margin: 30px 217px 30px 136px;
}
In the <div> I have a couple of nested <div>s which I have given negative left margins, to allow them to appear a little to the left of the rest of the content. For example...
#Separator {
margin-left: -67px;
}
The good news is that this works fine!
However, the client has now decided that the main content area should be fixed width, so I have changed the CSS to this...
#Content {
margin: 30px 217px 30px 136px;
width: 647px;
}
... which works fine in FireFox. However, Internet Explorer now clips the left hand edge of my elements with a negative left margin!
Does anybody know why it does this, and any idea how to fix it!?
Thanks,
- Chris
They effect ONLY IE and ONLY the versions you want them to effect. Place them BETWEEN any tags you want be it the head or body. For example...
<html>
<head>
<style type="text/css"
body {background:#f0f;}
</style>
<!--[if IE]>
<style type="text/css"
body {background:#0f0;}
</style>
<![endif]-->
</head>
<body></body>
</html>
The reference page...
[msdn.microsoft.com...]
I hope this helps!
#Content {
margin: 30px 217px 30px 136px;
width: 647px;
}
Thing is, even though this will validate, there is a logic error in there. It can only work if the sum of the width and margins is the same as the available width in the browser. Usually, fixed designs are centered, but I assume you want to offset the centering a bit, is that correct?
