if check following website internet explorer 10 sub menus navigation hidden behind images.
i tried adjusting z-index values, helped firefox/chrome not ie. code can found here.
<style> body { width: 100%; height: 100%; margin:0; padding:0; background-color: #393939; } /*micro-clearfix nicolas gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/ /* modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* ie 6/7 (trigger haslayout) */ .cf { zoom:1; } /*horizontal menu styles*/ nav { background: #916a31; height: 2.3em; } ul, li { margin: 0; padding: 0; list-style: none; float: left; } ul { background: #d5973c; height: 2em; width: 100%; } li { position: relative; } li { display: block; line-height: 2em; padding: 0 1em; color: white; text-decoration: none; } li a:hover, .topmenu li:hover > { background: #916a31; height: 2em; padding-top: .3em; position: relative; top: -.3em; border-radius: .3em .3em 0 0; } .current, a:hover.current, .topmenu li:hover a.current { background: #ad9b7f; color: #eee; padding-top: .3em; border-radius: .3em .3em 0 0; position: relative; top: -.3em; border-bottom: .3em solid #917f63; cursor: default; } /*dropdown menu styles*/ ul.submenu { float: none; background: #916a31; width: auto; height: auto; position: absolute; top: 2em; left: -9000em; /* -9000em */ z-index: 1000000; } ul.submenu li { float: none; } .topmenu li:hover ul { left: 0; } ul.submenu li { border-bottom: 1px solid white; padding: .2em 1em; white-space: nowrap; } ul.submenu li:last-child { border-bottom: none; } ul.submenu li a:hover { background: #d5973c; height: 2em; padding-top: .2em; top: 0; border-radius: 0; } header { width: 960px; } nav { width: 960px; clear: both; height: 25px; background: #0079c0; background: -webkit-gradient(linear, left top, left bottom, from(#0584d3), to(#0666a3)); background: -moz-linear-gradient(top, #0584d3, #0666a3); background: -ms-linear-gradient(top, #0584d3, #0666a3); } article { width: 960px; height: 600px; background: white; overflow: hidden; text-align:center; -moz-box-shadow: 0 0 20px #888; -webkit-box-shadow: 0 0 20px#888; box-shadow: 0 0 20px #888; z-index:0; } .logo { float: left; width: 65%; } .search { padding-top: 17px; width: 35%; float: right; } .darkbg { width: 100%; height: 100px; padding-top: 20px; background: black; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939)); background: -moz-linear-gradient(top, #000, #393939); background: -ms-linear-gradient(top, #000000, #393939); } footer { width: 100%; height: 200px; background: black; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#393939)); background: -moz-linear-gradient(top, #000, #393939); background: -ms-linear-gradient(top, #000000, #393939); } .lightbg { width: 100%; background-color: #d9d9d9; background-image:url('images/party-cartoon-wild-bunch-adventures.png'); } input { border: 3px solid white; -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); margin: 0 0 10px 0; font-size:20px; color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.5) url(http://patrickjamesgeorge.id.au/mb/images/magnify.png) no-repeat 3px 3px; padding:9px 5px 5px 36px; } .smallbox1 { border:0px solid; border-radius:3px; border-color: grey; width: 293; height: 260; float: left; margin-left:20; background-image:url('images/a.jpg'); background-color:#cccccc; } .smallbox2 { border:0px solid; border-radius:3px; border-color: grey; width: 293; height: 260; float: left; margin-left:20; background-image:url('images/b.jpg'); background-color:#cccccc; } .smallbox3 { border:0px solid; border-radius:3px; border-color: grey; width: 293; height: 260; float: left; margin-left:20; background-image:url('images/c.jpg'); background-color:#cccccc; } .smallboxtext { margin-top: 240; background-color:white; width: 293; opacity:0.75; } </style> <body> <div align="center"> <div class="darkbg"> <header> <div class="logo" align="left"> <img id="logo" src="http://patrickjamesgeorge.id.au/mb/images/mb_logo.png" width="600" height="78" alt="logo" /> </div> <div class="search" align="right"> <input type="text" onblur="if(this.value == '') { this.value = 'search site'; }" onfocus="if(this.value == 'search site') { this.value = ''; }" value="search site" size="20"> </div> </header> </div> <div class="lightbg"> <nav class="cf"> <nav class="cf"> <ul class="topmenu"> <li><a href="index.html" title="home page" class="current">home</a> </li> <li><a href="offers.php" title="what's on offer">offers</a> <ul class="submenu"> <li><a href="adult.php" title="adult entertainment">adult entertainment</a> </li> <li><a href="pbv.php" title="pubs, clubs & bars">pubs, clubs & bars</a> </li> <li><a href="outdoor.php" title="outdoor activities">outdoor activities</a> </li> <li><a href="tours.php" title="tours & cruies">tours & cruises</a> </li> <li><a href="transport.php" title="transport">transport</a> </li> <li><a href="stayhome.php" title="stay @ home">stay @ home</a> </li> <li><a href="sportevents.php" title="sport events">sport events</a> </li> <li><a href="dudefood.php" title="dude food">dude food</a> </li> </ul> </li> <li><a href="register.php" title="add business">register</a> </li> <li><a href="about.php" title="more us">about</a> </li> <li><a href="contact.php" title="contact us">contact</a> <ul class="submenu"> <li><a href="service.php" title="customer service">customer service</a> </li> <li><a href="register.php" title="register account">register</a> </li> <li><a href="support.php" title="technical support">technical support</a> </li> </ul> </li> <li><a href="admin.php" title="admin">admin</a> <ul class="submenu"> <li><a href="config.php" title="edit image fader images">edit image fader images</a> </li> </ul> </li> </ul> </nav> </nav> <article> <div class="images"> <img src="http://patrickjamesgeorge.id.au/mb/images/1.jpg" width="960" height="300" alt="1" id="mainimage1" style="z-index:0" /> <img src="http://patrickjamesgeorge.id.au/mb/images/2.jpg" width="960" height="300" alt="2" id="mainimage2" style="z-index:0" /> <img src="http://patrickjamesgeorge.id.au/mb/images/3.jpg" width="960" height="300" alt="3" id="mainimage3" style="z-index:0" /> <img src="http://patrickjamesgeorge.id.au/mb/images/4.jpg" width="960" height="300" alt="4" id="mainimage4" style="z-index:0" /> <img src="http://patrickjamesgeorge.id.au/mb/images/5.jpg" width="960" height="300" alt="5" id="mainimage5" style="z-index:0" /> </div> <div class="smallbox1"> <div class="smallboxtext"> <p>by nature, background color...</p> </div> </div> <div class="smallbox2"> <div class="smallboxtext"> <p>this test text.</p> </div> </div> <div class="smallbox3"> <div class="smallboxtext"> <p>because columns floated.</p> </div> </div> </article> </div> </div> <footer></footer> </body>
add in html:
<meta http-equiv="x-ua-compatible" content="ie=edge" /> the page in ie rendering in quirk mode.
Comments
Post a Comment