Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

position: absolute and parent container
 

alex




quote this post edit post

IP Loged report this post
Old Post  12-20-05 - 12:06 AM   
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
--
I must not fear. Fear is the mindkiller.
Fear is the little death that brings total obliteration.


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

Jim Moe




quote this post edit post

IP Loged report this post
Old Post  12-20-05 - 12:06 AM   
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)


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

Ed Mullen




quote this post edit post

IP Loged report this post
Old Post  12-20-05 - 12:07 AM   
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?


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

alex




quote this post edit post

IP Loged report this post
Old Post  12-21-05 - 11:46 PM   
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.


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

alex




quote this post edit post

IP Loged report this post
Old Post  12-21-05 - 11:46 PM   
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.


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

Ed Mullen




quote this post edit post

IP Loged report this post
Old Post  12-22-05 - 03:30 AM   
alex wrote:
> On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.net> wrote: 
>
> Take another look, I think I've fixed it now. What version of
> Firefox are you using?
>

It is still on the demo page:
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
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net


[  Post Follow-Up to this message ]
Re: position: absolute and parent container
 

Jim Moe




quote this post edit post

IP Loged report this post
Old Post  12-22-05 - 08: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)


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 04:01 PM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top