Nie wyświetlanie DIVa pod IE

[Grzegorz]

Czy jest jakiś sposób (kod css/html/xhtml), który pozwalałby na nie wyświetlanie DIVa w Internet Explorerze?

Ten DIV jest dynamiczny, tzn. jego zawartość to wynik javaskryptu i CSS. Niestety IE interpretuje wszystko po swojemu. I chciałbym, żeby tego konkretnego DIVa w ogóle nie wyświetlał. Jest na to jakiś sposób bez js rozpoznającego przeglądarkę?

Nie jestem pewien czy mogę pozostawić normalne formatowanie dla Mozilli/Opery/Safari/Konkueror, a dla IE za pomocą

Kod: Zaznacz cały

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styl-dla-ie.css" /><![endif]-->

a w nim display:none tylko czy to będzie poprawne i nie spowoduj jakiś niespodzianek?

[Tomek]

W dobrą stronę idziesz. To praktycznie jedyne, rozsądne i pewne rozwiązanie nieużywające js czy php do wykrywania przeglądarki (co przy zabawach z UA często już nawala).
Przyjrzyj się dokładnie konstrukcji którą zastosowałeś:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styl-dla-ie.css" /><![endif]-->
Dla każdej normalnej przeglądarki, tekst zawarty pomiędzy <!--tymi "nawiasami" jest traktowany jako zwykły komentarz--> czyli nie jest parsowany przez silnik renderujący. Jedyną przeglądarką która to potrafi zinterpretować to produkty firmy MS. Zostało to wprowadzone w celu ułatwień tzw. wsteczne kompatybilności pomiędzy różnymi wersjami i podwersjami IE.
Także stosuj to spokojnie.

[Grzegorz]

I rozumiem, że jeśli IE napotyka ten wyjątek dotyczący właśnie jego czerpie styl czy cokolwiek się znajdzie w tych klamrach.

A co się dzieje jeśli jakiś DIV dajmy na to <div id="aktualizacje">jakaś treść</div>, jeśli formatowanie do "aktualizacje jest zapisane w dwóch arkuszach styli CSS?

Jednym standardowym, drugim przypisanym dla IE (jak już wcześniej opisałem)? Czy Internet Explorer wykorzystuje wtedy tylko styl zadeklarowany w arkuszu dla niego dedykowanym czy z głównego stylu (dostępnego dla wszystkich przeglądarek), czy z obu - i czy w takim wypadku nie rodzi to jakiś konfliktów?

Skoro w jednym będzie "display: none" a w drugim "display: block"?

Nie męczyłby nikogo na forum, ale nie mogę tego znaleźć w żadnym kursie html/css w necie, bo to raczej teoria, a w kursach pokazuje praktyczne przykłady.

[Tomek]

Czerpie cokolwiek co jest w tych nawiasach. Jest tylko jedna specyficzna zasada, b. łatwa do załapania. Spójrz na przykład (wzięty z działającej strony):

Kod: Zaznacz cały

 <link rel="stylesheet" href="style/styl.css" type="text/css" />
<link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/ie.css" media="all" />
<![endif]-->

IE i każda inna przeglądarka będzie czytała w następujący sposób:
1. styl.css
2. lightbox.css - jeśli w obu będzie #kotek {} to za ważniejszy zostanie uznany ten z lightbox.css (no chyba że bawimy się w !important)
3. IE przeczyta i nadpisze (!) to co masz w nawiasach...

Działający przykład:
http://www.cembra.pl/
http://www.cembra.pl/style/styl.css - styl podstawowy dla wszystkich
http://www.cembra.pl/style/lightbox.css - styl dla lightboxa - wolę go trzymać osobno - dla mnie to inna warstwa
http://www.cembra.pl/style/ie.css - styl tylko dla IE - zawarłem w nim tylko te absolutne minimum które jest mi potrzebne dla poprawnego formowania w IE

Zauważ że w styl.css masz:

Kod: Zaznacz cały

body{background:url('../grafika/tlo.png')}

a w ie.css

Kod: Zaznacz cały

