--> Archiwum Forum
Dj RoNi [ Chor��y ]
CSS (padding) - konflikt explorera i firefoxa
mam pytanie
robie stronę w css
jak to jest, że dobrze działa w firefoxie, a e xpolrerze się sypie
zauważyłem, ze źle działa funkcja padding-...
bo tak jak w firefoxie, jesli juz dodaje padding, muszę zmniejszyć rozmiary danego div'a, w explorerze nie
jak to pogodzić?
z góry dzięki
darek_dragon [ 42 ]
To powszechnie znany bug IE. Najprostszym rozwiązaniem jest umieszczenie w kodzie odpowiedniej definicji typu dokumentu ( ). Zamieszczenie takowej każe wyłączyć Internet Explorerowi "quirks mode" i interpretować padding tak, jak Pan Bóg (czyli W3C ;) przykazał. Strona będzie wtedy działać pod IE 6.0 i 7.0.
Innym sposobem są komentarze warunkowe, które pozwolą załadować IE inny arkusz stylów, ale to mniej elegancka metoda (za to działa nawet w IE 5.5).
Dj RoNi [ Chor��y ]
która to dokłądnie definicja, bo nie mogę jej znaleźć, a strona nadal jest rozsypana w IE 6
darek_dragon [ 42 ]
W twoim przypadku pewnie ta :) Musi to być absolutnie pierwsza rzecz w twoim kodzie.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
Dj RoNi [ Chor��y ]
- dalej się rozjeżdza pod IE
Style:
P ‹ color:green; font-size: 15pt;›
a ‹ color: #cb0000; text-decoration: underline; ›
a:hover ‹color: #898914; text-decoration: none; ›
stopka ‹ color: #898914; ›
ban ‹ position:absolute; top:240px; right: 300px; color: #898914; ›
temat1 ‹ color: #d0dd28; font-size: 12px; font-family: verdana; font-weight: bold; ›
temat2 ‹ color: #87b61b; font-size: 12px; font-family: verdana; font-weight: bold; ›
.tlo ‹ background-color: #f6f6f5; width: 830px; background-image: url(data/tlo.gif); background-repeat: repeat-x; ›
.glowna ‹ background-color: #FFFFFF; width: 732px; padding-left: 9px; padding-right: 9px; padding-top: 9px; ›
.gora_pasek ‹ height: 34px; background-image: url(data/gora_pasek.gif); text-align: right; padding-right: 72px; ›
.top ‹ height: 109px; background-image: url(data/top_tlo.gif); text-align: left; padding-left: 11px; ›
.banner ‹ height: 110px; background-image: url(data/banner.gif); text-align: right; padding-right: 13px; padding-bottom: 10px; ›
.odstep ‹ height: 20px; ›
.srodek ‹›
.temat ‹ height: 22px; ›
.panel_logowania ‹ text-align: left; color: #3a5c0a; background-image: url(data/panel_logowania.gif); text-align: left; font-size: 11px; padding-left: 20px; padding-top: 10px; padding-bottom: 5px; background-repeat: repeat-x; background-color: #eef1b8; ›
kropka ‹ color: #d0dd28; ›
.pasek2 ‹ background-image: url(data/pasek2.gif); height: 3px; ›
.rejestracja ‹ height: 28px; background-image: url(data/rejestracja.gif); text-align: center; font-size: 11px; padding-top: 12px; ›
.ankieta ‹ color: #3a5c0a; background-image: url(data/ankieta.gif); text-align: center; font-size: 11px; padding-top: 10px; padding-bottom: 5px; background-repeat: repeat-x; background-color: #f9fbdb; ›
.rer ‹ width: 22px; height: 28px; background-image: url(data/1.gif); float: left; ›
.rerr ‹ width: 22px; height: 28px; background-image: url(data/2.gif); float: left; ›
.rerrr ‹ width: 22px; height: 28px; background-image: url(data/3.gif); float: left; ›
.proces ‹ float: left; font-size: 11px; color: #474728; line-height: 18px; ›
.pasek3 ‹ background-image: url(data/pasek3.gif); height: 3px; ›
.forum ‹ height: 18px; font-size: 11px; background-color: #fafaf1; padding-top: 3px; padding-left: 7px; ›
.forum_przerwa ‹ height: 4px;›
.srodeczek ‹ width: 370px; text-align: center; ›
.ofercie ‹ padding-top: 20px; padding-bottom: 10px; font-size: 12px; color: #3a5c0a; text-align: center; ›
.wyszukiwanie_logo ‹ height: 34px; background-image: url(data/wyszukiwanie_logo.gif); ›
.wyszukiwanie ‹ text-align: left; height: 191px; background-image: url(data/wyszukiwanie.gif); padding-top: 20px; padding-left: 35px; ›
.wyszukiwanie_tekst ‹ text-align: left; font-size: 12px; font-weight: bold; color: #3a5c0a; ›
.szukaj ‹ padding-left: 80px; ›
.wyszukiwanie_zaa ‹ height: 18px; text-align: left; font-size: 11px; padding-top: 3px; padding-left: 7px; ›
.najnowsze_logo ‹ height: 42px; background-image: url(data/najnowsze_logo.gif); ›
.najnowsze_1 ‹ background-color: #95ca4c; font-size: 11px; font-family: verdana; font-weight: bold; color: ffffff; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; ›
.najnowsze_2 ‹ background-color: #f7f9d8; font-size: 11px; font-family: verdana; color: 000000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; ›
.naj2_link ‹ color: #898914; text-decoration: none; ›
.naj2_link:hover ‹ color: #c8c841; ›
.najnowsze_3 ‹ background-color: #ffffff; font-size: 11px; font-family: verdana; color: 000000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; ›
.naj3_link ‹ color: #5e9e07; text-decoration: none; ›
.naj3_link:hover ‹ color: #8dc63f; ›
.dol ‹ padding-left: 9px; padding-left: 9px; background-color: #FFFFFF; width: 740px; ›
.dol_menu ‹ width: 732px; height: 26px; background-image: url(data/dol_menu.gif); background-repeat: repeat-x; padding-top: 10px; ›
.dol_stopka ‹ width: 732px; height: 33px; background-image: url(data/dol_stopka.gif); background-repeat: repeat-x; padding-top: 14px; ›
.dol_stopka1 ‹ padding-left: 20px; width: 421px; text-align: left; float: left; ›
.dol_stopka2 ‹ padding-right: 20px; width: 221px; text-align: right; float: left; ›
body ‹ font-family: verdana; font-size: 11px; color: #474728; ›
darek_dragon [ 42 ]
I pod FF, i pod IE7 mam stronę tak samo rozjechaną, więc musisz poustawiać wszystkie paddingi poprawnie :)
Poza tym strona upstrzona jest jeszcze paroma innymi błędami w kodzie, np.
stopka ‹ color: #898914; ›
ban ‹ position:absolute; top:240px; right: 300px; color: #898914; ›
temat1 ‹ color: #d0dd28; font-size: 12px; font-family: verdana; font-weight: bold; ›
temat2 ‹ color: #87b61b; font-size: 12px; font-family: verdana; font-weight: bold; ›
Nie twórz własnych znaczników. Nic dziwnego, że IE od tego głupieje :)
Lutz [ Senator ]
w operze tez sie rozjezdza,
co do uzywania css w podany przez ciebie sposob mam troche zastrzezen ;)
duzo lepiej uzywac mniejszych definicji np.
.font‹font-size: 11px; font-family: verdana;›
.fontbold‹font-weight: bold;›
.padding2px‹padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;›
i potem wywolujesz jako <DIV class="font fontbold padding2px">
z paddingami tez czesto walcze, zagiezdz div i daj margin dla wewn zamiast padding ;)
Dj RoNi [ Chor��y ]
Na operze i ff stronka śmiga tak jak powinna. tylko w IE sie sypie. Wydaje mi się, że chodzi o to, że jeśli dam rozmiary jednego div'a na height: 300px i dodam padding-bottom: 10px, to normalnie height muszę zmienić na 290, żeby się nie rozjezdzalo.
IE jednak inaczej to czyta. Pytanie moje, jak to zmienić. Dzięki za wszystkie inne rady, na pewno mi się przydadzą, bo od niedawna staram sie budować stronki na CSS i według W3C.
---> Lutz, mógłbys dokładnie wytłumaczyć, o co biega z tymi marginesami wewnętrznymi? W jednym kursie przeczytałem, ze to wlasnie te padding to marg. wew. Co moge użyć zamiast padding, zeby się nie rozsypało. Proszę to wytłumaczyć, jak laikowi.