Различное позиционирование в Firefox, Internet Explorer и Safari?

Question

Я считаю, что этот вопрос задавался много раз, и мне удалось преодолеть эту проблему раньше всякий раз, когда это происходило. Только сейчас я чувствую себя застрявшим и не могу найти правильное решение, чтобы заставить его работать во всех браузерах: он работает правильно только в Firefox, в то время как в IE и Safari его элементы как-то отличаются друг от друга. Вы можете увидеть результат здесь: http://img813.imageshack.us/img813/8393/firefox.png http://img812.imageshack.us/img812/8041/10990669.png

Это код, я использую: http://pastebin.com/n6KEjazp

Большое спасибо заранее!

Answer 1

В дополнение к орфографической ошибке заполнения (недействительный CSS), эти другие браузеры вычисляют высоты ячеек по-разному. В IE высота добавляется к дополнению.

Изменить это:

.top_menu { 
     background-image: url(images/header.png); 
     background-repeat: no-repeat; 
     height: 155px; 
     font-family: LilyUPC; 
     padding-left: 184px; 
     padding-top: 120px; 
    } 

Для этого:

.top_menu { 
     background-image: url(images/header.png); 
     background-repeat: no-repeat; 
     font-family: LilyUPC; 
     padding: 120px 0 1em 184px; 
    }