Broken: absolutely positioned divs within a td in FF

05-03-2006

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.

05-03-2006

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

05-03-2006

In message < .com>,
writes

>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.

Sounds yuk!

What about adding:

display: block;

to td#container ???

td#container {
display: block;
position: relative;
width: 500px;
border: 1px #000000 solid;
height: 70px;
text-align: center;
vertical-align: middle;}

--
Martin Jay

05-03-2006

Martin,
Wow, that worked. I could have sworn that I had tried that, but I
dunno. Clearly I didn't try it, at least in the current context.

Thanks!

05-03-2006

Martin Jay wrote:
> In message < .com>,
> writes
>
>> 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.
>
> Sounds yuk!

Agreed.

> What about adding:
>
> display: block;

There it is again. display:block; It seems to be the answer to every
problem I've seen lately. Yours is a much more elegant solution than mine.

If I were King of the World I'd give a medal to "display:block;". But
then you'd probably all ask if I had nothing better to do with my time!!!

--
ironcorona

05-03-2006

Yeah, and imagine if there were silver bullets like that in other areas
of life?

Thanks, by the way, for the time you put in.

05-03-2006

So, I thought I was out of the woods, but the example I created (for
simplicity) hid an issue. That td that now has 'display: block;' as an
attribute is actually spanning columns, and followed by other rows with
multiple TDs.

When display: block; is added, it pushes (only in FF) all of the
remaining columns to the right, seemingly negating the colspan table
attribute. So, I added display: inherit; (tried others too) to the
following TR tags, and it does move the columns back into place, but
they don't match up anymore.

html snippet:
__________
<table>
<tr>
<td colspan="5" 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>
<tr class="rows">
<td class="data">Column 1</td>
<td class="data">Column 2</td>
<td class="data">Column 3</td>
<td class="data">Column 4</td>
<td class="data">Column 5</td>
</tr>
</table>
____________

css:
___________
table {
border-collapse: collapse;}

td#container {
display: block;
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;
}

tr.rows {
display: inherit;}

td.data {width: 100px;
border-top: 1px #636262 solid;
border-left: 1px #636262 solid;
border-right: 1px #636262 solid;
border-bottom: 0px;}
_____________________

Is there a good solution to this one? Thanks again!

05-03-2006

Skeeve wrote:
> So, I thought I was out of the woods, but the example I created (for
> simplicity) hid an issue. That td that now has 'display: block;' as an
> attribute is actually spanning columns, and followed by other rows with
> multiple TDs.
>
> When display: block; is added, it pushes (only in FF) all of the
> remaining columns to the right, seemingly negating the colspan table
> attribute. So, I added display: inherit; (tried others too) to the
> following TR tags, and it does move the columns back into place, but
> they don't match up anymore.
>
> html snippet:
> __________
> <table>
> <tr>
> <td colspan="5" 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>
> <tr class="rows">
> <td class="data">Column 1</td>
> <td class="data">Column 2</td>
> <td class="data">Column 3</td>
> <td class="data">Column 4</td>
> <td class="data">Column 5</td>
> </tr>
> </table>
> ____________
>
> css:
> ___________
> table {
> border-collapse: collapse;}
>
> td#container {
> display: block;
> 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;
> }
>
> tr.rows {
> display: inherit;}
>
> td.data {width: 100px;
> border-top: 1px #636262 solid;
> border-left: 1px #636262 solid;
> border-right: 1px #636262 solid;
> border-bottom: 0px;}
> _____________________
>
> Is there a good solution to this one? Thanks again!

This one I'm on top of. Take out the width:500px; from
td#container and add it into the overall table rules. The CSS should
look like:

table {
width:500px;
border-collapse: collapse;}

td#container {
display: block;
position: relative;

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;
}

tr.rows {
display: inherit;}

td.data {width: 100px;
border-top: 1px #636262 solid;
border-left: 1px #636262 solid;
border-right: 1px #636262 solid;
border-bottom: 0px;}

--
ironcorona

05-03-2006

Skeeve wrote:
> Yeah, and imagine if there were silver bullets like that in other areas
> of life?

Thanks, by the way, for the time you put in.

Hey, it's fun AND you get to learn things. Any time.

--
ironcorona

05-04-2006

Hi again,
Well, I'm still running into this problem every time I want to make
what is inside of a td absolutely positioned. The problem is that
adding display: block; detaches that td from the rest of the table and
then managing the rest of the table is as akward as managing a bunch of
divs in a pseudo-table and trying to get them to line up.

So, sorry to be bone-headed about this, but here it is again. I have
to use absolute positioning within only one or some TDs in a table and
not throw off the rest of the table, which display: block; seems to do.
So, either there's another way, or, there's a way of haiving block not
throw everything else off. I'm hoping one or the other.

Well, thanks again!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
swapping divs -- when divs NOT positioned absolutely..	maya	Javascript	4	11-16-2007 05:11 PM
Absolutely Positioned controls and tables	jonefer	ASP .Net Building Controls	0	08-23-2007 09:02 PM
vertically align absolutely positioned div elements	Guybrush Threepwood	HTML	1	12-14-2005 09:29 PM
flow content following absolutely-positioned panel	John A Grandy	ASP .Net	3	06-15-2004 12:04 PM
flow content following absolutely-positioned panel	John A Grandy	ASP .Net	0	06-14-2004 08:30 PM