Firefox problem with absolutely positioned DIV in TD

[niazi]

Hello everybody.
Actually I'm newby to the CSS design world, and I am facing a problem in positioning absolutely DIV within a table cell. My code is just working fine with IE but not with Firefox. here is my code:



<style>
table#tblwindows{
width:440px;
}

table#tblwindows td{
background-color:#f0eded;
width:50%;
height:150px;
vertical-align:top;
padding:10px;
border: solid 1px #d6d9d5;
position:relative;
}


table#tblwindows div.title{
font-size:12px;
font-weight:bold;
text-align:center;
color:Green;
}

table#tblwindows div.more {
background: url(Images/document.gif) no-repeat left 2px;
position:absolute;
bottom:10px;
left:10px;
text-align:left;
padding-left: 12px;
padding-bottom: 2px;
}
</style>

<table border="0" cellspacing="10" id="tblwindows">
<tr>
<td>
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</td>
<td>
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</td>
</tr>
</table>


In IE, the "more" DIV is positioned exactly as supposed within the TD, but in Firefox it seems positionned relatively to the contatiner of the table.
Any help is appreciated.

[jscheuer1]

FF is doing it right. td's cannot really be relatively positioned. You need to have a div that is position:relative that contains all the blah blah blah and the div.more absolutely positioned one.

[mburt]

Usually people think FF is wrong because it appears right in IE (which isn't standards-compliant). But FF is following guidlines here, not IE.

[niazi]

jscheuer1 and mburt, thanks for your reply.
IE is really a headache for developers.
Anyway, I've tried to insert a container DIV in TD but I want this DIV to take the full height of the cell whereas it's as long as the cell content. This leads to awkward looking of adjacent cells. So my question is how to make the inner DIV to take all the client height of the container table cell?

[jscheuer1]

The markup:


<td><div class="ftd">

Put your td content here

</div></td>

The style:


.ftd {
position:relative;
width:100%;
height:100%;
}

[niazi]

jscheuer1, thanks for the reply.
But actually I've already tried height:100% and it didn't work.
Still it's the same layout, the DIV is only as long as the content.
It may be useful to post my code:

Style:


table#tblwindows{
width:440px;
}

table#tblwindows td{
background-color:#f0eded;
width:50%;
/*height:150px;*/
vertical-align:top;
padding:0px;
margin:0px;
border: solid 1px #d6d9d5;
}

table#tblwindows div.container{
position:relative;
height:100%;
padding:10px;
border: solid 1px blue;
}


table#tblwindows div.title{
font-size:12px;
font-weight:bold;
text-align:center;
color:Green;
}

table#tblwindows div.more {
background: url(Images/document.gif) no-repeat left 2px;
position:absolute;
bottom:10px;
left:10px;
text-align:left;
padding-left: 12px;
padding-bottom: 2px;
}


Markup:


<table border="0" cellspacing="10" id="tblwindows">
<tr>
<td>
<div class="container">
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</div>
</td>
<td>
<div class="container">
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</div>
</td>
</tr>
</table>


In the markup above, the right DIV is longer than the left because it contains more content.

[jscheuer1]

Yet another reason to avoid tables I suppose.

[niazi]

Yep, I'm convinced that I should avoid tables, but the point is that I don't know how to achieve the same layout with CSS :) .
Could you kindly give me a hint on this matter?

I want my articles to be displayed in equal horizontal couples of frames, it's fairly easy with tables.

Regards.

[jscheuer1]

Just playing with it a bit more, you need to give the td's height so that the 100% height of your container has something to fill. This works well:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table#tblwindows{
width:440px;
}

table#tblwindows td{
background-color:#f0eded;
width:50%;
height:20em;
vertical-align:top;
padding:0px;
margin:0px;
border: solid 1px #d6d9d5;
}

table#tblwindows div.container{
position:relative;
height:100%;
padding:10px;
border: solid 1px blue;
}


table#tblwindows div.title{
font-size:12px;
font-weight:bold;
text-align:center;
color:Green;
}

table#tblwindows div.more {
background: url(Images/document.gif) no-repeat left 2px;
position:absolute;
bottom:10px;
left:10px;
text-align:left;
padding-left: 12px;
padding-bottom: 2px;
}
</style>
</head>
<body>
<table border="0" cellspacing="10" id="tblwindows">
<tr>
<td>
<div class="container">
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</div>
</td>
<td>
<div class="container">
<div class="title">
articles
</div>
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
blabla blabla<br />
<div class="more">
<a href="#">more</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

