Mariusz Woźniak

Mariusz Woźniak projektant UI/UX,
Digital Mines

Temat: Problem z CSS w IE7.

Natrafiłem na dziwny (dla mnie, ale to może przez mój brak doświadczenie w webdeveloperce) problem z używaniem CSS w IE7.

Najogólniej chodzi o to, że strona którą buduję w Chrome, FF, IE8 wygląda OK, ale przy uruchomieniu w IE7 lub IE6 traci część stylowania. Sprawdziłem, że gdy przypiszę style bezpośrednio do elementów w pliku html (atrybutem "style="), działają - gdy przeniosę je do osobnego pliku CSS, wygląda jakby ich nie było w ogóle (ale też co dziwne - tylko części). Zastanawiam się - czy źle używam selectorów? Czy źle linkuję arkusz stylów? Nie wiem. Proszę o pomoc :)

Konkretnie chodzi o stronę:
http://mariuszwozniak.com/1/

Jeśli ktoś byłby mi w stanie podpowiedzieć w czym problem, będę ogromnie wdzięczny :)

konto usunięte

Temat: Problem z CSS w IE7.

Sprawdź pierwszą linijkę kodu:
"<!DOCTYPE html>"
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Problem z CSS w IE7.

Podpowiedź 1:
- sprawdź które style nie działają w której przeglądarce,
- sprawdź z której wersji CSS pochodzą użyte style,
- sprawdź które style obsługuje dana przeglądarka,
- czytaj co i dlaczego kopiujesz z internetu (gotowy kod css).

Podpowiedź 2:
- poczekaj, aż ktoś to zrobi za Ciebie.
Mariusz Woźniak

Mariusz Woźniak projektant UI/UX,
Digital Mines

Temat: Problem z CSS w IE7.

Adam Pawliczek:
Podpowiedź 1:
- sprawdź które style nie działają w której przeglądarce,

Jak już pisałem: mój problem, który próbuję teraz rozwiązać to IE7, a style jako takie działają ale pod warunkiem że są wklejone "inline", a nie w osobnym pliku. Więc problem nie bierze się z jakichś fikuśnych bajerów CSS3 :)
- sprawdź z której wersji CSS pochodzą użyte style,

Nie chodzi w każdym razie o żadne CSS3, których oczywiście IE nie ma prawa obsłużyć.
- sprawdź które style obsługuje dana przeglądarka,

Te na których mi zależy - obsługuje. Może się pojawić jakiś problem z floatami, ale będę się tym martwił jak w ogóle IE zobaczy np. color, czy background.
- czytaj co i dlaczego kopiujesz z internetu (gotowy kod css).

Oczywiście. Ale tu akurat ten problem nie występuje raczej.

Podpowiedź 2:
- poczekaj, aż ktoś to zrobi za Ciebie.

Gdyby o to chodziło, mógłbym po prostu komuś to zlecić :) Przy okazji tego projektu chciałem sobie trochę odświeżyć i może rozwinąć zagadnienia HTML/CSS, do czego dawno nie miałem okazji. Tak więc liczę na pomoc/podpowiedzi raczej zamiast zrobienia tego za mnie.

Dzięki za szybką reakcję!
Dariusz Aleksiewicz

Dariusz Aleksiewicz Senior developer,
Team leader,
Administrator Linux

Temat: Problem z CSS w IE7.

na poczatek dodaj:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

a potem zeby miesc pewnosc ze ie7 tylko bedzie widzial konkretny arkusz CSS:
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="twoj_css_pod_ie7.css" />
<![endif]-->
Mariusz Woźniak

Mariusz Woźniak projektant UI/UX,
Digital Mines

Temat: Problem z CSS w IE7.

Dzięki wszystkim za podpowiedzi. Niestety, nie rozwiązują one problemu.

Posłużę się przykładem, który może lepiej zobrazuje o co mi chodzi:

1. Ta wersja działa prawidłowo:

W pliku HTML:

<div id="featured" style="background:url(img/fptv.png) no-repeat; width: 819px; height: 375px; margin: 70px auto;"></div>


2. Ta wersja już nie (ale tylko w IE6,7 - w pozostałych przeglądarkach, na których sprawdzałem jest ok):

W pliku HTML:

<div id="featured"></div>


W pliku CSS:


#featured {
background:url(../img/fptv.png) no-repeat;
width: 819px;
height: 375px;
margin: 70px auto;
}
Dariusz Aleksiewicz

Dariusz Aleksiewicz Senior developer,
Team leader,
Administrator Linux

Temat: Problem z CSS w IE7.

dodaj ' ' przy definiowaniu sciezki background..

#featured{
background:url('../img/fptv.png') no-repeat;
width: 819px;
height: 375px;
margin: 70px auto;
}

sprawdz tez czy na pewno sciezka do pliku "fptv.png" jest poprawna. Twoja sciezka sugeruje ze arkusz css znajduje sie w podfolderze drzewa glownego aplikacji..
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: Problem z CSS w IE7.

A może byś napisał CO Ci nie działa? Bo ja nie wiem czy chodzi o tło obrazkowe, marginesy, wysokość czy może szerokość.
Szymon Piłkowski

Szymon Piłkowski Senior JavaScript
Developer

Temat: Problem z CSS w IE7.

popraw błędy w styl.css, linijki 39, 125, 204.
strzelałbym, że parser CSS wykłada się na nich i nie czyta dalej, ewentualnie uznaje, że fragment w ciapkach to string.

ogólnie, http://jigsaw.w3.org/css-validator/ - przydatna rzecz.

(edit:filename)Szymon Piłkowski edytował(a) ten post dnia 10.05.10 o godzinie 16:52
Paweł Piskorz

Paweł Piskorz koder HTML/CSS

Temat: Problem z CSS w IE7.

Zwaliduj sobie CSSa, ale poprzez http://jigsaw.w3.org/css-validator/#validate_by_input a nie http://jigsaw.w3.org/css-validator/#validate_by_uri - tu walidator nie potrafi znaleźć stylów.

Swoją drogą zdecyduj się czy piszesz w HTML czy XHTML, a następnie zwaliduj również HTMLa :)
Mariusz Woźniak

Mariusz Woźniak projektant UI/UX,
Digital Mines

Temat: Problem z CSS w IE7.

Dzięki za wszystkie podpowiedzi, Panowie :) Pobawię się z tym wieczorem i dam znać o wynikach ;)

EDIT:
No i po sprawie: faktycznie chodziło o te trzy cudzysłowy, które zaplątały się do arkusza stylów. Dzięki Szymonie, trafiłeś w sedno! :)Mariusz W. edytował(a) ten post dnia 10.05.10 o godzinie 18:40

Następna dyskusja:

Problem z CSS pod IE7




Wyślij zaproszenie do