[css-d] Going Crazy with Z-Index Bug
I'm trying to work through the IE7 z-index bug, where I have set up the blog posts to enlarge when hovered over. Works in FF, Safari, Chrome, Opera, and IE 8. In IE7, or IE 8 in Compatibility mode, using IE7 standards, the posts go behind the sidebar, although the z-index is higher. (In IE6, since hover is not available to divs, I haven't dealt with it, but if I can work through the fix for IE7, I understand that there is a JavaScript that can create the functionality in IE6.) I've tried reordering the divs, but can't find the magic bullet. The hierarchy is: body #outer-wrapper (relative) #header-wrapper #header-image #header #content-wrapper #main-wrapper #main (posts) #footer-wrapper #sidebar-wrapper #sidebar2-wrapper The test blog is at http://testlloyd.blogspot.com The working CSS is at: http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE7.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE6.css Thanks in advance for any assistance. -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [cs...@lists.css-discuss.org] 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] Going Crazy with Z-Index Bug
To clarify further, element that is intend to enlarge and go in front is #content-wrapper #main-wrapper #main #post-outer #post-main:hover and the z-index offender in IE7 is #content-wrapper #sidebar Rick Gordon -- On 5/24/10 at 3:34 AM -0700, Rick Gordon wrote in a message entitled [css-d] Going Crazy with Z-Index Bug: I'm trying to work through the IE7 z-index bug, where I have set up the blog posts to enlarge when hovered over. Works in FF, Safari, Chrome, Opera, and IE 8. In IE7, or IE 8 in Compatibility mode, using IE7 standards, the posts go behind the sidebar, although the z-index is higher. (In IE6, since hover is not available to divs, I haven't dealt with it, but if I can work through the fix for IE7, I understand that there is a JavaScript that can create the functionality in IE6.) I've tried reordering the divs, but can't find the magic bullet. The hierarchy is: body #outer-wrapper (relative) #header-wrapper #header-image #header #content-wrapper #main-wrapper #main (posts) #footer-wrapper #sidebar-wrapper #sidebar2-wrapper The test blog is at http://testlloyd.blogspot.com The working CSS is at: http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE7.css http://www.shelterpub.com/_blog/LloydsBlogLayoutStyles-IE6.css Thanks in advance for any assistance. -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [cs...@lists.css-discuss.org] 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/ -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.com __ css-discuss [cs...@lists.css-discuss.org] 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] Going Crazy with Z-Index Bug
Rick Gordon wrote:
I'm trying to work through the IE7 z-index bug, where I have set up the blog
posts to enlarge when hovered over. Works in FF, Safari, Chrome, Opera, and
IE 8.
RE: ttp://testlloyd.blogspot.com/
Rick,
Please see http://chelseacreekstudio.com/ca/cssd/lk.htm
Seems to work this end in IETester IE/7.0 on Mac OS X 10.4.
Whether it will do so on your end... remains to be seen.
If it does work, you probably can trim-out some of the selectors from
the below ball of confusion below:
*:first-child+html #content-wrapper,
*:first-child+html #main-wrapper,
*:first-child+html #main #wrapper,
*:first-child+html #main,
*:first-child+html #post-outer,
*:first-child+html #post-outer #post-main:hover
{z-index: 10;}
*:first-child+html #content-wrapper #sidebar {z-index: -1; }/*minus 1*/
Good luck.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] page jumps when an internal page link is clicked
My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? -- Debbie Campbell www.redkitecreative.com __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
Morning Debbie Your wrote My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? -- Debbie Campbell www.redkitecreative.com What O/S and browsers are you seeing the problem in? Unless I'm badly missing the point, viewing the link provided on Win XP Pro SP3 in IE 7 and 8 and FF 3.6, I see no differences with no loss of top margin in the green content area or the page in general. Best Jim Nannery www.nannery.net www.oldcurmudgeon.net __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
I'm viewing it in FF 3.6. When I (or the client) click on any of the internal links, the top margin of 44px on #wrapper-table-pages disappears and the grey content area is right up against the top of the browser window. This happens in Chrome and Safari/Win too. In IE8, the margin doesn't entirely disappear, but it's reduced noticeably. -- Debbie On 5/24/2010 9:25 AM, JWN wrote: Morning Debbie Your wrote My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? -- Debbie Campbell www.redkitecreative.com What O/S and browsers are you seeing the problem in? Unless I'm badly missing the point, viewing the link provided on Win XP Pro SP3 in IE 7 and 8 and FF 3.6, I see no differences with no loss of top margin in the green content area or the page in general. Best Jim Nannery www.nannery.net www.oldcurmudgeon.net __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
The effect is also visible in Seamonkey 2.0.4 (Win/XP Pro; SP3). Philip Taylor Debbie Campbell wrote: I'm viewing it in FF 3.6. When I (or the client) click on any of the internal links, the top margin of 44px on #wrapper-table-pages disappears and the grey content area is right up against the top of the browser window. This happens in Chrome and Safari/Win too. In IE8, the margin doesn't entirely disappear, but it's reduced noticeably. __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? - When you click a link it tries to go to a later part of the page (and place this at the top of the browser) which is why the page is jumping down, you have several overflow-y:hidden declarations which is why you can't scroll the page, but the lost top-margin is still there (just hidden). I think you may want to consider a JavaScript solution to jump to the content in the div. Hope that helps James __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
Debbie Campbell wrote:
My client's page is losing its top margin when any of the internal links
in the green content area are clicked:
http://biz82.inmotionhosting.com/~soliss5/faq.html
Can someone tell me how to fix this issue?
In the embedded style sheet, try:
.scrolldiv1 {
height: 354px; /*add*/;
/*height: 330px; delete*/
width: 368px;
overflow: auto;
font-size: 14px;
}
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] page jumps when an internal page link is clicked
Thanks. I'll do that. -- Debbie On 5/24/2010 10:48 AM, James Leslie wrote: My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? - When you click a link it tries to go to a later part of the page (and place this at the top of the browser) which is why the page is jumping down, you have several overflow-y:hidden declarations which is why you can't scroll the page, but the lost top-margin is still there (just hidden). I think you may want to consider a JavaScript solution to jump to the content in the div. Hope that helps James __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
On Mon, 24 May 2010, Debbie Campbell wrote: Thanks. I'll do that. You also need to fix the vertical height: http://cfajohnson.com/testing/biz83.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] 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] page jumps when an internal page link is clicked
I tried it, but it didn't seem to help at least in FF.
--
Debbie
On 5/24/2010 11:03 AM, David Laakso wrote:
Debbie Campbell wrote:
My client's page is losing its top margin when any of the internal
links in the green content area are clicked:
http://biz82.inmotionhosting.com/~soliss5/faq.html
Can someone tell me how to fix this issue?
In the embedded style sheet, try:
.scrolldiv1 { height: 354px; /*add*/;
/*height: 330px; delete*/
width: 368px;
overflow: auto;
font-size: 14px;
}
Best,
~d
__
css-discuss [cs...@lists.css-discuss.org]
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] page jumps when an internal page link is clicked
Debbie Campbell wrote:
My client's page is losing its top margin when any of the internal links
in the green content area are clicked:
http://biz82.inmotionhosting.com/~soliss5/faq.html
Can someone tell me how to fix this issue?
Delete that overflow,
overflow-y: hidden ! important; overflow-x: auto ! important;
from this block.
body {
margin: 0;
padding: 0;
background-color: #0A0A0A;
font-family: Arial, Helvetica, sans-serif;
color: #2D2D2D;
}
As James rightly says, the top margin is still present but is hidden
in the overflow. The is top outside of the viewport.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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] page jumps when an internal page link is clicked
Is there a way to set it up so that the linked-to content is placed at the top of the scrolling content window, rather than at the top of the browser window? And were you referring to the JS methods for scrolling to internal links rather than jumping to them - should that work within the green scrolling area only? -- Debbie On 5/24/2010 10:48 AM, James Leslie wrote: My client's page is losing its top margin when any of the internal links in the green content area are clicked: http://biz82.inmotionhosting.com/~soliss5/faq.html Can someone tell me how to fix this issue? - When you click a link it tries to go to a later part of the page (and place this at the top of the browser) which is why the page is jumping down, you have several overflow-y:hidden declarations which is why you can't scroll the page, but the lost top-margin is still there (just hidden). I think you may want to consider a JavaScript solution to jump to the content in the div. Hope that helps James __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Opacity question...
Hello! I am wrestling with setting the opacity on background colors on a div to expose a pattern behind it. However I can't figure out how to keep the elements contained with in it at 100% opacity. Please see this page to see what I mean: http://em-w.com/portPages/port_homeandhearth1.html I would like the main image and the text to remain a solid color, while the white background has a 50% opacity level. Is there a way to do this? Thanks in advance for any advice! - Matthew __ css-discuss [cs...@lists.css-discuss.org] 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] Opacity question...
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 3:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a div to
expose a pattern behind it. However I can't figure out how to keep the
elements contained with in it at 100% opacity. Please see this page to see
what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color, while the
white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much anything
else of recent vintage. Alternatively, you could create a smallish PNG which
is all white and has 50% opacity and drop it into the background of the div.
That will work in all current browsers including IE/Win.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
Alternatively, you could create a smallish PNG which is all white and has 50%
opacity and drop it into the background of the div. That will work in all
current browsers including IE/Win.
This did the trick! Thank you!
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value would
be the opacity of the color.
Hope this helps!
Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
--
Attend the online CSS3 + July 4 + HTML5 Presentation
http://css3flag.eventbrite.com/
Free on July 1, 2010
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 3:26 PM, Christopher Schmitt wrote:
On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
Should be #00 is the color and the first hexadecimal value is the color
opacity.
Thanks to Claude for the reminder :)
Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
--
Attend the online CSS3 + July 4 + HTML5 Presentation
http://css3flag.eventbrite.com/
Free on July 1, 2010
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 25, 2010, at 5:26 AM, Christopher Schmitt wrote:
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value would
be the opacity of the color.
With the caveat(s) that:
1. the element must have 'hasLayout' [1] set to true for those filters to work
correctly most of the time
2. those filters affect the display of text / font smoothing, and not exactly
as an improvement, esp on Win XP.
3. those filters may affect how other -descendent- element act, see [2] for
example
(I prefer the semi transparent png file my self, and opaque backgrounds for old
browsers such as IE 6).
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
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] Going Crazy with Z-Index Bug
Thanks, David. That worked.
I was able to whittle it down to:
*:first-child+html #content-wrapper,
*:first-child+html #main-wrapper
{z-index:10;}
Even the following is not required:
*:first-child+html #content-wrapper #sidebar {
z-index:-1;
}
...and it actually works with just the main-wrapper reference, but the
dimensions change slightly, so other fixes would be required in its absence.
So thanks again; you've been very helpful with the several issues I've brought
forth since joining the list.
But could you please explain the logic by which this works, as opposed to just
a direct reference to #main-wrapper?
Thanks,
Rick Gordon
--
On 5/24/10 at 9:53 AM -0400, David Laakso wrote in a message entitled
Re: [css-d] Going Crazy with Z-Index Bug:
Rick Gordon wrote:
I'm trying to work through the IE7 z-index bug, where I have set up the blog
posts to enlarge when hovered over. Works in FF, Safari, Chrome, Opera, and
IE 8.
RE: ttp://testlloyd.blogspot.com/
Rick,
Please see http://chelseacreekstudio.com/ca/cssd/lk.htm
Seems to work this end in IETester IE/7.0 on Mac OS X 10.4.
Whether it will do so on your end... remains to be seen.
If it does work, you probably can trim-out some of the selectors from the
below ball of confusion below:
*:first-child+html #content-wrapper,
*:first-child+html #main-wrapper,
*:first-child+html #main #wrapper,
*:first-child+html #main,
*:first-child+html #post-outer,
*:first-child+html #post-outer #post-main:hover
{z-index: 10;}
*:first-child+html #content-wrapper #sidebar {z-index: -1; }/*minus 1*/
Good luck.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
--
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
css-discuss [cs...@lists.css-discuss.org]
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] Going Crazy with Z-Index Bug
Rick Gordon wrote:
Thanks, David. That worked.
I was able to whittle it down to:
*:first-child+html #content-wrapper,
*:first-child+html #main-wrapper
{z-index:10;}
Even the following is not required:
*:first-child+html #content-wrapper #sidebar {
z-index:-1;
}
...and it actually works with just the main-wrapper reference, but the
dimensions change slightly, so other fixes would be required in its absence.
So thanks again; you've been very helpful with the several issues I've
brought forth since joining the list.
But could you please explain the logic by which this works, as opposed to
just a direct reference to #main-wrapper?
Thanks,
Rick Gordon
Others on this list are far better qualified to provide a specific
answer to your good question.
From my simplistic holistic viewpoint, I think of the z-index as a
means to /pull/ or advance an element forward from the canvas [screen]
in space/time (plus) and to /push/ or make another element recede back
from the canvas in space/time (minus).
How one accomplishes that stacking can sometimes boggle the mind.
These links are helpful in that regard:
Understanding z-iindex
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
CSS2.1 9.9.1 Specifying the stack level: the 'z-index' property
http://www.w3.org/TR/CSS2/visuren.html#z-index
Elaborate description of Stacking Contexts
http://www.w3.org/TR/CSS2/zindex.html
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
