[css-d] relative positioning
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
--
He who asks is a fool for five minutes, but he who does not ask remains
a fool forever. -- Old Chinese saying
Rick Pasotto[EMAIL PROTECTED]http://www.niof.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
According to my books position:relative is to give a point of reference to any
absolute positioned elements inside it. That's always been my understanding and
it's always worked.
CSS The Missing Manual says: Relative - A relatively placed element is placed
relative to its current position in the HTML flow. So for example, setting a
top value of 20px and a left value of 200px on a relatively positioned headline
moves the headline 20px down and 200px to the left from wherever it would
normally appear.
So if you've set a position say top and left the div will move, but
position:relative is not the reason, it's set for the benefit of other elements.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Rick Pasotto
To: css-d@lists.css-discuss.org
Sent: Wednesday, May 28, 2008 9:08 PM
Subject: [css-d] relative positioning
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
why does the element need this positioning? for z-index or something?
2008/5/28 Rick Pasotto [EMAIL PROTECTED]:
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
--
He who asks is a fool for five minutes, but he who does not ask remains
a fool forever. -- Old Chinese saying
Rick Pasotto[EMAIL PROTECTED]http://www.niof.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
On Wed, May 28, 2008 at 09:44:31PM +0100, Alan K Baker wrote:
According to my books position:relative is to give a point of
reference to any absolute positioned elements inside it. That's always
been my understanding and it's always worked.
CSS The Missing Manual says: Relative - A relatively placed element
is placed relative to its current position in the HTML flow. So for
example, setting a top value of 20px and a left value of 200px on a
relatively positioned headline moves the headline 20px down and 200px
to the left from wherever it would normally appear.
So if you've set a position say top and left the div will move, but
position:relative is not the reason, it's set for the benefit of other
elements.
Yes, that all matches my understanding. Goto this browsershots.org url:
http://browsershots.org/http://lpnc.us/donate.php
You'll see that IE7 gets it right while IE6 has some unexplainable
offset. It also works just fine in gecko browsers.
In trying to figure it out I removed all the styling from the form and
its fieldsets. All ok. Then I added just
fieldset { position: relative; }
and there was the crazy offset. It doesn't even seem to be related to
any other screen element.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Rick Pasotto
To: css-d@lists.css-discuss.org
Sent: Wednesday, May 28, 2008 9:08 PM
Subject: [css-d] relative positioning
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
If tyranny and oppression come to this land, it will be in the guise
of fighting a foreign enemy. -- James Madison
Rick Pasotto[EMAIL PROTECTED]http://www.niof.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
On Wed, May 28, 2008 at 04:47:41PM -0400, vincent pollard wrote:
why does the element need this positioning? for z-index or something?
It's a form and it's the fieldsets that have the positioning. I'm using
the techniques shown in http://www.sitepoint.com/article/fancy-form-design-css
2008/5/28 Rick Pasotto [EMAIL PROTECTED]:
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
--
Individuality is to be preserved and respected everywhere, as the root
of everything good. -- Jean Paul Richter, 1803
Rick Pasotto[EMAIL PROTECTED]http://www.niof.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Rick Pasotto
Sent: Wednesday, May 28, 2008 10:56 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] relative positioning
On Wed, May 28, 2008 at 09:44:31PM +0100, Alan K Baker wrote:
According to my books position:relative is to give a point of
reference to any absolute positioned elements inside it.
That's always
been my understanding and it's always worked.
CSS The Missing Manual says: Relative - A relatively
placed element
is placed relative to its current position in the HTML flow. So for
example, setting a top value of 20px and a left value of 200px on a
relatively positioned headline moves the headline 20px down
and 200px
to the left from wherever it would normally appear.
So if you've set a position say top and left the div will
move, but
position:relative is not the reason, it's set for the
benefit of other
elements.
Yes, that all matches my understanding. Goto this
browsershots.org url:
http://browsershots.org/http://lpnc.us/donate.php
You'll see that IE7 gets it right while IE6 has some
unexplainable offset. It also works just fine in gecko browsers.
In trying to figure it out I removed all the styling from the
form and its fieldsets. All ok. Then I added just
fieldset { position: relative; }
and there was the crazy offset. It doesn't even seem to be
related to any other screen element.
My guess is that IE6 has a different idea about just what it is
positioning the div relative to?
David Jones, Content Coordinator, Information and Technology Management,
Customer Relations - KL PS, (808) 948-5830
MMS hmsa.com made the following annotations.
--
This electronic message is not an offer to contract, the acceptance of an offer
to contract, or in any other way intended to contractually obligate HMSA;
neither is it intended to change the terms of any existing contract unless
specifically so stated.
The information contained in this electronic message (or attached hereto) is
intended only for the individual or entity to which it is addressed and may
contain information that is confidential and protected by law. If you are not
the intended recipient of this e-mail, you are cautioned that use of its
contents in any way is prohibited and may be unlawful. If you have received
this communication in error, please notify the sender immediately by e-mail or
telephone and return the original message by e-mail to the sender or to [EMAIL
PROTECTED] We will reimburse you for any cost you incur in notifying us of the
errant e-mail. Thank you. ·
==
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
Rick Pasotto wrote:
Is my understanding correct that putting:
div#name1 { position: relative; }
in the css file should have absolutely no effect on div id=name1?
If that is correct, why then does IE6 move the div? Does it make a
difference that the block I'm dealing with is a fieldset?
In some situations, position: relative, will cause rendering differences
in IE. This is sometimes an advantage, sometimes not-- and I am not sure
how your particular issue fits in the big puzzle...
Reference: http://www.satzansatz.de/cssd/onhavinglayout.html#rp
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
This may help explain some issues people have with IE and relative positioning on floated links: http://positioniseverything.net/explorer/ie-listbug.html Best of luck, Andy Vaughn Breakaway Web Design, LLC http://www.breakawaywd.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning
A thing that people should keep in mind is that position:relative is related to the stack order, not to the hasLayout property. Simply put, an element does _not_ disappear, but is actually covered by the parent/ancestor background. this happens also in other contexts. for example: 1. floats with negative horizontal margins 2. links with borders used as text-decoration 1. this is not a bug, but a limit in the current implementation. CSS 2.1 does _not_ define this kind of rendering so that these things can occur in some browsers. btw, the fact that this feature works in other browsers is a mere convention. see David Baron's Overuse of floats considered harmful 2. this is a bug. xxx ^.^ 2008/5/29 Andy Vaughn [EMAIL PROTECTED]: This may help explain some issues people have with IE and relative positioning on floated links: http://positioniseverything.net/explorer/ie-listbug.html Best of luck, Andy Vaughn Breakaway Web Design, LLC http://www.breakawaywd.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://www.css-zibaldone.com/ http://www.css-zibaldone.com/test/ (English) http://mimicry.css-zibaldone.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top?
Just to close this issue off, I can now report that the latest
working draft of the CSS 2.1 spec has actually solved the problem
I mentioned.
Compliant browsers should now support percentages on relative
positioning of an element even when the parent's size is dependent
on the element's size.
Though, this support is currently only available in IE but at least
Mozilla has a bug report for it.
Best regards
Mike
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf
Of fantasai
Sent: den 24 augusti 2007 09:11
To: Mike Wilson
Cc: [EMAIL PROTECTED]
Subject: Re: [CSS21] clarification needed for top and bottom property
Mike Wilson wrote:
Oh, I would be very happy if browsers actually did support the |top|
property in this scenario, but Gecko, Safari and Opera all behave the
same in this respect, ie ignoring it, which is striking when being
off-spec.
We also had a discussion over at css-discuss where arguments were
laid out why it had to be this way, correlating it to the (natural)
problems of doing the same with |height| property (that leads to
recursion).
Personally I think it would be possible to fix this for the |top|
property, but what do all the browser implementor experts out there
say?
And if the spec wants it to be possible, we may need a clarification
for that so there is no chance of misinterpretation :-).
The spec was actually changed so that percentages for top/bottom *do*
work. Behavior in this case was previously explicitly undefined:
http://www.w3.org/TR/CSS21/changes.html#q53
So that means at some point the browser implementors discussed it and
decided it should be possible. I guess it just hasn't been done yet. :)
~fantasai
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf
Of Mike Wilson
Sent: den 23 augusti 2007 16:41
To: [EMAIL PROTECTED]
Subject: [CSS21] clarification needed for top and bottom property
Consider the following example:
div style=position: absolute;
div style=position: relative; top: +50%; left: +50%;
Somebr
content
/div
/div
See also
http://inigent.se/test/test-top-percentage.html
with the two DIVs styled in color as:
div { border: 1px solid green; }
div div { border: 1px dotted red; }
DESCRIPTION OF EXAMPLE
The two DIVs' sizes will both be based on the size of Some
content and as the outer DIV is positioned it establishes a
positioning context. Following the spec, expectation is that
the inner DIV will be positioned down and right of the outer
DIV according to the specified percentages.
OUTCOME
In standard browsers only the right shift happens and the
|top| percentage setting is ignored.
(Notably, IE performs the shift in both directions).
CURRENT SPEC
There are probably good reasons why UAs have chosen to do like
this, but it cannot be deciphered from the current spec, see
text for |top| property in 9.3.2:
http://www.w3.org/TR/CSS21/visuren.html#propdef-top
Percentages: refer to height of containing block
...
The values for the four properties have the following
meanings:
...
percentage
The offset is a percentage of the containing block's width
(for 'left' or 'right') or height (for 'top' and 'bottom').
As can be seen there is no mention that percentage-based
positioning is ignored when the containing block's size is
dependent on the current element.
Contrast this with the |height| property which is also ignored
when assigned a percentage with a dependent containing block
in 10.5 (important part marked with *):
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Percentages: see prose
...
Values have the following meanings:
...
percentage
Specifies a percentage height. The percentage is calculated
with respect to the height of the generated box's
* containing block. If the height of the containing block is
* not specified explicitly (i.e., it depends on content
* height), and this element is not absolutely positioned, the
* value computes to 'auto'.
CLARIFICATION
So, if UAs are correct in honoring the |left| property but not
the |top| property in this example, this could be clarified in
9.3.2 by adding something like the following text to the
prose section:
percentage
The offset is a percentage of the containing block's width
(for 'left' or 'right') or height (for 'top' and 'bottom').
* If the height of the containing block is not specified
* explicitly (i.e., it depends on content height), and this
* element is not absolutely positioned, the value for 'top'
* and 'bottom' computes to 'auto'.
Best regards
Mike Wilson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by
Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top?
Oops, the phrasing should of course be: Compliant browsers should now support percentages on relative positioning of an element even when the *containing block's* size is dependent on the element's size. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike Wilson Sent: den 29 augusti 2007 09:26 To: 'CSS-D' Cc: 'Philippe Wittenbergh' Subject: Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top? Just to close this issue off, I can now report that the latest working draft of the CSS 2.1 spec has actually solved the problem I mentioned. Compliant browsers should now support percentages on relative positioning of an element even when the parent's size is dependent on the element's size. Though, this support is currently only available in IE but at least Mozilla has a bug report for it. Best regards Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positionedelement- why not percentage for top?
On May 11, 2007, at 2:51 AM, Mike Wilson wrote: But extending this reasoning to the offset properties, like left and top, seems unfair as they cannot cause any layout recursion. The child height and width may cause recursion as the parent element may base its own size on the child size, but the parent element will never base its own size on a child's offset. The specification is very clearly written for height percentages (10.5): If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. but I lack the corresponding text for top percentages (9.3.2) which are only specified as refer to height of containing block. But the % offset for 'top' cannot be computed in your case, as it depends on the height of the containing block, which is _basically_ unknown (it is 'auto'). So, could you comment if my reasoning below is plausible? : 1) The spec doesn't mention special handling of percentage offsets when the parent's size is dependent on child size. 2) Standard browser makers have made an educated guess that the spec's reasoning behind height/width should be extended to the offset properties (which is not implied by the spec). 3) When I set a top percentage the standard browser resets top to auto which is why I see no upwards shift. 4) When I set a left percentage the standard browser is free to do what it prefers as this is undefined and, as they probably reason the way I do above, can calculate the correct widths without risk of recursion and then use a percentage based on that, which is why I do see a left shift. I agree that the spec is a little under-defined in this case. Maybe you should take this up with the CSS WG? They might still include a clarification [1]. ref you point 2 above. I don't think the browser makers have made 'an educated guess' :-). For 'left' or 'right' offset, it is based ultimately on the shrink-to- fit algorithm for width, something that is defined [2]. For 'top' (and 'bottom'), height has no shrink-to-fit possibilities, and hence your top: 50% computes to '0'. [1] you can take it up via the mailing list http://lists.w3.org/Archives/Public/www-style/ [2] see towards the end of 10.3.7 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positioned element- why not percentage for top?
Hi Philippe, I have put a new test file on http://lahall.se/test/test-top-percentage.html How much offset for top do you actually expect ? Half (50%) of the DIV's height (both DIVs have the same height as the outer DIV adapts to the inner DIV's size). CSS 2.1, 9.3.2 Box offsets For 'top' quote Percentages: refer to height of containing block /quote But the height of the containing block [1] in this case depends on the element itself (the height is auto), which makes the whole thing pretty much undefined. The height of the outer DIV is calculated using the rules in 10.6.4 and 10.6.7 so it gets a size adapted to fitting its children. Looking at the green border indicates that this works correctly. Or are you saying that the height of the containing block used for positioning will be different from the calculated size of the actual element? This doesn't seem to be the case as the other, absolutely pos'd, child DIV finds bottom:0 nicely. Also, what is strange is that standard browsers do use the calculated width for the left: -50% shift. I would have been less surprised if none of the shifts had worked... Then, regarding the computed values for relative positioned boxes, 9.3.2 makes an explicit reference to 9.4.3 [2]. Result: unless the absolute positioned has a height explicitly declared, the rel. pos. box won't move. 9.4.3 mainly concerns the case when top hasn't been assigned a value (auto), right? The relative child has been assigned a top value (-50%) so the browser shouldn't have to find out a computed value in that sense? (Sorry if misunderstanding this) Anyway, I don't find how top and left are handled differently here either, so why left gives an effect, but not top, is still a mystery to me... of course, you could make the rel.pos. box an absolute positioned box, and solve the issue. Unfortunately not, as I need the inner DIV stay relative to have it control the size of the parent. The content presented inside the inner DIV could be of different sizes, and I want it to move halfway up and left. Then the outer DIV / containing block needs to be of the same (unknown) size which is accomplished by using a static or relative child. Many thanks for your input. I really hope we can make some sense out of this! Best regards Mike BTW: Just joining the list on Monday it seems my posts are not getting through to everybody (can't see my posts in the public archive). Is this normal? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positioned element- why not percentage for top?
[Forwarding Philippe's reply to the list]
On May 10, 2007, at 4:57 PM, Mike Wilson wrote:
Or are you saying that the height of the containing block used for
positioning will be different from the calculated size of the actual
element? This doesn't seem to be the case as the other, absolutely
pos'd, child DIV finds bottom:0 nicely.
Yes. The height of the parent div (containing block in this case) is
'auto'.
'height' refers to a declared value.
The computed size is a different matter in this case (actual,
calculated height).
The other child div behaves differently because it is _absolute_
positioned. Because for absolute positioned elements height can
always be resolved.
Percentage values for height and by extension offset ('top') are a
complicated matter. Basically, only absolute positioned element know
their 'height' based on the intrinsic values (computed).
10.5 states this quite clearly
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Similarly as with your 'top' offset, your relative positioned element
won't be able to calculate a height in percentage.
Width is different as it can always be resolved.
(although you might run into problems, depending on how various UA
will understand the shrinkwrapping of absolute positioned elements.
Your basic testcase works in current versions of most UA. If it
becomes more complicated - type of nested elements in your absolute
positioned div, you'll probably notice differences).
And if you use any other unit of measure (px, em, ex, ...) the
relative positioned element will move upwards, because that doesn't
depend on the height of the parent element.
IE Windows is a separate case, there you have the concept of
'hasLayout' rearing its ugly head.
http://www.satzansatz.de/cssd/onhavinglayout.html
BTW: Just joining the list on Monday it seems my posts are not
getting through to everybody (can't see my posts in the public
archive). Is this normal?
That I can't help. Your messages make it to the list.
Maybe you'll need to ask the list admin directly (the email address
should be listed in the welcoming email you received when you signed up.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positionedelement- why not percentage for top?
Thanks for your insights Philippe!
Or are you saying that the height of the containing block used for
positioning will be different from the calculated size of the actual
element? This doesn't seem to be the case as the other, absolutely
pos'd, child DIV finds bottom:0 nicely.
Yes. The height of the parent div (containing block in this case) is
'auto'.
'height' refers to a declared value.
The computed size is a different matter in this case (actual,
calculated height).
The other child div behaves differently because it is _absolute_
positioned. Because for absolute positioned elements height can
always be resolved.
Percentage values for height and by extension offset ('top') are a
complicated matter. Basically, only absolute positioned element know
their 'height' based on the intrinsic values (computed).
10.5 states this quite clearly
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Ok, looking at 10.5 (and 10.2) I find that when we have
parent.height = auto
parent.width = auto
relativechild.height = nn%
relativechild.width = nn%
then the CSS rules say that the child height should be reset to auto:
relativechild.height = auto
and the child width is undefined:
relativechild.width = undefined
I can clearly understand why, as a layout calculation would otherwise
easily lead to an endless recursion in the UA.
But extending this reasoning to the offset properties, like left and
top, seems unfair as they cannot cause any layout recursion. The child
height and width may cause recursion as the parent element may base its
own size on the child size, but the parent element will never base its
own size on a child's offset.
The specification is very clearly written for height percentages (10.5):
If the height of the containing block is not specified explicitly
(i.e., it depends on content height), and this element is not
absolutely positioned, the value computes to 'auto'.
but I lack the corresponding text for top percentages (9.3.2) which
are only specified as refer to height of containing block.
So, could you comment if my reasoning below is plausible? :
1) The spec doesn't mention special handling of percentage offsets when
the parent's size is dependent on child size.
2) Standard browser makers have made an educated guess that the spec's
reasoning behind height/width should be extended to the offset
properties (which is not implied by the spec).
3) When I set a top percentage the standard browser resets top to auto
which is why I see no upwards shift.
4) When I set a left percentage the standard browser is free to do what
it prefers as this is undefined and, as they probably reason the
way I do above, can calculate the correct widths without risk of
recursion and then use a percentage based on that, which is why I do
see a left shift.
And if you use any other unit of measure (px, em, ex, ...) the
relative positioned element will move upwards, because that doesn't
depend on the height of the parent element.
Yes, I have noticed this also. Too bad it is 50% of an unknown height
I need ;-).
Best regards
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning inside absolute positioned element - why not percentage for top?
On May 8, 2007, at 6:58 AM, Mike Wilson wrote: I have a problem with relative positioning, containing block, and percentages. I have an absolutely positioned outer DIV, and a relatively positioned inner DIV. My goal is to shift the inner DIV halfway to the left and up, using percentages. See code below: [...] My expectation is to see the text with the red border shifted both up and left from the green (outer) box. In standard browsers like Firefox and Opera I only get a shift sideways and not upwards, though in IE I get both directions. I have been trying to find support for the standard browsers' behaviour in the CSS spec, but have failed. Sections 9.3.2, 10.6.4 and 10.6.7 suggest, at least to me, that I should be getting the upwards shift with my layout. Can anybody point to something that explains this? Did I miss something in the spec or are both Firefox and Opera wrong (not likely) ? How much offset for top do you actually expect ? - CSS 2.1, 9.3.2 Box offsets For 'top' quote Percentages:refer to height of containing block /quote But the height of the containing block [1] in this case depends on the element itself (the height is auto), which makes the whole thing pretty much undefined. Then, regarding the computed values for relative positioned boxes, 9.3.2 makes an explicit reference to 9.4.3 [2]. Result: unless the absolute positioned has a height explicitly declared, the rel. pos. box won't move. of course, you could make the rel.pos. box an absolute positioned box, and solve the issue. [1] the absolute positioned div [2] http://www.w3.org/TR/CSS21/visuren.html#relative-positioning PS - Safari, Konqueror, iCab all do the same thing as Gecko and Opera. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relative positioning inside absolute positioned element - why not percentage for top?
I have a problem with relative positioning, containing block,
and percentages.
I have an absolutely positioned outer DIV, and a relatively
positioned inner DIV. My goal is to shift the inner DIV
halfway to the left and up, using percentages. See code
below:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
meta http-equiv=Content-Type
content=text/html; charset=ISO-8859-1
titletitle/title
style type=text/css
body { margin: 50px; }
div { border: 1px solid green; }
div div { border: 1px dotted red; }
/style
/head
body
div style=position: absolute;
div style=position: relative; top: -50%; left: -50%;
Some multi-br
line content
/div
/div
/body
/html
My expectation is to see the text with the red border
shifted both up and left from the green (outer) box. In
standard browsers like Firefox and Opera I only get a shift
sideways and not upwards, though in IE I get both
directions.
I have been trying to find support for the standard browsers'
behaviour in the CSS spec, but have failed. Sections 9.3.2,
10.6.4 and 10.6.7 suggest, at least to me, that I should be
getting the upwards shift with my layout.
Can anybody point to something that explains this? Did I miss
something in the spec or are both Firefox and Opera wrong
(not likely) ?
Best regards
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relative Positioning within Non-Absolutely Positioned DIV
How do I get an element (copyright statement in this instance) to always be positioned in the lower right hand corner of a DIV that is not absolutely positioned? In this instance my DIV starts right at the top of the page and the margin-left and margin-right are set to 'auto.' Check Out the new free AIM(R) Mail -- 2 GB of storage and industry-leading spam and email virus protection. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative Positioning within Non-Absolutely Positioned DIV
On 1/24/07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
How do I get an element (copyright statement in this instance) to always
be positioned in the lower right hand corner of a DIV that is not absolutely
positioned? In this instance my DIV starts right at the top of the page and
the margin-left and margin-right are set to 'auto.'
Check Out the new free AIM(R) Mail -- 2 GB of storage and industry-leading
spam and email virus protection.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
To relatively position an element within a div, simply assign it the
position: relative style, then adjust it's distances with respect to the
sides. So if you wanted something to be on the very bottom right, you would
give it bottom: 0 and right: 0 styles, meaning that it's bottom border is
0px away from it's parent's bottom border element and 0px away from the
right border. I'm not 100% sure as I haven't implemented this exactly
myself, but you may also have to float the element as well.
Although honestly, there are much easier methods of doing this. One such way
would be to simply add the following code to the bottom of the div:
p class=copyrightCopyright Statement/p
then simply assign the following css style:
p .copyright { align: right; }
That's a much easier and more reliable way of position something on the
bottom right of a div. If you can, I'd go with that method instead.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relative positioning / z-index / render order--?
http://fbc.walknorth.com
Ok the div's are ordered like this in the html.
=
div id=menu_container
div id=menu_leftpmenu_left/p/div
div id=menu_rightpmenu_right/p/div
div id=menu_centerpmenu_center/p/div
/div
=
the css looks like this:
=
#menu_container {
position: static;
float: left;
width: 30%;
}
#menu_left {
position: relative;
float: left;
width: 50%;
height:250px;
background: red;
z-index: 1;
}
#menu_right {
position: relative;
float: right;
width: 50%;
height: 250px;
background: blue;
z-index: 3;
}
#menu_center {
position: relative;
float: left;
bottom:145px;
left: 40%;
width: 15%;
height: 200px;
background: black;
z-index: 2;
}
=
my question is...when 'menu_center' appears third in the markup [html]
it renders correctly. when it renders second [if i put it between
'menu_left' and 'menu_right'] 'menu_center' then shifts to the upper
right hand corner of 'menu_container'. I understand why- it's being
positioned relative to where it would have been had 'menu_right' not
been there (because 'menu_right' hasn't rendered yet). and consequently
'menu_right' is then pushed down beneath 'menu_center'.
why does 'menu_right' get pushed down if all three are on different
z-index's? if 'right' is on a different z-index why is it pushed down?
shouldn't it render as if on it's own z?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative Positioning / Floats and Document Flow
Jason Manaigre wrote: http://test.iisd.org/revamp/ The issue is with the 'Our Knowledge' link it turns on a hidden div using JavaScript. The problem is, it takes up all space in the regular document flow, which is no good. I just want it to float. You're using visibility: hidden to hide the div, which makes it invisible, but still lets it take up space. Use display: none instead. However, you set it to display by default and use JavaScript on page load that hides it. This way, if someone has JavaScript disabled, they still can access the content. For information about how to do this, please turn to a general web development list, such as one of the ones listed here: http://css-discuss.incutio.com/?page=OffTopic Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative Positioning / Floats and Document Flow
Hi Zoe, thanks for the info, works great BUT when the menu is clicked on, the hidden div opens, but pushes down the content, I want this window to simply float above the main content.. Any ideas? You're using visibility: hidden to hide the div, which makes it invisible, but still lets it take up space. Use display: none instead. However, you set it to display by default and use JavaScript on page load that hides it. This way, if someone has JavaScript disabled, they still can access the content. For information about how to do this, please turn to a general web development list, such as one of the ones listed here: http://css-discuss.incutio.com/?page=OffTopic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative Positioning / Floats and Document Flow
Jason Manaigre wrote: regarding http://test.iisd.org/revamp2/ Hi Zoe, thanks for the info, works great BUT when the menu is clicked on, the hidden div opens, but pushes down the content, I want this window to simply float above the main content.. Any ideas? Float moves content to the left or right. It doesn't layer content over other content. Absolute positioning does. So, I suggest you modify your script so that it sets the div to absolute positioning and pushes it off the left side of the screen with a large negative left margin. The, when the button is clicked, the script changes that left margin to a positive number that will position it where you want it on the screen. Again, see another list for information on how to make this JavaScript work. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relative Positioning / Floats and Document Flow
Hi everyone, I've got a bit of funk on my hands. http://test.iisd.org/revamp/ The issue is with the 'Our Knowledge' link it turns on a hidden div using JavaScript. The problem is, it takes up all space in the regular document flow, which is no good. I just want it to float. I wanted to use relative positioning so that when the browser resizes, the div is in the proper location. Which isn't the case with an absolutely positions div. Any ideas people? The CSS file is here http://test.iisd.org/revamp/main.css I gata be doing something dumb here... Thanks for any info. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning and widths
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ed Seehouse Sent: Friday, 16 June 2006 3:08 AM To: Brendan Grossman Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Relative positioning and widths On 6/14/06, Brendan Grossman [EMAIL PROTECTED] wrote: Hi everyone Is it possible to have floating divs side-by-side without the width specified or with just one set explicitly? Yes. For example I have two columns... Left hand side I want to set explicity, ie. 15em Right hand side, I want it to fill up the remaining area of the page. However when doing this, the right drops below the left div. That's because you are floating both columns. You only need to float the left column. For the right column just use the natural flow of your browser's default behaviour. Simply give it a left margin slightly wider than the width of your left column. Presto! A block element such as p or div that isn't floated or positioned takes up the full width of the screen by default, so all you need to do is make room on the left with your margin rule. Works equally well for a right column, just do it the other way around. Either way your floated element should come first in your html code. Generally, you save yourself a whole lot of trouble if you use the default behaviour of your browser for layout as much as possible, then use a smidgin of positioning on a couple of elements to make the effect you want. It's amazing what effects you can attain with very simple means this way. That does just about what I need. However divs within the right containing div don't 'stretch' it down. Is there a way around this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning and widths
Brendan Grossman wrote:
Here's sample code I'm using...
#left {
float: left;
width: 15em;
}
#right {
float: left;
}
div id=left/div
div id=right/div !-- drops below left div --
This sample code does not drop in Firefox.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning and widths
On Jun 15, 2006, at 1:44 PM, Brendan Grossman wrote:
Is it possible to have floating divs side-by-side without the width
specified or with just one set explicitly?
For example I have two columns...
Left hand side I want to set explicity, ie. 15em
Right hand side, I want it to fill up the remaining area of the page.
However when doing this, the right drops below the left div.
Here's sample code I'm using...
#left {
float: left;
width: 15em;
}
#right {
float: left;
}
div id=left/div
div id=right/div !-- drops below left div --
That is problematic.
What is the content in div id=right ?
when no width is specified, the width of that div *may* shrink wrap
to the width of the content. Or *may* expand to the full width of the
parent box. Depending on the contents
And not all UA will work the same.
This is a nice technique to achieve, what I think is what you try to do:
http://www.alistapart.com/articles/negativemargins/
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning and widths
On 6/14/06, Brendan Grossman [EMAIL PROTECTED] wrote: Hi everyone Is it possible to have floating divs side-by-side without the width specified or with just one set explicitly? Yes. For example I have two columns... Left hand side I want to set explicity, ie. 15em Right hand side, I want it to fill up the remaining area of the page. However when doing this, the right drops below the left div. That's because you are floating both columns. You only need to float the left column. For the right column just use the natural flow of your browser's default behaviour. Simply give it a left margin slightly wider than the width of your left column. Presto! A block element such as p or div that isn't floated or positioned takes up the full width of the screen by default, so all you need to do is make room on the left with your margin rule. Works equally well for a right column, just do it the other way around. Either way your floated element should come first in your html code. Generally, you save yourself a whole lot of trouble if you use the default behaviour of your browser for layout as much as possible, then use a smidgin of positioning on a couple of elements to make the effect you want. It's amazing what effects you can attain with very simple means this way. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relative positioning and widths
Hi everyone
Is it possible to have floating divs side-by-side without the width
specified or with just one set explicitly?
For example I have two columns...
Left hand side I want to set explicity, ie. 15em
Right hand side, I want it to fill up the remaining area of the page.
However when doing this, the right drops below the left div.
Here's sample code I'm using...
#left {
float: left;
width: 15em;
}
#right {
float: left;
}
div id=left/div
div id=right/div !-- drops below left div --
Is there a way around what I'm trying to do?
Cheers
Brendan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] relative positioning creates horizontal scroll in Firefox
Essentially, I'm attempting to position non-background graphics outside of a page's main content area (in the right and left 'margins'), but trying to avoid having them call up scrollbars. What I've done is attach these graphics to (that is, enclose them in the div of) absolutely positioned 'modules' placed within the main content area -- and then moved the graphics 'offscreen' to the right and left using relative positioning. My understanding was that relatively positioned elements moved outside the main content area this way would not create a horizontal scrollbar (that didn't otherwise exist). In fact, IE6 and Safari both work this way, hiding the relatively positioned elements in the 'margin' area as the browser window is narrowed, and only creating a horizontal scrollbar when the window is narrower than the main content div. However, Firefox creates scrollbars as soon as the window is narrowed to the right edge of the graphics now rendered in the right 'margin'. I know that with absolutely positioned content, elements moved 'offscreen' to the right and downward will create scrollbars. But I thought relatively positioned content would be considered by the browser to still be in its original (non-relatively-positioned) location. Why does Firefox not see it this way? Is there any way to achieve the desired effect using other positioning techniques? I don't want to put the images into the background, since then they'll get cut off in unfortunate places depending upon page content height. Any thought, references, avenues of inquiry, etc. would be hugely appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] relative positioning creates horizontal scroll in Firefox
Your best bet would be to use absolute positioning and top/right/bottom/left to specify. Example: img src=image style=position: absolute; bottom: 0; right: 0; / -- this will put the image on the bottom right hand side of the page, and still scroll. Or you can try this img src=image style=position: fixed; bottom: 0; right: 0; / -- this will put the image on the bottom right hand side of the page, and it still stay in position even if someone scrolls. If that was too vague, try this: http://www.alistapart.com/articles/flexiblelayouts Could also be helpful if you throw the link to the site so we can all see what code you are using. (instead of us having to guess) Thank you! Neill Harmer [EMAIL PROTECTED] Back40 Design, Inc. p. 405/478-4080 f. 405/478-0419 Innovation distinguishes between being a leader and a follower. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Thursday, February 09, 2006 2:20 PM To: css-d@lists.css-discuss.org Subject: [css-d] relative positioning creates horizontal scroll in Firefox Essentially, I'm attempting to position non-background graphics outside of a page's main content area (in the right and left 'margins'), but trying to avoid having them call up scrollbars. What I've done is attach these graphics to (that is, enclose them in the div of) absolutely positioned 'modules' placed within the main content area -- and then moved the graphics 'offscreen' to the right and left using relative positioning. My understanding was that relatively positioned elements moved outside the main content area this way would not create a horizontal scrollbar (that didn't otherwise exist). In fact, IE6 and Safari both work this way, hiding the relatively positioned elements in the 'margin' area as the browser window is narrowed, and only creating a horizontal scrollbar when the window is narrower than the main content div. However, Firefox creates scrollbars as soon as the window is narrowed to the right edge of the graphics now rendered in the right 'margin'. I know that with absolutely positioned content, elements moved 'offscreen' to the right and downward will create scrollbars. But I thought relatively positioned content would be considered by the browser to still be in its original (non-relatively-positioned) location. Why does Firefox not see it this way? Is there any way to achieve the desired effect using other positioning techniques? I don't want to put the images into the background, since then they'll get cut off in unfortunate places depending upon page content height. Any thought, references, avenues of inquiry, etc. would be hugely appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning/collapsing margins (?) and 100% height
Bruce, On Feb 7, 2006, at 2:53 AM, Bruce MacKay wrote: I'm seeking help on two problems: positioning of material within a wrapper and achieving 100% height in pages with short content. The following pages ... In both, I'm having problems in positioning the content to start 10-20 px below the navigation div. http://temporarius.massey.ac.nz/menu1.htm Floated elements are taken out of the document 'flow.' Statically positioned elements will flow under the floats even thought the text inside those elements won't. In your case, adding clear: left; to #content will fix this. The second issue is how to I make the page fill the vertical space of the screen when the amount of material in the content div is short. This comes up a lot. In the projects I've done it has always turned out to be a red herring. By the time the project was finished, every page had so much content that the footer was out of view below the window. All the work to make the footer stick to the bottom on short pages was a waste of time. If you _really_ need it, make html, body and #wrapper have a min-height: 100%; and add position: relative; to #wrapper. That way you can absolutely position the footer at bottom: 0; Clear as mud! Fortunately, there are a number of examples of this to learn from. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relative positioning/collapsing margins (?) and 100% height
Hello all, I'm seeking help on two problems: positioning of material within a wrapper and achieving 100% height in pages with short content. The following pages (with embedded css) differ only in the presence of a sub-navigation element. In both, I'm having problems in positioning the content to start 10-20 px below the navigation div. http://temporarius.massey.ac.nz/menu1.htm http://temporarius.massey.ac.nz/menu2.htm In Firefox and Opera, the content starts hard up against the bottom of the navigation div. It seems that the only way to achieve control of where the content starts is to place a 60-80px top margin in the content div - but this doesn't make sense to me as the top of the content div seems to be being measured from the bottom of the logo div, not the navigation div. In IE, things seem better - the top of the content div (top margin = red) appears where I expect it to be relative to the bottom of the navigation div in menu2.htm, but not in menu1.htm. I don't understand what's going on and consequently cannot work out the fix needed. Any guidance please? The second issue is how to I make the page fill the vertical space of the screen when the amount of material in the content div is short. Thanks in advance, Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Relative Positioning
Hi all,
I've really been struggling with this. Trying to have a large flash menu
layered atop other content on a page. I've been able to successfully
z-index it so the drop down menus appear over top of other content at a
lower z-index, but I can't get the menu centered left to right in relation
to the clientName ID just above it. Below is the CSS and HTML affected.
/* CSS */
/* Horizontal Menu Layout */
#clientName {font:normal normal bolder 18px Arial, Helvetica, sans-serif;
color:#99; text-align:center; border:solid 1px #99;
width: 100%; background-color: #f5f5f5; margin-bottom: 10px;
padding:3px 0 1px 0; z-index:1;}
#horizMenuLayer {position: relative; text-align: center;}
!--- HTML ---
cfoutput
div id=clientName
div align=center#SESSION.companyInfo.companyNameAlias# span
class=grey-dkHOME COMPONENTS ADMINISTRATION/span/div
div align=center
div id=horizMenuLayer
div id=Layer1 style=position:absolute; width:400px; height:220px;
top:3px; z-index:10
!-- saved from url=(0013)about:internet --
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab##version=7,0,0,0 width=400 height=220 id=ghostMenu
align=middle
param name=allowScriptAccess value=sameDomain /
param name=movie value=#REQUEST.webroot#/cf-inf/menus/ghostMenu.swf
/
param name=loop value=false /
param name=quality value=high /
param name=wmode value=transparent /
embed src=#REQUEST.webroot#/cf-inf/menus/ghostMenu.swf loop=false
quality=high wmode=transparent width=400 height=220 name=ghostMenu
align=middle allowScriptAccess=sameDomain
type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/div
/div
/div
/div
/cfoutput
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Relative Positioning
Here's the link:
http://admin.evokenet.com/homeComponents/main.cfm
-Original Message-
From: jeremy [mailto:[EMAIL PROTECTED]
Sent: Thursday, June 30, 2005 10:08 AM
To: Mark Leder; css list
Subject: Re: [css-d] Relative Positioning
do you have a link to the site?
Mark Leder wrote:
Hi all,
I've really been struggling with this. Trying to have a large flash
menu layered atop other content on a page. I've been able to
successfully z-index it so the drop down menus appear over top of other
content at a lower z-index, but I can't get the menu centered left to
right in relation to the clientName ID just above it. Below is the CSS
and HTML affected.
/* CSS */
/* Horizontal Menu Layout */
#clientName {font:normal normal bolder 18px Arial, Helvetica, sans-serif;
color:#99; text-align:center; border:solid 1px #99;
width: 100%; background-color: #f5f5f5; margin-bottom: 10px;
padding:3px 0 1px 0; z-index:1;}
#horizMenuLayer {position: relative; text-align: center;}
!--- HTML ---
cfoutput
div id=clientName
div align=center#SESSION.companyInfo.companyNameAlias# span
class=grey-dkHOME COMPONENTS ADMINISTRATION/span/div
div align=center
div id=horizMenuLayer
div id=Layer1 style=position:absolute; width:400px;
height:220px; top:3px; z-index:10
!-- saved from url=(0013)about:internet --
object classid=clsid:d27cdb6e-ae6d-11cf-96b8-44455354
codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash
.
cab##version=7,0,0,0 width=400 height=220 id=ghostMenu
align=middle
param name=allowScriptAccess value=sameDomain /
param name=movie
value=#REQUEST.webroot#/cf-inf/menus/ghostMenu.swf
/
param name=loop value=false /
param name=quality value=high /
param name=wmode value=transparent /
embed src=#REQUEST.webroot#/cf-inf/menus/ghostMenu.swf loop=false
quality=high wmode=transparent width=400 height=220
name=ghostMenu
align=middle allowScriptAccess=sameDomain
type=application/x-shockwave-flash
pluginspage=http://www.macromedia.com/go/getflashplayer; /
/object
/div
/div
/div
/div
/cfoutput
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org
-- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Relative Positioning
From: Mark Leder [EMAIL PROTECTED]
http://admin.evokenet.com/homeComponents/main.cfm
I can't get the menu centered left to
right in relation to the clientName ID just above it.
Try -
#Layer1 {
position: absolute;
top: 3px;
left: 50%; /* default left value when not specified is 0. 50% (or center)
should move the left edge of the menu half way across the available space. */
margin-left: -200px; /* since the width is set, this should 'drag' the menu
back to the left one half of its width, thus centering it. */
width: 400px;
height: 220px;
z-index: 10;
}
hope that helps,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative Positioning
On 6/30/05, Mark Leder [EMAIL PROTECTED] wrote: Thanks, that worked in Firefox, still shoved to the right on IE6. I'm looking for a hack to solve that one. I know this will sound silly...but is IE6 in quirks mode? You have to be careful about your doctype at the top of the page, or it will behave similarly to IE5 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
