Site works in every browser but Opera and IE9 or earlier?
Question
My site www.globalplayernetwork.com works in Chrome, Firefox, and on IE 10 but not in IE 9 or earlier and Opera.
It seems the Nav bar and the logo are way too far down. What can I try to fix 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 a 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}
1 answers
solution1
2 2013-02-13 01:19:24
First thing is that you are not setting a HTML5 doctype but you are using HTML5 code, like
<nav> & <section>
etc. These will be dropped by unsupported browsers. if you must run HTML5 code then use a HTML5 shim for older versions of IE.
Also, on line 94 you have
</div>
also on line 1 you are missing
<html>
and on line 74 you have
<span class="descr"><font size="2"><b>Pick Your Spot</span></b></font></span>
you can't start with a span, then font, then bold, and then reverse the order and end with span, then bold, then font... you need to open and close your brackets properly
this is correct:
<span class="descr"><font size="2"><b>Pick Your Spot</b></font></span>
line 82 you have a missing tag
basically you are being forgiven by firefox but not by IE 9 which is less forgiving.
start by running your HTML through a validator and fix all the errors on missing tags. Then your page navigation should correct itself.
check this link out:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.