Hi,
I'm trying to create an expandable content box for forum purpose, however the code I've come up doesn't work in IE, but it is valid HTML 4.01 Strict. Anyway, if I'm handling this problem the wrong way, please tell me how I should do it then.
I have an image with rounded corners that has to be in the top of the wrapper. This image is just a gradient that ends in #000000 (black).
So in order to make it expand I just set the background color of my wrapper to black, to make it fit my layout. However, because of the rounded corners, the black is shown trough them because the background of my image is transparent. So like this:
[transparent]
________________ [transparent]
[gradient] [corner] |
but the corner is round ofcourse :)
To solve this I've just shrinked my wrapper to the size of the contentbox minus the rounded corners. I then give my image a negative left margin which places it to the left, solving my problem. Well in FF ofcourse, because IE just expands my DIV wrapper even though I gave it a fixed width.
This is my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.wrapper {
margin: 0px 0px 0px 10px;
height: 300px;
width: 390px;
background-color: #000000;
}
.contentTop {
margin: 0px 0px 0px -5px;
height: 98px;
width: 400px;
background-color: #bbbbbb;
}
.content {
position: relative;
margin: -80px 0px 0px -5px;
height: 100px;
width: 400px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contentTop">
</div>
<div class="content">
</div>
</div>
</body>
</html>