Проблемы HTML и CSS с навигацией IE7 - PullRequest
Новая
       22

Проблемы HTML и CSS с навигацией IE7

0 голосов
/ 06 марта 2011

Я сделал панель навигации для верхней части сайта, в конечном итоге мне хотелось получить простой текстовое меню, но когда вы наводите курсор мыши, фон меняется с помощью фонового изображения. Мне удалось сделать это и во всех браузерах, когда вы наводите курсор на изменение фона, и это нормально, но в Internet Explorer 7 это выглядит так ...

enter image description here

Я пытался изменить высоту и ширину, но все еще не могу заставить IE7 работать так же, как другие?

HTML-код для навигации: 

     <ul class="buttonleft"> 
    <li><a href="#language"><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#search">Search and Book <img src="images/arrow.png" alt="GB" /></a></li> 
    <li><a href="#offers">Latest Offers <img src="images/arrow.png" alt="GB" /></a></li> 
    </ul>

CSS 

.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px}
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px}
.buttonleft li a:hover{background:url(../images/topbgover.png)}
img{border:0}
#topflag{margin-right:3px;margin-left:3px}

Любая помощь будет великолепна: D

Ответы [ 2 ]

2 голосов
/ 06 марта 2011

Я придумал вариант вашей навигации и разместил демо по адресу:

http://jsfiddle.net/audetwebdesign/HB6Zm/

Я не тестировал его в IE7, но нужно установить две важные вещи: используйте display: block для тега a, как было предложено ранее GodFather (таким образом, заполнение работает со всех сторон) и используйте строгий тип документа, в противном случае вы можете увидеть изменения в режиме причуд.

Поскольку вы перемещаете элементы li, они становятся блоками, поэтому нет необходимости изменять свойство display.

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

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

1 голос
/ 06 марта 2011

Измените ".buttonleft li" на display: block, и то же правило, которое вы должны установить для тега "a".Может быть, вам нужно установить некоторые отступы для тега "a".

...