Горизонтальное меню навигации, которое не обертывается

Question

У меня возникли проблемы с созданием встроенного меню навигации, которое не «обертывается» при изменении размера браузера. Независимо от того, что я пытаюсь (контейнеры, минимальная ширина и т. Д.), Он выглядит удивительно по-другому ... вы уже догадались, IE (тестирование с помощью IE8, также использующее последние FF и Chrome). Я новичок, прошу прощения за беспорядок. Сайт

http://robertdwatkins.com

Примечание: логотип стилизован с помощью CSS и плавает в отдельном DIV слева от naviagtion так что они выстраиваются в линию.

HTML:

<div id="logo"> 
    <a>&nbsp;ROBERT WATKINS&nbsp;</a> 
</div> 
<div id="navigation" class="link"> 
    <ul> 
     <li><a href="biography.html">BIOGRAPHY</a></li> 
     <li><a href="painting.html">PAINTING</a></li> 
     <li><a href="drawing.html">DRAWING</a></li> 
     <li><a href="photography.html">PHOTOGRAPHY</a></li> 
     <li><a href="teaching.html">TEACHING</a></li> 
     <li><a href="writing.html">WRITING</a></li> 
     <li><a href="links.html">LINKS</a></li> 
    </ul> 
</div> 

CSS:

#navigation{ 
    position: absolute; 
    top: 14px; 
    left: 150px; 
    z-index: 10 
} 

#navigation ul{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li{ 
    display: inline; 
    list-style-type: none; 
} 

#navigation li a{ 
    padding-right: 18px; 
    padding-left: 18px; 
    background: #000; 
    color: #FFF; 
} 

Answer 1

Try:

Сначала завернуть свой логотип и СЧА в DIV и дать, что определенную ширину. Скажем, как 960px.

#logo{ 
    float: left; 
    border: 1px solid white; 
    outline-width: 5px; 
    font-family: "Arial", "Helvetica", "sans-serif"; 
    font-size: 10px; 
    font-weight: bolder; 
    text-transform: none; 
    color: white; 
    margin: 7px 0 0 8px; 
    padding: 2px; 
    text-align: center; 
    vertical-align: middle; 
    letter-spacing: 0.1em; 
} 

#navigation{ 
    z-index: 10; 
    float: left; 
    display: inline-block; 
    margin-top: 8px; 
} 

Надеюсь, что это поможет. Я не тестировал в IE, но, похоже, работает в Chrome и FF. Может потребоваться корректировка отступов и полей для позиционирования.