Flexslider & DropDown problem in IE8 - Please help

HTML & CSS
1

Hi Guys,

I’m using WP with a customized Twenty Twelve theme and added an image slider - flexslider (aka Captain Slider plug-in).
Now in IE8 the dropdown (drop-up in my case) is closing once hovering above the slider. Tried with z-index, but no luck so far. Could anybody please have a look?

http://www.halodesign.com.vn/

This navigation related style is triggered for IE:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: inline-block !important;
	text-align: right;
	width: 100%;
}
.main-navigation ul {
	margin: 0;
	text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
	display: inline-block;
	text-decoration: none;
}
.ie7 .main-navigation li a,
.ie7 .main-navigation li {
	display: inline;
}
.main-navigation li a {
	border-bottom: 0;
	color: #B4B0A9;
	line-height: 2;
	text-transform: uppercase;
}
.main-navigation li a:hover {
	color: #4f4238;
}
.main-navigation li {
	margin: 0 0 0 40px;
	position: relative;
}
.main-navigation li ul {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 100%;
	z-index: 1;
}

.main-navigation ul li ul li {
    margin: 0;
}
.ie7 .main-navigation li ul {
	left: 0;
}
.main-navigation li ul ul,
.ie7 .main-navigation li ul ul {
	top: 0;
	left: 100%;
}
.main-navigation ul li:hover > ul {
	border-left: 0;
	display: block;
}
.main-navigation li ul li a {
	background: none;
	display: block;
	font-size: 11px;
	line-height: 0.5;
	padding: 4px 5px;
	width: 180px;
	text-align:left;
}
.main-navigation li ul li a:hover {
	background: none;
	color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	color: #4f4238;
	font-weight: bold;
}

Many thanks in advance,

Sam

2

Hi SamSimma. I had a look, and it does the same in IE9, though I can’t tell why. It’s a little hard to debug remotely. Are you able to make up a demo version that displays this behavior and which we can download and mess with?

3

Thanks fot your answer Ralph,

You mean a WAMP demo version?

4

No, just an .html page that has the CSS and JS embedded (with external link to the jQuery library at Google) that demonstrates the problem. Then we can test it locally and work out what to do.

5

Want a weird solution?

Add a background-color to .main-navigation li ul

style.css Line 103


.main-navigation li ul {
    background-color:#000;

That works in IE8. Don’t know why.

Somehow, the slide show peeking through between the lines of text drops the menu. Very odd.

6

Yes its a very old IE bug and IE needs a background or it falls through the gaps where elements overlap. I engineered a fix for this about 10 years ago and in places where you can’t add a background-colour just add a non existent image.

e.g.


.main-navigation li ul {
 background:url(fake.gif) no-repeat  0 0;
}

To avoid server log missing image errors just make a 1px transparent gif instead and use that (not repeated).

7

You guys are amazing!

Paul, I used your fix - Works nicely :slight_smile:

Many thanks to all of you!

Sam