Internet Explorer w przeciwieństwie do innych przeglądarek nie interpretuje CSS „prawidłowo”. Użyłem słowa prawidłowo, bo jak wszyscy wiedzą Microsoft zaprogramował IE w taki sposób, że interpretuje on CSS na swój własny wypaczony sposób. Przykładem tego może być zachowanie IE w przypadku elementu <ul>, czyli listy nieuporządkowanej. Konkretnie, jeżeli będziemy chcieli zmienić domyślny wygląd elementu listy nieuporządkowanej poprzez dodanie atrybutu list-style-image w CSS w celu zdefiniowania graficznego znaku wypunktowania listy IE pokaże grafikę tylko kiedy elementy <li> nie będą miały dodanego atrybutu float (oblewanie). Wtedy znaki graficzne w IE nie będą wyświetlane. Aby rozwiązać ten problem należy użyć następującej sztuczki. Poniżej kod:

HTML

<ul>

<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>
<li id=”kontakt”><a href=#” target=”_self” title=”link1″>Link 1</a> </li>

</ul>

CSS

ul {

list-style-type: none

}

li {

height: 20px;
display: block;
background-image: url(../gfx/link-bullet.jpg);
background-repeat: no-repeat;
padding-left: 20px;
float: right;
text-align: left;
margin-right: 20px;

}

Wyjaśnienie, zamiast atrybutu list-style-image który nie jest poprawnie obsługiwany przez IE użyłem background-image i wskazałem plik graficzny. Zadałem CSS aby wyświetlał <li> jako blok i zadałem mu margines z lewej strony o szerokości pliku graficznego co pozwoliło odsunąć napis z nad grafiki.

VN:F [1.9.13_1145]
Oceń ten artykuł:
Rating: 6.0/10 (1 vote cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)