javascript - Site works in every browser but Opera and IE9 or earlier? -
my site www.globalplayernetwork.com works in chrome, firefox, , on ie 10 not in ie 9 or before , opera.
it seems nav bar , logo way far down. can seek prepare this?
html page
- header
<section class="overlay"> <img src="http://www.globalplayernetwork.com/images/gpnlogo.png" height="165" width="590" alt="global player network" title="global player network" /> </section> - navigation button
<nav> <ul id="menu" class="menu"> <li> <a href="#" id="contact"> <span class="active"></span> <span class="wrap"> <span class="link">contact</span> <span class="descr"> <font size="2"><b>get in touch</b></font></span> </span> </a> </li> </ul> </nav> </div> css
ul.menu{margin:0;padding:0;list-style:none;font-size:14px;width:auto} ul.menu a{text-decoration:none;outline:none} ul.menu li{float:right;width:170px;height:85px;position:relative;cursor:pointer} ul.menu li > a{position:absolute;top:-440px;right:0px;width:170px;height:78px;z-index:12;background:transparent url(../images/overlay.png) no-repeat bottom right;background-color:rgba(0, 0, 0, 0.75);-webkit-box-shadow:0px 0px 2px #000 inset;-moz-box-shadow:0px 0px 2px #000 inset;box-shadow:0px 0px 2px #000 inset} ul.menu li img{border:none;position:absolute;width:0px;height:0px;bottom:0px;left:85px;z-index:100;-webkit-box-shadow:0px 0px 4px #000;-moz-box-shadow:0px 0px 4px #000;box-shadow:0px 0px 4px #000} ul.menu li span.wrap{position:absolute;top:25px;left:0px;width:170px;height:60px;z-index:15} ul.menu li span.active{position:absolute;background:rgba(0, 0, 0, 0.75);top:85px;width:170px;height:0px;left:0px;z-index:14;-webkit-box-shadow:0px 0px 4px #000 inset;-moz-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;-webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;border-bottom-right-radius:15px;-moz-border-radius-bottomright:15px;border-bottom-left-radius:15px;-moz-border-radius-bottomleft:15px} ul.menu li span span.link,ul.menu li span span.descr,ul.menu li div.box a{margin-left:15px;text-transform:uppercase;font-size:33px;text-shadow:1px 1px 1px #000} ul.menu li span span.link{color:#fff;font-size:22px;float:left;clear:both} ul.menu li span span.descr{color:#0b75af;float:left;clear:both;width:155px;font-size:10px;letter-spacing:1px} ul.menu li div.box{display:block;position:absolute;width:170px;overflow:hidden;height:170px;top:85px;left:0px;display:none;background:#000}ul.menu li div.box a{float:left;clear:both;line-height:30px;color:#0b75af} ul.menu li div.box a:first-child{margin-top:15px}ul.menu li div.box a:hover{color:#fff} ul.menu{margin-top:150px}
first thing not setting html5 doctype using html5 code,
<nav> & <section> etc. these dropped unsupported browsers. if must run html5 code utilize html5 shim older versions of ie.
also, on line 94 have
</div> also on line 1 missing
<html> and on line 74 have
<span class="descr"><font size="2"><b>pick spot</span></b></font></span>
you can't start span, font, bold, , reverse order , end span, bold, font... need open , close brackets properly
this correct:
<span class="descr"><font size="2"><b>pick spot</b></font></span> line 82 have missing tag
basically beingness forgiven firefox not ie 9 less forgiving.
start running html through validator , prepare errors on missing tags. page navigation should right itself.
check link out:
html tidy
javascript html website internet-explorer-9 opera
No comments:
Post a Comment