>-----Original Message----- >From: Alan Gresley [mailto:[email protected]] >Sent: Friday, November 19, 2010 02:28 AM >To: 'Tim Wolf' >Cc: [email protected] >Subject: Re: [css-d] More IE7 stacking / z-index issues > >On 19/11/2010 9:27 AM, Tim Wolf wrote: >> Thanks to the information discussed a couple weeks back on this issue >> I thought I had the IE7 z-index issue solved with my drop-down menu. >> Apparently not. > >You running into a similar issue with IE7 handling of position:relative >which incorrectly >establishes a new stacking context [1]. > >> My CSS-only (slightly modified Stu Nichols droplist) drop-down menu >> was displaying (stacking) behind the content below the navs. Had it >> fixed until I added more content. >> >> This is an IE7 and IE8 issue (works in FF, Opera, Safafri). Notice >> how it lays above the gradient grey border but below the divs with >> the blue background images. > >This does not affect IE8.
Believe it or not, I saw the same behavior in IE8 before Alan's fix. I was wondering if this was being created by confusion in how the stylesheets were loading, considering the header.css was being pulled in through the PHP include; perhaps loading after the other stylesheets that contained elements that were children of elements within header.css. Either way, the fix below fixed IE8 as well. > >> Here a a slightly simplified version of the page: >> >> http://uatext1.cga.ct.gov/sdo/index-test2.php >> >> or a version with more content within those divs: >> >> http://uatext1.cga.ct.gov/sdo/index-test.php >> >> There are a bunch of CSS files being called to. Here are the primary >> ones in addition to a reset.css: >> >> http://uatext1.cga.ct.gov/sdo/css/base.css >> http://uatext1.cga.ct.gov/sdo/css/index.css >> http://uatext1.cga.ct.gov/sdo/inc/inc-css/header.css >> >> The header code is being pulled into the page via a PHP include. >> >> I've tried a variety of z-index experiments. Tried to make anything >> that didn't need to have the position element not have one. I even >> tried a jQuery script that promised to solve all my problems, >> >> Help! >> >> Tim Wolf > >The problem is cause by the below CSS or any other elements with both >position: relative and hasLayout that come later in the source. > >#container-fea { > position: relative; > height: 350px; /* hasLayout trigger */ >} > >To help IE7- one must goes back up the tree to the element that is the >sibling to the div.container-940. This is the div#header. The following >will sort IE7- out. > >#header { > width: 960px; > height: 140px; > margin: 0 auto 0 auto; > position: relative; > clear: left; > z-index: 1; /* to help IE7- along */ >} This indeed solved the problem. I must have a mental block on really getting this point in the IE7 hasLayout behavior. Thank you Alan. ______________________________________________________________________ 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/
