|
|
Posted by ironcorona on 05/03/06 18:16
subp@wachtel.us wrote:
> 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.
That's a problem with IE not FF. Absolute positioning *should* take the
the element that it's applied to out of the flow of the page completely
and then you position it with reference to the screen's borders.
SO. If you want to try this approach try positioning the div's (using
position:relative;) within the td. Since the td box has a defined width
and height it should work on most screens.
Try this (note: I've added a <div> to your HTML and altered the CSS):
<html><head><title>test</title><link rel="stylesheet" type="text/css"
href="test_css_positioning.css" />
<style type="text/css">
td#container {
position: relative;
width: 500px;
border: 1px #000000 solid;
height: 70px;
text-align: center;
}
#center {
position: relative;
top: 40px;
}
#topleft {
position: relative;
top: -20px;
left: -220px;
}
#topright {
position: relative;
top: -40px;
right: -220px;
}
#bottomleft {
position: relative;
bottom: -20px;
left: -210px;
}
#bottomright {
position: relative;
bottom: 0px;
right: -210px;
}
</style>
</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">
<div id="center">center</div>
<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>
Now it looks the same in both browsers. I wouldn't recommend using
positioning like that because it sets up a whole slew of other problems
related to people's screen size etc etc.
--
ironcorona
Navigation:
[Reply to this message]
|