CODEWITHSUNDEEP
htmlcssinternet-explorer-7
HurnsMobile
HurnsMobile

Reputation: 4391

IE7 Bug With Nested UL's and CSS Filter

I'm not sure that this will be easy to explain without just showing you so here is an example -

http://jsfiddle.net/46gL8/1/

When viewed in FF, Chrome, and IE8/9 the example works as expected. When viewed in IE7 the nested UL is rendered inside of the parent despite both being positioned absolutely. Things like z-index make no difference and the only fix was to remove the filter: line from the shadow class.

I suppose it would be fine to just render a regular border or something in IE7 but it would be awesome if anyone had any insight!

Upvotes: 2

Views: 826

Answers (2)

Hussein
Hussein

Reputation: 42818

Seem you only need an explanation rather then a solution. Everything you need to know about the filter property is explained by Microsoft at http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx, no further details is given to why or how it works in certain scenarios.

Upvotes: 1

Berklee
Berklee

Reputation: 351

It looks like the filter cuts off all content that falls outside the filtered box. If you remove the submenu from the hierarchy of the main menu, it does work. See: http://jsfiddle.net/wyDTQ/

Of course, I don't know how you're constructing your menu, so that might not be what you want. It does fix your issue, though.

Upvotes: 2

Related Questions