body{background:#fff url('../grafika/cembra-ie.jpg') no-repeat top right;}

i IE chwyta ten drugi, omijając pierwszy

Mam nadzieję że jasno i z przykładami wyjaśniającymi wątpliwości.

[Grzegorz]

Dzięki wielkie za porady i przykłady!

Zauważyłem nawet, że możliwa jest konstrukcja, gdzie DIVy z niezrozumiałym dla IE pozycjonowaniem czy wyświetlaniem będą zamieniane w tabelki:

Kod: Zaznacz cały

<!--[if IE]> <table><tr><![endif]-->
<div style="coś czego IE nie zrozumie">
   <!--[if IE]><td><![endif]-->
   <div>zawartość</div>
   <!--[if IE]></td><td><![endif]-->
  <div>coś tam jeszcze</div>
  <!--[if IE]></td><![endif]--></div>
<!--[if IE]> </tr></table><![endif]-->

[Lichurec]

Tak, ale tworzysz "zupe tagow"

Najczesciej wystepujace bledy w IE da sie skutecznie i nie tak trudno obejsc..

A z ciekawosci zapytam - jakie "niezrozumiałe dla IE pozycjonowanie czy wyświetlanie" miales na mysli badz z kaim sie spotkales?

L.

[Grzegorz]

UWAGA! MSIE 6.0 ani 7.0 nie obsługuje tabelarycznych wartości wyświetlania elementów, inline-block ani run-in. Natomiast MSIE 5 dodatkowo nie radzi sobie z list-item. Wszystkie z CSS 2.1 są obsługiwane przez przeglądarkę Opera, a także w większej części Firefox (oprócz inline-block i run-in).

Źródło: http://www.kurshtml.boo.pl/css/wyswietlanie,pozycjonowanie.html

[Lichurec]

GrzegorzJZD - alez to to akurat jest oczywiste

Z reszta inline-block GECKO nieobsluguje do dzisiaj a szkoda...

Ale ja pytalem o przyklad "z zycia wziety"... jezeli jestes w stanie przytoczyc choc kilka praktycznych przykladow zastosowania "tabelarycznych wartosci wyswietlania" (nota bene - fajnie ujete ) - bede bardzo wdzieczny..

jest to takie cos, czego praktycznego uzycia - poza "proof of concept" albo "browser hacks" - sie jeszcze nie doszperalem..

L.

[Grzegorz]

Ostatnio spotkałem się z czymś takim:

Kod: Zaznacz cały

* html {/* IE only */}
_height: 50px; /* IE only */
height/**/:100px /* Everything but IE */
html > body {/* Everything but IE */}

Czy to wszystko inne niż IE naprawdę działa? I czy można to stosować?

[helios]

To, co podałeś, opiera się na błędach w IE. W którejś wersji może już być obsługiwane poprawnie i będziesz miał problem.

[Grzegorz]

To, co podałeś, opiera się na błędach w IE. W którejś wersji może już być obsługiwane poprawnie i będziesz miał problem.

Nie chcę tego stosować, tylko pytałem jak się ma praktyka stosowania takich tworów do standardów

[diablownik]

Do standardów ma się to nijak.
Wykorzystujesz przecież konkretny błąd przeglądarki, a nie jakąś zasadę ze specyfikacji (X)HTML/CSS

[Tomek]

ale - czasem trzeba odejść od fanatycznego uwielbienia dla pełnej walidacji CSS - są błędy IE których w inny sposób się nie da obejść...

[rumsztyk]

uwielbiam komentarze warunkowe
jest to chyba jedyna dobra rzecz wymyślona u Billa w ogródku.
Należy jednak pamiętać, że:
kod css w komentarzu warunkowym zostanie dopisany do stylu głównego.
Aby uniknąć przykrych niespodzianek należy w pliku css dla IE
doprecyzować element który ma mieć formatowanie różniące się dla IE
Przykład
główny css
div.jakis_tam {width: 500px; height: 300px;}
css dla IE
body div.jakis_tam {width: 450px; height: 250px;}
chyba, że div.jakis_tam jest "dzieckiem" innego elementu niż body np. div.bardzo_glowny
wtedy piszemy div.bardzo_glowny div.jakis_tam {xyx...}
żeby bardzo "poniżyć" IE możemy napisać
body div.bardzo_glowny div.jakis_tam {xyz...}
w ten sposób "zwiększamy priorytet zapisu"
i jeszcze jedno
if IE 7 wybierze tylko siódemkę
szóstka wczyta tylko główny ale możemy
if gte IE wersja x
oznacza wersję lepszą lub równą IE w wersji x
if lte IE wersja x
oznacza gorszą lub równą IE w wersji x
najczęściej spotykam
if lt IE 8
czyli wszystkie gorsze od IE 8
choć osobiście pisałbym
if lt IE 20