Discussion:
Absolute positioned children in relative positioned table cell
(too old to reply)
Gordon
2009-04-15 11:45:55 UTC
Permalink
I'm revamping the user interface of our CMS and want to put the
controls for sorting content in its own column. My design entails
having an up arrow at the top of the cell and a down arrow at the
bottom. The rows can vary in height, which complicates things
somewhat.

My first thought was to set the cell that contains the up and down
arrows position: relative and then set the arrow graphics themselves
position: absolute with the top set to 0 for the up arrow and the the
bottom set to 0 for the down arrow. I was expecting I'd run into some
trouble in IE, but ironically it turns out that IE is the only browser
that this functions in as I had expected it to.

I suspect I'm doing something really dumb, but whatever it is that's
wrong just isn't jumping out at me. If anyone else can spot it, or
suggest another approach that'll work cross-browser (including IE6 :
( ), I'd appreciate any help you can offer.

I've built a mockup at http://library.merus.co.uk/newbrowser.html
dorayme
2009-04-15 21:25:16 UTC
Permalink
In article
Post by Gordon
My design entails
having an up arrow at the top of the cell and a down arrow at the
bottom.
I've built a mockup at http://library.merus.co.uk/newbrowser.html
Where are these up and down arrows (apart from the two up arrows top
left and bottom right of page) and what do they do? Your example does
not seem to show what your text in your post is saying?
--
dorayme
Gordon
2009-04-16 08:05:07 UTC
Permalink
Post by dorayme
In article
Post by Gordon
My design entails
having an up arrow at the top of the cell and a down arrow at the
bottom.  
I've built a mockup athttp://library.merus.co.uk/newbrowser.html
Where are these up and down arrows (apart from the two up arrows top
left and bottom right of page) and what do they do? Your example does
not seem to show what your text in your post is saying?
--
dorayme
Look at the same page in Internet Explorer and the arrows will be
positioned where I want them to go. The arrows will be for sorting
items up and down when clicked (but as I'm asking about layout rather
than function that's not really relevant).
dorayme
2009-04-16 08:09:20 UTC
Permalink
In article
Post by Gordon
Post by dorayme
In article
Post by Gordon
My design entails
having an up arrow at the top of the cell and a down arrow at the
bottom.  
I've built a mockup athttp://library.merus.co.uk/newbrowser.html
Where are these up and down arrows (apart from the two up arrows top
left and bottom right of page) and what do they do? Your example does
not seem to show what your text in your post is saying?
--
dorayme
Look at the same page in Internet Explorer and the arrows will be
positioned where I want them to go. The arrows will be for sorting
items up and down when clicked (but as I'm asking about layout rather
than function that's not really relevant).
Don't naturally have Win IE and have to make special effort. I did not
see the thread in another newsgroup where I see you are in competent
hands. But, honest, if you were in the lurch I would have turned on my
winbox... <g>
--
dorayme
Gordon
2009-04-16 13:08:50 UTC
Permalink
Post by dorayme
In article
Post by Gordon
Post by dorayme
In article
Post by Gordon
My design entails
having an up arrow at the top of the cell and a down arrow at the
bottom.  
I've built a mockup athttp://library.merus.co.uk/newbrowser.html
Where are these up and down arrows (apart from the two up arrows top
left and bottom right of page) and what do they do? Your example does
not seem to show what your text in your post is saying?
--
dorayme
Look at the same page in Internet Explorer and the arrows will be
positioned where I want them to go.  The arrows will be for sorting
items up and down when clicked (but as I'm asking about layout rather
than function that's not really relevant).
Don't naturally have Win IE and have to make special effort. I did not
see the thread in another newsgroup where I see you are in competent
hands. But, honest, if you were in the lurch I would have turned on my
winbox... <g>
--
dorayme
Okay, thanks for the help anyway.

Looks like the problem is a table isn't a block, even though it has
many block-like attributes, one it can't have is position. This means
position:relative is meaningless. IE seems to respect it but nothing
else does.
dorayme
2009-04-16 22:28:47 UTC
Permalink
In article
...
Post by Gordon
Post by dorayme
Don't naturally have Win IE and have to make special effort. I did not
see the thread in another newsgroup where I see you are in competent
hands. But, honest, if you were in the lurch I would have turned on my
winbox... <g>
Okay, thanks for the help anyway.
Looks like the problem is a table isn't a block, even though it has
many block-like attributes, one it can't have is position. This means
position:relative is meaningless. IE seems to respect it but nothing
else does.
<table> can have position. Perhaps you are referring to funny business
with <td>s.

In non-IE browsers at least, setting table to be either absolute or
relative does make it behave like a DIV in respect to being able to
position images inside absolutely. But not in respect to cells, that
*is* a problem!
--
dorayme
Gordon
2009-04-17 07:53:24 UTC
Permalink
Post by dorayme
In article
...
Post by Gordon
Post by dorayme
Don't naturally have Win IE and have to make special effort. I did not
see the thread in another newsgroup where I see you are in competent
hands. But, honest, if you were in the lurch I would have turned on my
winbox... <g>
Okay, thanks for the help anyway.
Looks like the problem is a table isn't a block, even though it has
many block-like attributes, one it can't have is position.  This means
position:relative is meaningless.  IE seems to respect it but nothing
else does.
<table> can have position. Perhaps you are referring to funny business
with <td>s.
In non-IE browsers at least, setting table to be either absolute or
relative does make it behave like a DIV in respect to being able to
position images inside absolutely. But not in respect to cells, that
*is* a problem!
--
dorayme
Yeah, sorry, when I typed Table I meant Table child elements.

Continue reading on narkive:
Loading...