13 replies [Last post]
billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

Still struggling....

Hi all, wondering if anyone has any suggestions on this one?

Many thanks in advance.

--Bill

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

broken link

broken link :shrug:

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: Failed to Connect

Quote:

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.

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 34 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

billf wrote:This is very

billf wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

fair enough. i'll work on

fair enough. i'll work on that now.

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

Ok... fixed

Alright, it's now validating as XHTML Strict.

(Here's the message: This document was successfully checked as XHTML 1.0 Strict!)

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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.

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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 Laughing out loud wonder if that is our Gary in disguise ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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.

Quote:

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.

billf
Offline
Regular
Last seen: 12 years 16 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

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