Komentarze warunkowe pod IE

[neoh]

Cześć,

Napisałam sobie stronke z domyślnymi stylami css która się wyświetla dobrze we wszystkich nowoczesnych przeglądarkach.
Napisałem również zupełnie osobny css pod IE6. (nie pytajcie mnie czemu ale pomimo że zostało jeszcze tego dziadostwa pare procent to jeszcze dam mały support)

Użyłem komentarzy warunkowych aby załadować osobny CSS dla nowoczesnych przeglądarek i osobny CSS kiedy jest doczynienia z IE6.

Kod:

<![if !IE 6]>
<link rel="Stylesheet" type="text/css" href="style.css" />
<![endif]>

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

Czy użycie tego pierwszego komentarza warunkowego (który byłby niewidoczny tylko dla IE 6) jest zgodne ze standardami/semantyczne?

[Pedro84]

Cześć,

Napisałam sobie stronke z domyślnymi stylami css która się wyświetla dobrze we wszystkich nowoczesnych przeglądarkach.
Napisałem również zupełnie osobny css pod IE6. (nie pytajcie mnie czemu ale pomimo że zostało jeszcze tego dziadostwa pare procent to jeszcze dam mały support)

Użyłem komentarzy warunkowych aby załadować osobny CSS dla nowoczesnych przeglądarek i osobny CSS kiedy jest doczynienia z IE6.

Kod:

<![if !IE 6]>
<link rel="Stylesheet" type="text/css" href="style.css" />
<![endif]>

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

Czy użycie tego pierwszego komentarza warunkowego (który byłby niewidoczny tylko dla IE 6) jest zgodne ze standardami/semantyczne?

Nie, ale zacznijmy od tego, że jest bezsensowne. Skoro masz styl dla IE, to poprawiaj w nim TYLKO te elementy, które są błędne, wymagają poprawek. Najpierw IE ma czytać styl globalny, potem ten, który jest przeznaczony TYLKO dla IE.

[neoh]

W tym przypadku chodzi mi głównie o menu które jest kompletnie rozjechane w IE 6.
Próbowałem to robić metodą "poprawiania" globalnego stylu ale mi się to nie udało więc wziąłem się za napisania wszystkich stylów dla menu od nowa i mi wyszło...

Czyli musze zawsze próbować poprawiać globalny styl?

[Pedro84]

W tym przypadku chodzi mi głównie o menu które jest kompletnie rozjechane w IE 6.
Próbowałem to robić metodą "poprawiania" globalnego stylu ale mi się to nie udało więc wziąłem się za napisania wszystkich stylów dla menu od nowa i mi wyszło...

Czyli musze zawsze próbować poprawiać globalny styl?

Poprawiać styl globalny? W 80% dobrze napisany kod nie musi być poprawiany, ale nie raz coś trzeba. Wówczas najlepiej jest po prostu poprawić styl dla danego elementu, np. .header .navigation {}.

Po co mieszać w globalnym stylu skoro możesz zrobić osobny styl z kilkoma liniami kodu?

PS. A po co w ogóle Ci to wsparcie dla IE6?

[neoh]

Chodziło mi o edytowanie stylu globalnego w ten właśnie sposób co powiedziałeś

Połowa kompów w mojej szkole ma IE6 a na mojej stronce się tylko menu rozjeżdza więc pomyślałem że dobrze by było to jakoś poprawić ;P

Dam wam kod HTML:

Kod:

<div id="menu">
    <ul id="menu_list">
        <li><a href="#" class="menu_active">Dom</a></li>
        <li><a href="#">Uczniowie</a></li>
        <li><a href="#">Nauczyciele</a></li>
        <li><a href="#">Plany lekcji</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
</div>

i kod CSS globalnego stylu:

Kod:

#menu {
    background-color: #fff;
    background-image: url(graphics/menu_background.png);
    height: 45px;
    width: 100%;
}


#menu ul, #menu ul li{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;


}

#menu ul li {
    float: left;
    display: inline;
}

#menu ul a:link, #menu ul a:visited {
    text-decoration: none;
  color: #1A1A1A;
    display: block;
    
    padding-left: 45px;
    padding-right: 45px;
    height: 38px;
    text-align: center;
    padding-top: 7px;
}

#menu ul a:hover {
    background-image: url(graphics/menu_background_hover.png);
    /*color: #fff;*/
}

.menu_active {
    background-image: url(graphics/menu_background_hover.png);
    /*color: #fff;*/
}

[Pedro84]

No i w stylu dla IE6 musisz poprawić tylko i wyłącznie ten kod dla menu - słabiutki swoją drogą + ewentualnie to co Ci jeszcze sprawia problemy.

PS Sposób.

[neoh]

Czemu słabiutki?

Właśnie się z tym teraz męcze...
Napisze później jak wyszło.

[neoh]

OK napisałem cały kod po swojemu od nowa


HTML:

Kod:

<div id="menu">
    <ul id="menu_list">
        <li class="menu_active"><a href="#">Dom</a></li>
        <li><a href="#">Uczniowie</a></li>
        <li><a href="#">Nauczyciele</a></li>
        <li><a href="#">Plany lekcji</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
</div>

Globalny CSS:

Kod:

ul#menu_list{
margin: 0;
padding: 0;
height: 45px;
overflow: hidden;
}

ul#menu_list li{
list-style-type: none;
width: 165px;
/*albo zamiast width mozna uzyc
padding-left: apx;
padding-right: apx;
*/
height: 45px;
float: left;
text-align: center;
display: inline;
padding-top: 5px;

}

ul#menu_list li a{
color: #1A1A1A;
text-decoration: none;
}


ul#menu_list li:hover{
background: url(graphics/menu_background_hover.png);
}

.menu_active{
background: url(graphics/menu_background_hover.png);
}

CSS pod Internet Explorer 6:

Kod:

ul#menu_list li{
margin: 0;
padding: 0;
}

ul#menu_list li a{
display: block;
padding: 5px;
height: 45px;
}

ul#menu_list li a:hover{
background: url(graphics/menu_background_hover_ie6.png);
}


.menu_active{
background: url(graphics/menu_background_hover_ie6.png);
}

Wszystko działa
Co myślicie o kodzie?

[Pedro84]

Wywaliłbym diva, niepotrzebny.

Nie lepiej dać display:inline-block i usunąć float?

[neoh]

<div id="menu"> ???

Jak tak zrobie to mi się zrobią przerwy pomiędzy każdym <li> które widzać jak się najedzie na rózne elementy po menu.
margin:0 i padding:0 nie pomagają wtedy.