2011-02-22 2 views
0

ive удалось центрировать его в firefox и chrome, но он не работает в IE8. Также в браузере IE8 появляется панель прокрутки. Здесь сайт hugothКак открыть это раскрывающееся меню в IE8?

и Херес CSS:

ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
display:block; 
padding: 0; 
list-style: none; 
width: 100%; 
margin: 0px 0px 0px 40px; 
padding: 0px 0px 0px 30px; 
text-align: center 
    } 
    ul li { 
     display: block; 
     position: relative; 
     float: left; 
    } 
    li ul { display: none; } 
    ul li a { 
     display: block; 
     text-decoration: none; 
     color: #ffffff; 
     border-top: 1px solid #ffffff; 
     padding: 5px 15px 5px 15px; 
     background: #2C5463; 
     margin-left: 1px; 
     white-space: nowrap; 
    } 

    ul li a:hover { background: #617F8A; } 
    li:hover ul { 
     display: block; 
     position: absolute; 
    } 
    li:hover li { 
     float: none; 
     font-size: 11px; 
    } 
    li:hover a { background: #617F8A; } 
    li:hover li a:hover { background: #95A9B1; } 

Заранее спасибо

Alex

+0

Что-то о формулировке '' Здесь сайт hugoth «меня забавляет». Я посмотрю на ваш сайт. – thirtydot

+0

Он даже не сосредоточен в Firefox: S – thirtydot

ответ

2

Я чувствовал себя великодушным, поэтому я переделал вашу всю страницу с лучшим кодом (больше нет вложенных таблиц для макета).

Live Demo

О, и я в центре вашего меню для вас.

Если у вас есть какие-либо вопросы, дайте мне знать.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>hugoth</title> 
<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
body { 
    font: 12px Tahoma, sans-serif 
} 
#container { 
    margin: 0 auto; 
    width: 754px; 
    border-left: 2px solid #333; 
    border-right: 2px solid #333; 
} 
#header { 
    background: url(http://hugoth.com/test2/images/top.jpg) no-repeat; 
    height: 150px 
} 
#header h1 { 
    display: none 
} 
#content { 
    background: #666 
} 
#menu { 
    height: 40px 
} 
#middle { 
    clear: both; 
    margin: 0 auto; 
    width: 474px; 
    padding: 15px; 
    background: #fff; 
    text-align: center; 
    font-family: Tahoma, sans-serif; 
    font-size: 11px 
} 
#middle p { 
    margin: 21px 0 
} 
#middle .important { 
    font-family: Verdana, sans-serif; 
    font-size: 12px; 
    font-weight: bold 
} 
#footer { 
    padding: 11px 0; 
    text-align: center; 
    color: #fff; 
    font-size: 11px 
} 
#footer a { 
    color: #f90; 
    text-decoration: none 
} 
#footer a:hover { 
    text-decoration: underline 
} 





/* dropdown section */ 
#menu { 
    font: 14px Arial, Verdana, sans-serif; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    margin-left: 73px; 
} 
#menu ul { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    list-style: none 
} 
#menu li { 
    display: block; 
    position: relative; 
    float: left 
} 
#menu li ul { 
    display: none 
} 
#menu li a { 
    display: block; 
    text-decoration: none; 
    color: #fff; 
    border-top: 1px solid #fff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-right: 1px; 
    /*white-space: nowrap*/ 
} 
#menu li a:hover { 
    background: #617f8a 
} 
#menu li:hover ul { 
    display: block; 
    position: absolute 
} 
#menu li:hover li { 
    float: none; 
    font-size: 11px 
} 
#menu li:hover a { 
    background: #617f8a 
} 
#menu li:hover li a:hover { 
    background: #95a9b1 
} 

</style> 
</head> 

<body> 

<div id="container"> 
    <div id="header"></div> 
    <div id="content"> 

     <ul id="menu"> 
      <li><a href="#">Home</a></li> 

      <li><a href="#">Our Firm</a> 
       <ul> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Executive</a></li> 
        <li><a href="#">Board</a></li> 
       </ul> 
      </li> 

      <li><a href="#">Client Services</a> 
       <ul> 
        <li><a href="#">Internationalization</a></li> 
        <li><a href="#">Business Thriving Advisory Board</a></li> 
        <li><a href="#">Venture Engine: supporting start-ups and smaller companies</a></li> 
        <li><a href="#">Financial Services</a></li> 
       </ul> 
      </li> 

      <li><a href="#">Industry Practices</a> 
       <ul> 
        <li><a href="#">Clean Technology</a></li> 
        <li><a href="#">Med Technology</a></li> 
        <li><a href="#">Other</a></li> 
       </ul> 
      </li> 

      <li><a href="./" class="dir">Useful Links</a></li> 

      <li><a href="./" class="dir">Contact</a></li> 
     </ul> 


     <div id="middle"> 
      <p class="important">This site is under construction</p> 
      <p class="important">H&uuml;goth AB<br />Scheelev&auml;gen 15<br />223 70 Lund, Sweden</p> 
      <p>For questions or other matters please contact any of the below: </p> 
      <p>Bo Un&eacute;us &bull; + 46 (0)70 - 6773656 &bull; [email protected]</p> 
      <p>Lottie Norrs&eacute;n &bull; + 46 (0)70 - 4248321 &bull; [email protected]</p> 
      <p>org.nr. 556306-0986</p> 
     </div> 
     <div id="footer"> 
      www.hugoth.com &copy; 2011 &bull; Privacy Policy &bull; <a href="mailto:[email protected]">[email protected]</a> 
     </div> 
    </div> 
</div> 

</body> 
</html> 
0

Не уверен центрирующего вопроса. Вы пытались использовать доктрину XHTML вместо HTML-документа?

Что касается полосы прокрутки, похоже, что баннер слишком широк. Попробуйте либо обрезку изображения, либо расширение div

Смежные вопросы