CODEWITHSUNDEEP
jqueryhtmlcss
Sean
Sean

Reputation: 163

CSS Menu appears behind jQuery Slideshow briefly

I used some code from 2 sources to help me pretty up a page with both mega menus and a slideshow transition. I made some changes to the jQ and the CSS to fit my needs. I am having trouble with a flicker of sorts (particularly with Internet Explorer (9). The Slideshow will appear to jump in front of the mega menu drop-down for a second and then go back. I don't think it is a z-index issue because it handles it; just not early enough. I put this into a jsfiddle here: http://jsfiddle.net/SeanPRyanKC/53RRy/.

The way I know to fix the issue is to not use a modern doctype and compatibility like:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

if I use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

The page now works flawlessly but I lose my round corners and gradients etc. Thanks

Upvotes: 0

Views: 145

Answers (2)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Add a new CSS

.slidesjs-control{z-index:-1}

Demo : http://jsfiddle.net/53RRy/9/

Upvotes: 2

Brian Ray
Brian Ray

Reputation: 1492

Try adding position: relative; z-index:100; to the #menu li properties.

If you watch the slideshow in Chrome Devtools or Firebug or whatever, when the slideshow image changes, it temporarily sets the z-index of the <a> tag to 10. So, to get rid of this problem, just set the z-index of the <li> higher than that.

Upvotes: 2

Related Questions