I'm trying to make a nice effect using transparent backgrounds for divs and overlapping them using negative margins. It looks fine in Safari and Firefox, but Internet Explorer won't work.
My only guess is that IE doesn't support negative margins. I looked it up on Google and found something (a supposed "fix" for it) but it didn't work.
Here's my CSS:
body {
background-color: #FFFFFF;
color: #333333;
font-family: Arial;
font-size: 16px;
text-align: center;
margin-top: 0px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 800px;
}
#header {
background-image: url(../images/bg_40.png);
height: 50px;
margin-left: -50px;
}
#sidebar {
position: absolute;
width: 200px;
margin-left: -50px;
background-color: #CCCCCC;
}
#content {
background-image: url(../images/bg_60.png);
width: 700px;
margin-left: 150px;
margin-top: -25px;
}
#footer {
width: 900px;
margin-left: -50px;
margin-right: -50px;
font-size: 12px;
color: #999999;
}
(bg_40 is a background at 40% opacity, bg_60 is the same background at 60%)
And my HTML:
<!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>My Website</title>
<link href="scripts/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png" />
</div>
<div id="sidebar">
[content]
</div>
<div id="content">
[content]
</div>
<div id="footer">
Copyright (C) 2008. All Rights Reserved.<br />
Site created by Luke Godfrey.
</div>
</div>
</body>
</html>
How can I work around the glitch? Should I change the whole code and use another method, or is there a "CSS Hack" or something I can use?
