Broken: absolutely positioned divs within a td in FF

S

subp

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

ironcorona

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.
Click to expand...

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

Martin Jay

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.
Click to expand...

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

Skeeve

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!
 
I

ironcorona

Martin said:
Sounds yuk!
Agreed.

What about adding:

display: block;
Click to expand...

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

:)
 
S

Skeeve

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

Skeeve

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!
 
I

ironcorona

Skeeve said:
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!
Click to expand...

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

ironcorona

Skeeve said:
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.
Click to expand...

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

Skeeve

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!
 
I

ironcorona

Skeeve said:
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.
Click to expand...

Is there any particular reason you need to change the positioning of
just 1 td? If you need to move them around the screen you can just
change the position of the entire table. If you want the boxes lined up
in a certain way then why don't you position some divs (though I
wouldn't recommend that. It won't work cross-browser).

When you use position it takes the element out of its normal place in
the flow of the page. Doing this to one td in the table effects the
entire table.
 
S

Skeeve

What I'm trying to do is place divs within table data elements with
absolute values in relation to the td container. The problem is, in
order to do that, you have to use position; relative (or other position
type) for the container. Otherwise, the objects contained within the
container will just ignore the container. The problem is that IE works
and FF doesn't. To make FF work, it was recommended that I use
display: block;. That works for that td, but breaks the rest of the
table.

So, maybe I'm just barking up the wrong tree with this design, and I
know I can solve all of this by using a div within the td, but I don't
like that because then I'm changing the markup to cater to the display,
which is generally bad.

Does that make sense?
 
I

ironcorona

Skeeve said:
What I'm trying to do is place divs within table data elements with
absolute values in relation to the td container. The problem is, in
order to do that, you have to use position; relative (or other position
type) for the container. Otherwise, the objects contained within the
container will just ignore the container. The problem is that IE works
and FF doesn't. To make FF work, it was recommended that I use
display: block;. That works for that td, but breaks the rest of the
table.

So, maybe I'm just barking up the wrong tree with this design, and I
know I can solve all of this by using a div within the td, but I don't
like that because then I'm changing the markup to cater to the display,
which is generally bad.

Does that make sense?
Click to expand...

Yes, it does. Did you see my post where I told you

"Take out the width:500px; from
td#container and add it into the overall table rules."

Did that work? It seemed to work in my borwsers.
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Hi there,
I've searched and can't find a solution.

I have a relatively positioned td
Click to expand...


The latest CSS 2.1 Working draft (in fact, all CSS 2.x technical
recommendation releases) strongly discourage the use of position on
table cells:

"The effect of 'position:relative' on (...) table-cell (...) elements is
undefined."
http://www.w3.org/TR/CSS21/visuren.html#propdef-position

"Note. Positioning and floating of table cells can cause them not to be
table cells anymore, according to the rules in section 9.7"
http://www.w3.org/TR/CSS21/tables.html#q7


and absolutely positioned DIVs within
it.
Click to expand...


Why make complex when you can do simple?

In IE, it works, but in FF it doesn't.
Click to expand...

Chances are: in IE, it's a layout bug but in FF it renders exactly what
your code demanded.

Here's my example code:
Click to expand...

How about an url instead?

HTML file:
<html><head><title>test</title><link rel="stylesheet" type="text/css"
href="test_css_positioning.css" />
Click to expand...

Is this XHTML or HTML? You use no doctype declaration.

<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;
}
Click to expand...

So far, we can establish for sure that the whole table, table rows and
table cells were not needed at all if you wanted to position something.
If the table (and table row, table cells) were needed, then using css
properties responsible for horizontal alignment was ok.

Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with Visual Lightbox: Scripts 2
Javascript DOM 1
Help with my responsive home page 2
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
SendGrid email issue in responsive Gmail 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 24 (members: 1, guests: 23)
Robots: 467

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top