This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > December 2005 > position: absolute and parent container
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
position: absolute and parent container
|
|
|
|
| Jim Moe 2005-12-19, 7:06 pm |
| alex wrote:
>
> 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?
>
Yes.
.... wait for it ...
Add position:relative to #rightcontainer.
position:absolute 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 2005-12-19, 7:07 pm |
| alex wrote:
> 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/go...-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
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
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Is there another word for synonym?
| |
|
| On Mon, 19 Dec 2005 Jim Moe <jmm-list.AXSPAMGN@sohnen-moe.com> wrote:
> Add position:relative to #rightcontainer.
> position:absolute 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.
>
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.
| |
|
| On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.net> wrote:
> alex wrote:
>
> 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.
>
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.
| |
|
|
| Jim Moe 2005-12-22, 3:31 am |
| alex wrote:
>
> 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%;
> }
>
Try using a margin-top instead of top.
>
> 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?
>
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)
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|