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?