|
|
Posted by subp on 05/03/06 17:55
Hi there,
I've searched and can't find a solution.
I have a relatively positioned td and absolutely positioned DIVs within
it. In IE, it works, but in FF it doesn't. In FF, the divs are
positioned to the nearest containing non-table container, not the TD.
I was able to 'hack' the problem by adding a div into the markup, but I
really don't want to have to do that. Any thoughts? I appreciate it.
Here's my example code:
HTML file:
<html><head><title>test</title><link rel="stylesheet" type="text/css"
href="test_css_positioning.css" /> </head>
<body>
<h1>Test of Absolute Positioning in Table Data</h1>
All of the divs should show up in their proper places inside of the td.
<table>
<tr>
<td id="container">center
<div id="topleft">topleft</div>
<div id="topright">topright</div>
<div id="bottomleft">bottomleft</div>
<div id="bottomright">bottomright</div>
</td>
</tr>
</table>
</body>
</html>
CSS file:
td#container {
position: relative;
width: 500px;
border: 1px #000000 solid;
height: 70px;
text-align: center;
vertical-align: middle;}
#topleft {
position: absolute;
top: 0px;
left: 0px;
}
#topright {
position: absolute;
top: 0px;
right: 0px;
}
#bottomleft {
position: absolute;
bottom: 0px;
left: 0px;
}
#bottomright {
position: absolute;
bottom: 0px;
right: 0px;
}
Again, thanks for your help.
Navigation:
[Reply to this message]
|