Thu, 2009-06-18 00:43
Hi all,
I'm losing my mind here; any help would be greatly appreciated!
The problem is this: I've got a fairly complex jQuery-powered UI control. Check it out here:
http://69.59.182.148:4080/test/06172009/html-scaffolding/filters.html
If you click on "Multi-Select Filter Name," fourth from the top, a control will open to the right of the list. If you then click on one of the check boxes, an element div.added-criteria appears underneath "Multi-Select Filter Name," to the left of the control. In IE 6 & 7, this div.added-criteria element appears to be in the wrong stacking context, as is evidenced by the fact that other elements are appearing on top of it. IE 8 (in standards mode), Firefox 2/3, Chrome, and Safari all display this behavior as expected, with the proper stacking context.
div.added-criteria looks like this (when it's visible):
<div class="added-criteria" style="display: block;"> <ul> <li style="display: block;"><div><p>List Item 1</p><p class="remove-criterion"><a href="#nogo">x</a></p></div></li><li class="apply"> <div> <p><span class="button-wrapper"><button id="apply-button" name="apply-button">Apply</button></span></p> </div> </li> </ul> </div>
And the CSS for this element (when visible):
.added-criteria { background:#EDF9FF none repeat scroll 0 0; border-bottom:1px solid #092131; border-right:1px solid #092131; margin:0.625em -0.563em -0.813em -1.6em; overflow:hidden; position:absolute; z-index:10; }
The problem is likely due to an ancestor element's positioning (at least that's my hunch). I've read all I can about the IE z-index stacking context issue and also IE's hasLayout property, and had hoped they would provide the pathway to a solution. However, no luck.
Until then, :shrug:
Thank you in advance for reading and/or helping out.
Regards,
--Bill
Thu, 2009-06-18 16:54
#1
Still struggling....
Hi all, wondering if anyone has any suggestions on this one?
Many thanks in advance.
--Bill
Thu, 2009-06-18 16:56
#2
broken link
broken link :shrug:
Thu, 2009-06-18 17:10
#3
Check again
Hey, I just verified with several people outside our firewall that the link works. What kind of broken link are you getting? 404? Again, the link is:
http://69.59.182.148:4080/test/06172009/html-scaffolding/filters.html
Thu, 2009-06-18 17:14
#4
Quote: Failed to Connect
Failed to Connect
Firefox can't establish a connection to the server at 69.59.182.148:4080.
Though the site seems valid, the browser was unable to establish a connection.
* Could the site be temporarily unavailable? Try again later.
* Are you unable to browse other sites? Check the computer's network connection.
* Is your computer or network protected by a firewall or proxy? Incorrect settings can interfere with Web browsing.
Thu, 2009-06-18 17:27
#5
Odd...
Hey again,
This is very strange indeed, i've verified with four other people that they can see it. Is there some other way I can deliver the code to you? Can you ping the IP?
--Bill
Thu, 2009-06-18 18:43
#6
billf wrote:This is very
This is very strange indeed, i've verified with four other people that they can see it. Is there some other way I can deliver the code to you? Can you ping the IP?
I can see the page OK. Start by getting your html valid. If you want browsers to obey a standard you must feed them code that obeys that standard yourself. Yours doesn't, so you have no basis for complaining.
Thu, 2009-06-18 18:56
#7
fair enough. i'll work on
fair enough. i'll work on that now.
Thu, 2009-06-18 19:02
#8
Ok... fixed
Alright, it's now validating as XHTML Strict.
(Here's the message: This document was successfully checked as XHTML 1.0 Strict!)
Thu, 2009-06-18 21:07
#9
Any ideas?
This is seriously the most insidious, enraging CSS bug I've ever had the (dis)pleasure of encountering. Any advice would be most appreciated.
Fri, 2009-06-19 17:03
#10
Cross posted on sitepoint
Hi all,
Just FYI, this is posted on Sitepoint's CSS forum as well.
http://www.sitepoint.com/forums/showthread.php?t=622626
Regards
--Bill
Fri, 2009-06-19 18:24
#11
I think that you have been
I think that you have been put on the right track by ryanrees at Sitepoint I had a similar issue with an impossible stacking context to resolve; as it was only a problem that occurred because of the scripted behaviour the easy solution was to change the stacking context each time via the script.
Let this thread know though if that other forums solution resolves things seeing as how you were ticked off 
wonder if that is our Gary in disguise ?
Fri, 2009-06-19 20:01
#12
Solution is close at hand
Hi all,
Yes, Ryan has shown me the light. Three cheers to that guy, and hats off.
If anyone's interested, I wound up using a combination of browser detection (ack) and a change to the Javascript to get the desired effect. More or less, the relevant code now looks like this:
if (isIE6 || isIE7 && filter.css("z-index") !== "1") {
filter.css({"z-index": "1"});
}
That's all it took. In the code above, the "filter" variable refers to a jQuery object, so we use the css method to test for the current z-index and then change it if necessary. It's amazing how broken something can become from something that seems so trivial.
I'll leave the code up for awhile interested parties can study it. Thanks to everyone who took the time to look at this original post.
There's still another issue with widths, that I've also posted over at Site Point.
There's now one more issue that maybe you've noticed. When adding & removing li elements to div.added-criteria ul via the checkboxes at right, there's some odd width variations happening. E.g., I'll click on a checkbox, the value will be added, I'll click on another checkbox, another value will be added, but the overall width of div.added-criteria changes. Do you have any idea why this might be happening?
Victory is so close I can taste it.
Sat, 2009-06-20 00:35
#13
Final solution posted.
Hi all,
The final solution has been posted at Site Point:
http://www.sitepoint.com/forums/showthread.php?t=622626
Here's to a weekend free of IE-related CSS bugs and hats off to those who helped.
--Bill