position: absolute and parent container

**Jim Moe** · Dec 19 '05, 08:15 PM

Re: position: absolute and parent container

alex wrote:[color=blue]
>
> http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
>
> I'm using position: absolute and setting the width of
> the <span> to 100%. In Opera 8.51 & IE6, this is taken
> to mean 100% of the container div (which is 25% of the
> body, and floated right).
>
> In Firefox 1.5, however, it means 100% of the body. I
> could use an explicit width, but it turns a bit nasty in
> different resolutions. Before I abandon the idea altogether,
> Is there any was to make FF use the parent width as a marker
> when using absolute positioning?
>[/color]
Yes.

.... wait for it ...

Add position:relati ve to #rightcontainer .
position:absolu te positions itself relative to the closest parent block
that has a position: declaration. In your case this is <html> since no
other block has an explicit position: declaration.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

**Ed Mullen** · Dec 19 '05, 08:35 PM

Re: position: absolute and parent container

alex wrote:
[color=blue]
> I'm playing around with css popups a la
>
> http://www.meyerweb.com/eric/css/edge/popups/demo.html
>
> for here:
>
> http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
>
> (css)
> http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
> http://www.redbrick.dcu.ie/~alex/gol...courseinfo.css
>
> I'm using position: absolute and setting the width of
> the <span> to 100%. In Opera 8.51 & IE6, this is taken
> to mean 100% of the container div (which is 25% of the
> body, and floated right).
>
> In Firefox 1.5, however, it means 100% of the body. I
> could use an explicit width, but it turns a bit nasty in
> different resolutions. Before I abandon the idea altogether,
> Is there any was to make FF use the parent width as a marker
> when using absolute positioning?
>
> Cheers,
> Alex[/color]

Very clever design, Alex. Just FYI, I note that there's a problem when
I increase my browser's font display using Mozilla Suite or Firefox -
the popup will obscure the nav menu. Doesn't do that in Opera and IE.

--
Ed Mullen

ed mullen dot net

http://edmullen.net

Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

http://mozilla.edmullen.net

http://abington.edmullen.net

Is there another word for synonym?

**alex** · Dec 21 '05, 09:45 PM

Re: position: absolute and parent container

On Mon, 19 Dec 2005 Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:[color=blue]
> Add position:relati ve to #rightcontainer .
> position:absolu te positions itself relative to the closest parent block
> that has a position: declaration. In your case this is <html> since no
> other block has an explicit position: declaration.
>[/color]

Bingo! Thanks for clearing that up, never clearly
understood absolute and relative before.

Side note: I used a hack to get the top: xx%;
positioning correct like this:

/* The /**\/ in this block is to hide it from
IE6, but still displays in Firefox 1.5 */
#rightcontainer a:hover span {
<snip>
top: 100%;
top /**/: 180%;
<snip>
}

/* This hack seems to work the best for
Firefox 1.5-only selectors - reset the
top space to 100% - i.e., set it below the
existing links in the div */
body:last-child #rightcontainer a:hover span {
top: 100%;
}

Works grand, but what about the day when all new
browsers render CSS the same. Will this ever
happen, or do we just hack away?

--
I must not fear. Fear is the mindkiller.
Fear is the little death that brings total obliteration.

**alex** · Dec 21 '05, 09:55 PM

Re: position: absolute and parent container

On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.ne t> wrote:[color=blue]
> alex wrote:[color=green]
>>
>> http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
>>
>> (css)
>> http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
>> http://www.redbrick.dcu.ie/~alex/gol...courseinfo.css
>>[/color]
>
> Very clever design, Alex. Just FYI, I note that there's a problem when
> I increase my browser's font display using Mozilla Suite or Firefox -
> the popup will obscure the nav menu. Doesn't do that in Opera and IE.
>[/color]

Take another look, I think I've fixed it now. What version of
Firefox are you using?

--
I must not fear. Fear is the mindkiller.
Fear is the little death that brings total obliteration.

**Ed Mullen** · Dec 22 '05, 02:55 AM

Re: position: absolute and parent container

alex wrote:[color=blue]
> On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.ne t> wrote:[color=green]
>> alex wrote:[color=darkred]
>>> http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html
>>>
>>> (css)
>>> http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
>>> http://www.redbrick.dcu.ie/~alex/gol...courseinfo.css
>>>[/color]
>> Very clever design, Alex. Just FYI, I note that there's a problem when
>> I increase my browser's font display using Mozilla Suite or Firefox -
>> the popup will obscure the nav menu. Doesn't do that in Opera and IE.
>>[/color]
>
> Take another look, I think I've fixed it now. What version of
> Firefox are you using?
>[/color]

It is still on the demo page:

Pure CSS Popups

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Using FF 1.5, Mozilla 1.7.12, SeaMonkey 1.0 Beta all show the same
problem: http://edmullen.net/temp/cap2.jpg

Opera 8.5 does not have the problem.

--
Ed Mullen

ed mullen dot net

http://edmullen.net

Help for Mozilla, Firefox and SeaMonkey. Performances and original music.

http://mozilla.edmullen.net

http://abington.edmullen.net

**Jim Moe** · Dec 22 '05, 04:55 AM

Re: position: absolute and parent container

alex wrote:[color=blue]
>
> Side note: I used a hack to get the top: xx%;
> positioning correct like this:
>
> /* The /**\/ in this block is to hide it from
> IE6, but still displays in Firefox 1.5 */
> #rightcontainer a:hover span {
> top: 100%;
> top /**/: 180%;
> }
>[/color]
Try using a margin-top instead of top.[color=blue]
>
> Works grand, but what about the day when all new
> browsers render CSS the same. Will this ever
> happen, or do we just hack away?
>[/color]
ROTFL! IE6 will be with us for another 5 years before it can be
considered insignificant. Many (most?) people will not upgrade to IE7
until they buy a new computer which has Windows pre-loaded. And who knows
what joy IE7 will bring?
I do not know what the difference in display is that the hack works
around but I recommend looking for another way to do it that is browser
independent.

BTW: You need to specify a background color for either <html> or <body>.
Your site looks hokey with my default yellow background.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

position: absolute and parent container

position: absolute and parent container

Comment

Comment

Comment

Comment

Comment

Comment