menu poziome oparte o listę - błędne wyświetlanie ost. elementu

0

Witam,

w jsFiddle jest ok, w Mozilli też, w Chrome też, w IE 8 i 9 ostatni element menu jest obniżony o parę pixeli w dół.
Jakby ktoś wkleił kod w plik i uruchomił w IE ....
co poprawić w CSS?

http://jsfiddle.net/VG94G/

0

IE8, na jsfiddle ok, we własnym pliku jest ok.
http://i.imgur.com/WVHXe.jpg

<!DOCTYPE html>
<html>
<head>
<style>
#main-menu{ margin: 0 auto; overflow: hidden; width: 1010px; border: 0px solid red; background-color: #ffffff; }
    #main-menu ul{ list-style-type: none; display: inline; }
    #main-menu li{ float: left; background-color: #555555; width: 201px; height: 58px; border-right: 1px solid #c3c3c3; 
                   text-align: center; line-height: 57px; font-size: 20px; color: #ffffff; }
    #main-menu li:hover{ background-color: #ff8d06; cursor: pointer; } 

    #main-menu a{ color: #ffffff; font-weight: normal; text-decoration: none; }
    #main-menu a:hover{ color: #ffffff; text-decoration: none; }
</style>
<body>
    <div id="main-menu">

        <ul>
            <li><a href="#">menu_1</a></li>
            <li><a href="#">menu_2</a></li>
            <li><a href="#">menu_3</a></li>
            <li><a href="#">menu_4</a></li>
            <li><a href="#">menu_5</a></li>        
        </ul>

    </div> 
</body>
</html>

Google: Quirks mode, zapewne to było przyczyną problemu.

0

przekleiłem z Twojego posta dla pewności, bez zmian. Na 3 kompach win xp ie 8, win 7 ie9, win xp ie9 ostatni element kontakt mam obniżony w stosunku do pozostałych o jakieś 1px :(

0

Ale to nie może tak być, że na jsfiddle jest ok, a lokalnie nie.
Pacnij F12 (Narzędzia deweloperskie), w tym rozwiń całe drzewko DOM, możesz podświetlić ostatni element, pokaż screenshota.

0

screen

0

i drugi załączniki, gdzię widać mały box co to psuje

0

A ty może nie zapisujesz pliku jako UTF-8 zawierającego BOM?
Wypakuj to z tego i nie edytuj tylko odpal w przeglądarce: http://dzek.mooo.com/pub/test-index.rar

0

Ten sam rezultat :(

0

Ciężko mi to ogarnąć, skoro nie mogę tego zreprodukować :/
Ale z ciekawości daj display: block; zarówno na ul, jak i li w nim zawartych. Ten dziwny bloczek się na screenshocie podświetla po zaznaczeniu <ul> niby..

Edit: Dobra, ogarnąłem co się dzieje ;] W IE8 u mnie było dobrze, ale w Operze też się rozjeżdżało, do tej pory nie odpalałem tego w normalnym debuggerze, a wystarczyło tylko spojrzeć:
http://i.imgur.com/Gn2EB.jpg

Elementy <ul> mają domyślnie padding-left w przeglądarkach ;)

Google: CSS reset zanim cokolwiek będziesz składać.

0

nooo jest git. Reset css miałem ale bez ul, li na moim produkcyjnym środowisku :)

dzięki

1 użytkowników online, w tym zalogowanych: 0, gości: 1