Сайт работает во всех браузерах, кроме Opera и IE9 или более ранней версии?

Мой сайт www.globalplayernetwork.com работает в Chrome, Firefox и в IE 10, но не в IE 9 или более ранних версиях и Опера.

Кажется, панель навигации и логотип слишком далеко внизу. Что я могу попытаться исправить?

HTML-страница

- Заголовок

  <section class="overlay">
  &nbsp;&nbsp;&nbsp;&nbsp;<img src="http://www.globalplayernetwork.com/images/GPNLogo.png" height="165" width="590" alt="Global Player Network" title="Global Player Network" /> 
  </section>

– Кнопка навигации

  <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}

javascript web html opera internet-explorer-9
person Lance    schedule 13.02.2013    source источник
comment
опубликуйте код для панели навигации и логотипа   -  person Supplement    schedule 13.02.2013
comment
Похоже, что на вашем веб-сайте есть HTML и ошибки CSS. Попробуйте сначала исправить их и посмотреть, что произойдет?   -  person Michael0x2a    schedule 13.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, вы не устанавливаете тип документа HTML5, а используете код HTML5, например

<nav> & <section>

и т. д. Они будут удалены неподдерживаемыми браузерами. если вам нужно запустить код HTML5, используйте прокладку HTML5 для более старых версий IE.

Кроме того, в строке 94 у вас есть

</div>

также в строке 1 вам не хватает

 <html>

и в строке 74 у вас есть

<span class="descr"><font size="2"><b>Pick Your Spot</span></b></font></span>

вы не можете начать с интервала, затем шрифта, затем полужирного, а затем изменить порядок и закончить интервалом, затем жирным шрифтом, затем шрифтом... вам нужно правильно открывать и закрывать скобки

это верно:

 <span class="descr"><font size="2"><b>Pick Your Spot</b></font></span>

строка 82 у вас отсутствует тег

в основном вас прощает firefox, но не IE 9, который менее снисходителен.

начните с того, что пропустите свой HTML через валидатор и исправьте все ошибки в отсутствующих тегах. Тогда ваша навигация по страницам должна исправиться.

проверьте эту ссылку:

HTML Tidy

person Zuriel    schedule 13.02.2013
comment
Вы забыли упомянуть, что тег font устарел в HTML4 и не поддерживается в HTML5. Вместо этого следует использовать стили CSS. - person James Coyle; 13.02.2013
comment
Спасибо, похоже, я также могу добавить что-то, называемое shiv для HTML5 для IE 7 и ниже. Я сделаю все возможное, чтобы исправить это, еще раз спасибо! - person Lance; 13.02.2013