[css-d] Going Crazy with Z-Index Bug

[Rick Gordon]

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

[Rick Gordon]

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

[David Laakso]

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: 


Rick,

Please see 
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

[Debbie Campbell]

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

[JWN]

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

[Debbie Campbell]

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

[Philip TAYLOR]

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

[James Leslie]

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

[David Laakso]

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

[Debbie Campbell]

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

[Chris F.A. Johnson]

On Mon, 24 May 2010, Debbie Campbell wrote:

> Thanks. I'll do that.

You also need to fix the vertical height:



-- 
   Chris F.A. Johnson, 
   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

[Debbie Campbell]

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

[Alan Gresley]

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

[Debbie Campbell]

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...

[Matthew]

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...

[Eric A. Meyer]

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...

[Matthew]

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...

[Christopher Schmitt]

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...

[Christopher Schmitt]

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...

[Philippe Wittenbergh]

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

[Rick Gordon]

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: 
>
>
>Rick,
>
>Please see 
>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

[David Laakso]

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



CSS2.1  9.9.1 Specifying the stack level: the 'z-index' property


Elaborate description of Stacking Contexts


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/