I used em units for the height of the td's - that way if the browser resizes the text (within reason) it will still all fit.

[niazi]

jscheuer1, I'm really thankful for your help.

The problem with setting the height property to a static value is that if the content exceeds the height of the cell, you get a troublesome display. However, do you have an idea on how to achieve the same layout without a table?

[jscheuer1]

What drives the height of the content? If you have no control over that, it would be difficult no matter how it is set up. By using ems for the height, it can be set to largest height and will adapt to changes in font sizes by the browsers. If you are getting dynamic content that can vary widely in height, you would need a script to adjust the height. If it is just something that you are posting every so often, you can set the height in style.

There may be a way to dynamically adjust the height using css but, as far as I know, there is not.

Here is a layout without tables:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.holder {
height:20em;
width:440px;
margin:10px;
}
.article {
background-color:#f0eded;
float:left;
position:relative;
margin:.5ex;
padding:1em;
width:40%;
height:100%;
border:1px solid blue;
}
.title{
font-size:85%;
font-weight:bold;
text-align:center;
color:Green;
margin-bottom:1em;
}
.more {
background: url(Images/document.gif) no-repeat left 2px;
position:absolute;
bottom:10px;
left:10px;
text-align:left;
padding-left: 12px;
padding-bottom: 2px;
}
.rap {
clear:left;
}
</style>
</head>
<body>
<div class="holder">
<div class="article"> <div class="title">
articles
</div>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
<div class="more">
<a href="#">more</a>
</div></div>
<div class="article"> <div class="title">
articles
</div>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
blabla blabla<br>
<div class="more">
<a href="#">more</a>
</div></div>
</div>
<div class="rap"></div>
</body>
</html>

[niazi]

jscheuer1, I'm really thankful for your help.
I liked your CSS code to do it, CSS is powerful and I think It needs some time to master.
If you have that script to adjust the height it will be great.

[jscheuer1]

Well, a script to adjust height of things is a little tricky to just write out. It would have to be tailored (to some extent) to the markup you are using and to the event(s) that would alter the content. Basically, what you need to do is make up a absolutely positioned division located outside all markup tags except the body - with its width, font characteristics, margin and padding set to what you want to use for the content area(s). Its visibility property should be 'hidden' and its left and top properties large negative values like -3000px. It's height property should be auto. The populate it with each content in turn. Each time you check its offsetHeight and compare that (at first to zero) to the previous offsetHeight, always choosing the largest of the two numbers. At the end of this process you will have a number representing the pixel height for your content divisions. This could be converted to em's (a good idea) by dividing by a number (16 for Times New Roman at the standard size) that you determine to be correct for your font-size, style and type. Once you have the final number (be it as pixels or em's) you then apply it dynamically to the content containers.

In rough terms, without tailoring this to any particular markup (most notably the content divisions' width, font characteristics, margin and padding -which should be added to the "checkheight" div's style [highlighted green]) or event(s), the code would look something like so (for content divisions with class="content" executing onload of the page - untested):


<div id="checkheight" style="position:absolute;left:-3000px;top:-3000px;height:auto;visibility:hidden;"></div>
<script type="text/javascript">
function setheight(){
var thecontent=[], containers=document.getElementsByTagName('div');
for (var i_tem = 0; i_tem < containers.length; i_tem++)
if (containers[i_tem].className=='content')
thecontent[thecontent.length]=containers[i_tem].innerHTML;

var th=0, ch=document.getElementById('checkheight');
for (i_tem = 0; i_tem < thecontent.length; i_tem++){
ch.innerHTML=thecontent[i_tem];
th=Math.max(th, ch.offsetHeight);
}

for (i_tem = 0; i_tem < containers.length; i_tem++)
if (containers[i_tem].className=='content')
containers[i_tem].style.height=Math.ceil(th/16)+'em';
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", setheight, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", setheight );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
setheight();
};
}
else
window.onload = setheight;
}
</script>

Note: In all likelihood the red 16 would need to be adjust via trial and error.

[niazi]

Many thanks for your help