[CSS] ramki inaczej wyświetlane w IE oraz w FF Opcje

[eki]

Witam! mam taki problem: zrobilam taki boks z menu :

Kod

.boks {
    width: 140px;
    background-color: #fcefc8;
    border-bottom:1px solid #9d7c64;
    border-left:1px solid #9d7c64;
    border-right:1px solid #9d7c64;
    padding:3px;
    font-size:10px;
    text-align:center;
}

problem pojawia się w momencie wyświetlania, FF rysuje border na zewnatrz,przez co blok jest o 2 px szerszy niż zaplanowany.bardzo rozwala mi to inne elementy na stronie :/

[Shili]

FF rysuje dobrze, IE źle obsługuje box model.

Poczytaj o quirks mode

[KCG]

O ile dobrze kojarzę to FF poszerza element (width) o padding, czyli Twój div naprawdę ma 146px szerokości (tak powinno być), a IE wlicza padding w szerokości, czyli div ma 140px (zła interpretacja)

Czyli możesz zmniejszyć szerokość o te 6px (w IE div będzie węższy po prostu) lub taką druciarską trochę metodą umieścić w środku następny div i ustawić jego szerokość na 134px i marginesy na 3px

PS Rozmiar czcionki chyba lepiej podawać w 'pt'.

[erix]

PS Rozmiar czcionki chyba lepiej podawać w 'pt'.

Robisz lay co do px, ktoś ma ustawione czcionki w systemie większe niż Twoje (np. 120 zamiast 96dpi) i wtedy masz kaszankę zamiast zwyczajnej. ;] Punkty, to jednostki drukarskie, na ekranie masz piksele.

Czyli możesz zmniejszyć szerokość o te 6px (w IE div będzie węższy po prostu) lub taką druciarską trochę metodą umieścić w środku następny div i ustawić jego szerokość na 134px i marginesy na 3px

Albo nakazać IE używać tryb lepszej zgodności -> przejść DOCTYPEm na strict. Ostatecznie, prosty hack: width: 123px !important; width: 120px; ;]

wartość z !important - przegląrki, bez - IE.

[KCG]

Niby tak, ale przynajmniej nie ma motywu, że są za małe, tudzież duże