 [CSS][HTML]Nieprawidłowe wyświetlanie się menu, problem z pikselem |
  |
| [CSS][HTML]Nieprawidłowe wyświetlanie się menu, problem z pikselem |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 46 Pomógł: 1 Dołączył: 23.04.2011 Ostrzeżenie: (0%) 
 |
Witam
Mam pewien problem z menu. Pod firefoxem, Operą i Safari wszystko wyświetla się ok, natomiast pod IE występuje różnica jednego piksela pomiędzy wyświetlanym menu po lewej a tekstem po prawej. Nie ma też odstępu pomiędzy menu a polem z treścią. Nie potrafię sobie z tym poradzić. Poniżej umieszczam fragment kodu w xhtml i css. XHTML Kod <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta name="description" content="Opis" /> <meta name="keywords" content="Słowa kluczowe" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="strona"> <div id="nawigacja"> <ul> <li><a href="#">Opcja 1</a></li> <li><a href="#">Opcja 2</a></li> <li><a href="#">Opcja 3</a></li> <li><a href="#">Opcja 4</a></li> </ul> </div> <div id="tekst"> Tekst po prawej </div> <div id="glowna_tresc"> To jest treść na stronie </div> </div> </body> </html> CSS Kod body { font-size: 11px; background: #C60; } #strona { width: 600px; margin: 0 auto; } #nawigacja { background: #FFC; border-top: 1px #ccc solid; } #nawigacja ul { margin: 0; padding: 10px 0; /*line-height: 1.4;*/ } #nawigacja ul li { list-style: none; display: inline; background: blue; } #nawigacja ul li a { text-decoration: none; color: #fff; /*font-weight: bold;*/ padding: 10px 10px; } #nawigacja ul li a:hover { background: #fff; color: #000; } #tekst { margin: -24px 13px 11px 0; text-align: right; color: #fff; background: #F33; padding-right: 30px; } #glowna_tresc { background: #FFF; width: 100%; height: 500px; } Zauważyłem, że po ustawieniu odstępu line-height: 1.4; i pogrubienia font-weight: bold; występują problemy (również na pozostałych przeglądarkach), dlatego je wyłączyłem, ale jeśli to możliwe to chciałbym zachować te parametry. Proszę o pomoc w rozwiązaniu tego problemu. Poniżej umieszczam link z gotowym plikiem Kod http://turbobit.net/hi5lhrdiu361.html Pozdrawiam Maciej Ten post edytował Baku12345 27.07.2012, 00:17:43 |
 |
 
|
|
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 168 Pomógł: 26 Dołączył: 15.09.2011 Skąd: Wrocław Ostrzeżenie: (0%)
|
Zawsze możesz zrobić alternatywny plik CSS dla IE (zrobić warunek, że jeśli przeglądarka to IE to wczytuje CSS_for_IE.css) i w nim poustawiać nieco inaczej wartości padding i margin. Ale na twoim miejscu dałbym sobie spokój z bawieniem się i dopasowywaniem strony o 1-2 px dla IE, bo już mało kto korzysta z tej przeglądarki.
-------------------- www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 46 Pomógł: 1 Dołączył: 23.04.2011 Ostrzeżenie: (0%)
|
Już mi się wszystko wyjaśniło. Korzystałem z dreamweavera bez włączonego trybu "Live View" i pokazywał mi inaczej rozkład pikseli niż w rzeczywistości.
Dodatkowo parametr line-height: 1.4; jest zaokrąglany przez IE do 2 a przez FF obcinany do 1. To powodowało u mnie problemy. Myślę, że temat można zamknąć, chyba że ktoś wie jak zmusić IE żeby nie zaokrąglał wartości 1.4 do 2 to proszę o odpowiedź. |
|
|
|
|
|
Aktualny czas: 22.08.2025 - 05:49 |
