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>
<!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 0px;
				width: 492px;
			}
			
			.errorTable {
				width: 100%;
				height: 100%;
				border: 0px;
				border-collapse: collapse;
				
				font-family: Arial;
				color: #ffffff;
				font-size: 12px;
			}
		</style>
	</head>
	
	<body>
		<div class="wrapper">
				<table class="errorTable" cellpadding="0">
					<tr style="height: 23px;">
						<td style="width: 6px; background-image: url('images/error_01.png');"></td>
						<td style="width: 40px; background-image: url('images/error_02.png');"></td>
						<td style="height: 23px; background-image: url('images/error_03.png');"></td>
						<td style="width: 40px; background-image: url('images/error_04.png');"></td>
						<td style="width: 6px; background-image: url('images/error_05.png');"></td>
					</tr>
					<tr style="height: 76px;">
						<td style="width: 6px; background-image: url('images/error_06.png');"></td>
						<td colspan="3" style="background-image: url('images/error_07.png');"></td>
						<td style="width: 6px; background-image: url('images/error_08.png');"></td>
					</tr>
					<tr>
						<td style="width: 6px; background-image: url('images/error_09.png');"></td>
						<td colspan="3" style="background-color: #000000;">
							<div style="position: relative; margin: -95px 0px 0px 0px">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet dui. Suspendisse a magna eu magna ultrices eleifend. Sed in odio porttitor justo egestas convallis. Cras nec erat ac tortor gravida varius. Maecenas vitae nisl. Aliquam ut libero id enim egestas fringilla. In hac habitasse platea dictumst. Sed ante. Aliquam ac dui non odio congue porttitor. Nullam viverra purus non purus. Proin lacinia accumsan sapien. Mauris varius tincidunt metus. Curabitur dolor odio, scelerisque sit amet, consectetur eget, pellentesque ac, ipsum.
								Nunc convallis tempus velit. In hac habitasse platea dictumst. Proin vestibulum fermentum arcu. Praesent elit arcu, luctus sit amet, pulvinar ac, ullamcorper vitae, nibh. In pede odio, porttitor eget, porta in, cursus sed, nulla. Aliquam elementum aliquet nisl. Ut sagittis nibh at eros. Mauris blandit quam quis risus. Pellentesque vel massa. Donec sit amet risus. Duis condimentum congue ante.
								Sed convallis felis non tellus pellentesque fermentum. In accumsan nunc ut sem. Aenean rhoncus. Nulla facilisi. Phasellus libero lorem, rhoncus eget, tristique sit amet, convallis vitae, quam. Mauris eget magna. Curabitur cursus sapien eget ante. Aliquam orci metus, malesuada et, aliquet sed, tristique non, libero. Aliquam ultricies tellus eu odio. Quisque porttitor lacus eget ante. Pellentesque nisl metus, semper at, vestibulum a, pellentesque eget, diam. Duis facilisis, nunc ac consequat ultricies, magna lectus tincidunt diam, sit amet sodales neque sapien a nibh. Etiam porttitor dictum sapien. Quisque sit amet lacus. Morbi aliquet hendrerit nisl. Duis placerat rutrum quam. Maecenas vel nisi et augue viverra suscipit. In tortor.
								Cras metus. In et ipsum sit amet leo rhoncus convallis. Ut ante. Duis nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quam odio, vestibulum id, gravida nec, malesuada malesuada, enim. Aenean eget dolor ut orci condimentum molestie. Donec malesuada. Pellentesque odio. Nulla facilisi. Etiam egestas accumsan mi. Cras pede nisl, porta sit amet, lacinia condimentum, consectetur ac, urna. In ante. Mauris consectetur pede et augue. Vestibulum sit amet tortor ut sapien dictum eleifend. Fusce at sapien. Fusce nunc velit, eleifend eget, ultrices vel, cursus id, ipsum.
								Fusce erat nisi, tincidunt nec, cursus in, imperdiet quis, nunc. Sed ultrices libero ac dui. Nam ac sem. Vivamus cursus, diam eget luctus venenatis, tortor arcu pharetra purus, eget tincidunt tortor nisi et ligula. Aenean neque ipsum, iaculis a, semper a, volutpat quis, dolor. In id mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur purus sed urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus risus, egestas in, dapibus condimentum, venenatis ac, lacus. Fusce aliquam hendrerit tellus. Proin eleifend.
							</div>
						</td>
						<td style="width: 6px; background-image: url('images/error_10.png');"></td>
					</tr>	
					<tr style="height: 6px;">
						<td style="width: 6px; background-image: url('images/error_11.png');"></td>
						<td colspan="3" style="background-image: url('images/error_12.png');"></td>
						<td style="width: 6px; background-image: url('images/error_13.png');"></td>
					</tr>
				</table>
		</div>
		
		
	</body>
</html>

Hi there, i've come up with a lite modification in your code!
Hope this will help you out...

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#myStyle" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Try to Avoid using Absolute Width</title>
<style id="myStyle" type="text/css">
/* <![CDATA[ */

/* W3C standard and will validate as CSS Level 2.1 with zero warning's! */

@media screen {
body { 
     width: 100%;
     height: 100%;
     text-align: center; 
}
body .wrapper {
     margin: 0% auto;
     padding: 0%;
     height: 300px;
     width: 390px;
     font: 70% Arial, sans-serif;
}
p {
     line-height: 140%;
     padding-left: 8%;
}
h2 {
     font: 700 160% Verdana, Arial, sans-serif;
     width: auto;
     padding-left: 8%;
}
div .content-wrapper {
     width: 100%;
     border: 1px solid #000;
     height: 100%;
     float: left;
     margin: 0%;
     padding: 0%;
     background-color: #000;
     color: #fff;
}         
div .contentTop {
     margin: 0px;
     float: left;
     height: 30%;
     width: 100%;
     background-color: #bbb;
     color: #000;
     border-bottom: 2px dashed #eee;
}
         
div .content {
     float: left;
     clear: left;
     margin: 0%;
     width: 100%;
     background-color: #f2f2f2;
     color: #000;
} }
/* ]]> */
</style>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div class="wrapper">
<div class="content-wrapper">
<div class="contentTop">
<h2>Content Top</h2>
</div> <!-- Content Top -->
<div class="content">
<h2>Content</h2>
<p>Nesting all div containers using float to prevent the page from breaking out!<br />Hope this will help you with your current issue. Although we are posting on the wrong side of the forum.<br />
Good day to you....</p>
</div> <!-- Content -->
</div> <!-- Content Wrapper -->
</div> <!-- Wrapper -->
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.