Position absolute and z-index query

K

KiwiBrian

In the following page I want to place the graphic of the golf-ball in the
right-hand cell of a single row 2 column table.
I want to be able to superimpose text over it.
What method should I have used?
The page shows my attempt to absolutely position the image.
I gather that the enclosing cell or table needs to be relatively positioned
to support the use of z-index.
The page displays as I expect in IE7 but in FF I am unable to get the image
to recognize the table, or cell, even when they are retively positioned, as
an enclosing element.
I would welcome advice regarding the problem, and/or how I should have
accomplished my objective.
http://homepages.ihug.co.nz/~briantoz/index.html
 
R

rf

KiwiBrian said:
In the following page I want to place the graphic of the golf-ball in the
right-hand cell of a single row 2 column table.
I want to be able to superimpose text over it.
What method should I have used?
The page shows my attempt to absolutely position the image.
I gather that the enclosing cell or table needs to be relatively
positioned to support the use of z-index.
The page displays as I expect in IE7 but in FF I am unable to get the
image to recognize the table, or cell, even when they are retively
positioned, as an enclosing element.
I would welcome advice regarding the problem, and/or how I should have
accomplished my objective.
http://homepages.ihug.co.nz/~briantoz/index.html
Click to expand...

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

"Position: relative on ..., table-cell, ... is undefined.

So, position: relative on that cell does *not* establish a new containing
block so your positioning of the golf ball is relative to the <body>. Of
course IE is getting this wrong :)

Put everything inside that div, relatively position the div and absolutetly
position the golf ball inside the div.

BTW why do you specify a font size that is less that two thirds of my
prefered font size?
 
K

KiwiBrian

rf said:
http://www.w3.org/TR/CSS21/visuren.html#propdef-position

"Position: relative on ..., table-cell, ... is undefined.

So, position: relative on that cell does *not* establish a new containing
block so your positioning of the golf ball is relative to the <body>. Of
course IE is getting this wrong :)

Put everything inside that div, relatively position the div and
absolutetly position the golf ball inside the div.
Click to expand...

Marvelous.
Richard to the rescue again.
Don't leave town.
 
D

dorayme

"KiwiBrian said:
Marvelous.
Richard to the rescue again.
Don't leave town.
Click to expand...

Be careful. He knows some of the best NZ jokes and you might not
like them.
 
B

Ben C

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

"Position: relative on ..., table-cell, ... is undefined.

So, position: relative on that cell does *not* establish a new containing
block so your positioning of the golf ball is relative to the <body>. Of
course IE is getting this wrong :)
Click to expand...

It's not wrong. The effect of position: relative on table-cell is
undefined, so if IE allows it to establish a containing block for
positioned descendents, that's also correct.

In fact I'm with IE on this one. A reasonable browser would not allow
table-cells to actually have relative offsets, but would let them be
positioned containing blocks.

After all even inline boxes are supposed to be able to be positioned
containing blocks, which is mad since they break across lines and can
end up with their right edges to the left of their left edges.

Furthermore if you look at the definition of containing block (in
9.1.2), it says, "the nearest ancestor with a position of absolute,
relative or fixed".

The position property does apply to table-cells, it applies to all
elements. So then you have to ask is establishing a containing block for
positioned descendents strictly an _effect_ of that element? Or just a
fact about it?

It's slightly ambiguous but reading 9.1.2 there's no real excuse for not
allowing table-cells to be containing blocks.
 

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

Z-Index/Drop-down menu issues 2
z-index query 10
How to position the *tooltip* comment on these buttons? 9
JS querySelector addEventListenerer index getElementsByClassName parent div only 1
Position absolute different in different browsers 9
Position absolute not always removed from flow? 8
CSS z-index query 2
Z-Index not working correctly 0

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 379

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top