Forum Moderators: not2easy
Why?
Because I have a set of divs inside the cell containing a rounded background color. And I want the height of this background to consist with surrounding cells. As for now, the background only covers the height of the cell content (my <h2> tag).
I'm kind of stuck on how to solve this?
does this help....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div {
height:200px;
width:324px;
border:1px solid #000;
margin:auto;
}
h1 {
line-height:200px;
background-color:#fee;
color:#000;
text-align:center;
margin:0;
}
-->
</style>
</head>
<body>
<div>
<h1>word</h1>
</div>
</body>
</html>
You see, the surrounding cells are dynamic in height depending on the content. So, the height of the text cant be specified in px. It need some 100% thingy. But I can't get my head around it.
I only put line-height to center the text. If you just require the <h2> element to fill the cell use height:100% instead.
birdbrain
CSS:
.roundcont {
background-color: #f90;
color: #fff;
height:100%;
}
.roundtop {
background: url(../images/tr.gif) no-repeat top right;
}
.roundbottom {
background: url(../images/br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block!important;
}
html:
<td>
<div class="roundcont"><div class="roundtop">
<img src="../images/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
</div>
<h2>headline</h2>
<div class="roundbottom">
<img src="../images/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
</div>
</div>
</td>
<td>
bla bla bla...some dynamic content here determening the height of cell...
</td>
Anyone got a solution to this?
