473,326 Members | 2,175 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

position: absolute and parent container

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
--
I must not fear. Fear is the mindkiller.
Fear is the little death that brings total obliteration.
Dec 19 '05 #1
6 7551
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)
Dec 19 '05 #2
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/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


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?
Dec 19 '05 #3
On Mon, 19 Dec 2005 Jim Moe <jm***************@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.
Dec 21 '05 #4
On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.net> wrote:
alex wrote:

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


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.
Dec 21 '05 #5
alex wrote:
On Mon, 19 Dec 2005 Ed Mullen <ed@edmullen.net> wrote:
alex wrote:
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

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?


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
Dec 22 '05 #6
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)
Dec 22 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Alexander Fischer | last post by:
Hello everybody, can someone help me with this problem: I'm creating a page with a sidebar, and I wanted to create the sidebar as a div which gets a "position:absolute". The problem: if the...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
2
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch...
3
by: moondaddy | last post by:
I'm trying to create my first user control and its function is to replace the use of a frames page. I want to position it under the pages header menus and to the right of the pages contents menus....
1
by: Rob R. Ainscough | last post by:
I'm at a new level of frustration just trying to get my controls to line up and stay in place. I'm using a MultiView containing 4 views - some views have Panels. I can't use absolution position...
4
by: i_dvlp | last post by:
What does a child element inherit as far as position, top, left, etc. ? I'm using DHTML to create child, and append with appendChild() I actually used "position:absolute" with a parent...
19
by: derelicten | last post by:
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of...
2
by: seigan | last post by:
Hi, I have a problem with a rather simple design. Inside a container div I want a rather slim collored box attached to right side inside the container div and I want it to be 100% height of the...
2
by: GTalbot | last post by:
Hello fellow comp.infosystems.www.authoring.stylesheets colleagues, Imagine this situation: #grand-parent-abs-pos { height: 400px; position: absolute; width: 600px; }
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.