CSS padding inaczej w IE6 i Firefox


Zapewne tworząc strony WWW zauważyliście, że IE6 traktuje deklarację padding w stylach CSS inaczej niż IE, który dodaje sobie kilka pikseli “ekstra”. O ile przy formatowaniu tekstu nie ma to większego znaczenia, to podczas tworzenia skomplikowanych obiektów z pociętą grafiką, gdzie każdy piksel ma znaczenie, jest to bardzo istotne.

Jest na szczęście prosty sposób, aby strona wyświetlała się prawidłowo w IE6 i Firefoksie. Wystarczy użyć małej sztuczki podczas deklaracji CSS:

div {
padding:10px 0 0 0 !important; /*moz padding*/
padding:5px 0 0 0; /*IE padding*
}

I sprawa załatwiona. Firefox weźmie pod uwagę definicję odstępu 10px, natomiast IE6 definicję odstępu 5px. A może macie jakieś lepsze pomysły na rozwiązanie tego problemu? Zapraszam do podzielenia się z nami :)

,

  1. #1 by koko on January 30th, 2008

    Nie wiem czemu ale to rozwiązanie nie działa pod IE 7

  2. #2 by pukas on February 23rd, 2008

    IE7 ma nieco poprawioną obsługę tych właściwości i powinien otrzymać taki sam css, jak Firefox. Możesz zastosować tu hack dla IE7 i prawidłowy CSS dla IE7 umieścić w osobnym pliku CSS, ładując go w taki sposób:

    <!–[if IE 7]><link rel=”stylesheet” href=”style/hack-ie7.css” type=”text/css”><![endif]–>

    Pozdr!

  3. #3 by SemaFor on September 24th, 2008

    To jest bardzo dobre rozwiązanie jeżeli chodzi o explorery. W swoich projektach zdarzało mi się tworzyć odrębny css dla każdej wersji explorera. Rozwiązaniem pukas`a bez problemu można to przeskoczyć.

  4. #4 by gecior on October 31st, 2008

    hmm czy ja wiem, narazie pozostanę przy kilku arkuszach, bo ten sposob powoduje ze cos mi sie @$#$%^, ale przyjrzę mu się jeszcze, ciekawe :)

  5. #5 by SatanicElectro on February 16th, 2009

    “IE7 ma nieco poprawioną obsługę tych właściwości i powinien otrzymać taki sam css, jak Firefox.”

    “Nieco”. Akurat dzisiaj przerabiałem stronę Fopularnego miesięcznika o tematyce Folityka. Napotkałem na wspaniały fenomen nieklarowności majkrosoftu, co do zrozumienia linii czcionki, wysokość i odstęp wiersza. Innymi słowami spróbujcie ładnie wyformatować jeden aragraf umieszczony pomiędzy dwoma ami. Miłej zabawy :)

  6. #6 by pukas on February 18th, 2009

    @SatanicElectro:
    No trochę zbyt optymistycznie rzuciłem ten osąd o IE7 :) Też mam z nim sporo problemów…

  7. #7 by SatanicElectro on March 5th, 2009

    A no. Najlepsze jest to, że po dłuuuugim czasie trzymania IE6 on board postanowiłem zmienić kurs na 7ą.
    Wierzyłem w to, że w ciągu ostatnich miesięcy wszyscy moi IE6 użytkownicy abgrejdowali swój majnd, i że mogę rozpocząć prace na ‘wyższym’ :D standardzie. Wszystko szło jak po maśle. FF, IE, Opera wykazywały minimalne rozbieżności w swej interpretacji przecie tak logicznych i prostych uzgodnień ‘block-owania’ elementów … a jedank dzisiaj ujrzałem nagą prawdę w postaci skrinszota – potężna i niezastąpiona machina wersji 6 (a może 666 … sam już nie wiem) nie lubi magicznych liczb porządkowych div-ów 1, 2 i 3. Na samym wstępie BilGej-dz domalował do headera bielusieńki pasek o wysokości samego bannera. Któraś kolumna jest po prostu w moim dziele zbędna! Ktoś ustala standardy moich koncepcji i projektów! Nie dopuszcza do przepełnienia banalnej strony www. Zaszczepia skrzaty rospychacze i rozklejacze na kompach moich ziomów! I to wszystko w nocy o północy jak człowiek naprawdę się do koja spieszy, by zamknąć oczy i z ulgą rozegrać tą dziwna grę przesuwających się na czarnym tle fontów, kursorów, krzywych i kodów :(
    Od jutra będę robił wszystko na leju podłożonym jako bg :D

(will not be published)

  1. No trackbacks yet.