Меню навигации моего сайта плохо отображается в IE7 и ниже - нужен ваш совет - PullRequest
Новая
       16

Меню навигации моего сайта плохо отображается в IE7 и ниже - нужен ваш совет

0 голосов
/ 12 сентября 2010

Я сейчас работаю над сайтом, у которого есть простое навигационное меню css с css, которое выглядит так: 

#nav {
    background: #ffffff;
    list-style: none; 
    width:300px;
    height:100px;
    float:right;

    border-color: #600;
    border-width: 1px 1px 1px 1px;
    border-style: solid;

    }

#nav a {
    color: #bf511e;
    text-decoration: none;
    margin: 55px 15px 0px;
    font: bold 18px/100% georgia, verdana, Helvetica, sans-serif;
    font-style: italic;
    float:right;
    }

#nav ul {
    clear:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    text-align:right;
    display:block;
    }

#nav li {
    margin: 0 auto;
    display:block;
    text-align:right;
    }

#nav a:hover {
    color: #ea895c;
    }

с кодом HTML, похожим на: 

<div id="nav">  
                <ul>
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="/">Home</a></li>
                </ul>
            </div>

В результате,

на Chrome, FF, Opera и IE8 (я думаю), выглядит хорошо (ТАК позволяет мне добавить только одну гиперссылку, поэтому я связал вас с неработающим изображением)

На IE7 и ниже, это выглядит так: http://tinypic.com/r/2r5u5a1/7

Есть ли что-то очевидное, что я здесь не так делаю? или это известная ошибка?

Я в значительной степени новичок в макетах CSS, так что помощь, направившая меня в правильном направлении, будет оценена. После некоторого поиска в Google не сталкивался с подобными проблемами.

Ответы [ 2 ]

0 голосов
/ 12 сентября 2010

Удалите float: right из вашего #nav a и добавьте float: right к #nav li

0 голосов
/ 12 сентября 2010

использовать дисплей: встроенный вместо блока отображения в UL и Li css

nav ul {

clear:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
text-align:right; 
display:inline; 
}

nav li {

margin: 0 auto; 
display:inline; 
text-align:right; 
}

если у вас есть проблемы, оставьте комментарий, который я могу исправить.

...