Topic: bad display with IE [SOLVED]

Hello, I have a pb of display with IE (not the other browsers) ; when the mouse moves over the submenus, with IE only, the submenus are under the gallery (only on this page) : http://www.hostingpics.net/viewer.php?i … age001.png. What could be done ?

CSS code :

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}

#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}

/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}

/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/* dropdown */
#nav li:hover > ul {display: block;}

/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
    background: #ddd url(../images/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}

/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/

/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}


#idsize {
height:90%;
font-size:80%;
}

#credit {
background-color:black;
color:white;
width:111.1%;
}

/* CSS which should put the menu in front of the remaining elements, but which isn't sufficient with IE */
nav {
z-index : 10;
position:relative;
top:0;
left:0;
}

#aside_width {
float:right;
text-align : center;
}

#section {
float:left;
}

#pres,article {
font-family : Arial;
}

#visite {
background-color: rgb(204, 255, 255);
width:20%;
}

#liens {
font-size : 5;
}

.white {
color:white;
text-decoration:underline;
}

Re: bad display with IE [SOLVED]

Your screenshot shows your menu disappearing behind what looks like a YouTube video (not a Juicebox gallery).
(I have viewed your web site in IE11 and your menu seems to be in front of all your Juicebox galleries.)

It looks like you may need to increase the 'z-index' value for the menu elements on your web page.
In the code you posted, you have the following line:

z-index : 10;

Try increasing the 'z-index' value to 9999 to ensure that your menu is always stacked on top of the web page's other content.

If you still have inconsistent results between browsers, then try checking your web page for errors with the W3C Markup Validation Service and fix any HTML errors reported.
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.

Re: bad display with IE [SOLVED]

to put z-index to 9999 wasn't sufficient ; the W3C validator didn't like the attribute "frameborder", but I haven't found anything to replace it ; the solution, finally, has been to put the videos to Dailymotion instead of Youtube...You can close my pb.

Re: bad display with IE [SOLVED]

the W3C validator didn't like the attribute "frameborder", but I haven't found anything to replace it

Your web pages use the HTML 5 Doctype Declaration and the frameborder attribute is not supported in HTML5 (although most modern browsers will deal with the attribute in HTML 5 web pages OK).
It you want your web pages to validate correctly, you should use CSS instead, for example:

<iframe src="http://www.example.com/index.html" width="800" height="600" style="border-style: none;"></iframe>

I am glad that you have found a solution to your problem.
However, being that the problem was with Internet Explorer and knowing that you are using an iframe, you might have had successful results using the allowtransparency attribute within your iframe. Please note that this is a proprietary Microsoft attribute which will also fail validation. It will be applied to Internet Explorer and ignored in other browsers.

<iframe src="http://www.example.com/index.html" width="800" height="600" style="border-style: none;" allowtransparency="true"></iframe>

Re: bad display with IE [SOLVED]

Thank you for your answer ; I take it into account.

Re: bad display with IE [SOLVED]

You can solve this discussion.

Re: bad display with IE [SOLVED]

Now marked as [SOLVED]. Thank you for letting me know.