[HTML][CSS] Nieszczęsne IE i złe wyświetlanie Opcje

[Piotrwusek]

Witam

Poprawiam stronę żeby ładnie otwierała się we wszystkich przeglądarkach. Ale nie mogę poradzić sobie z IE i menu głównym strony bo się źle wyświetla.
Link do strony cs.SEKOCIN.pl

html

[HTML] pobierz, plaintext 
<div id="counter-strike_top-menu">
<ul class="counter-strike_menu-glowne-ul">
  <li class="counter-strike_menu-glowne-li"><a href="/" class="counter-strike_link-01_insert" title="cs.SEKOCIN.pl - Strona Glowna" target="_self"></a></li>
	<li><a href="http://cs.sekocin.pl/index.php/download" class="counter-strike_link-02" title="cs.SEKOCIN.pl - Download" target="_self"></a></li>
 
	<li><a href="/index.php?option=com_kontakt" class="counter-strike_link-03" title="cs.SEKOCIN.pl - Kontakt" target="_self"></a></li>
	<li><a href="#" class="counter-strike_link-04" title="cs.SEKOCIN.pl - Statystyki Graczy" target="_self"></a></li>
	<li><a href="/forum" class="counter-strike_link-05" title="cs.SEKOCIN.pl - Forum" target="_top"></a></li>
	<li><a href="#" class="counter-strike_link-06" title="cs.SEKOCIN.pl - Ksiega Gosci" target="_self"></a></li>
	<li><a href="/index.php/sxe-injected" class="counter-strike_link-07" title="cs.SEKOCIN.pl - sXe-Injected" target="_blank"></a></li>
</ul>	
</div>
[HTML] pobierz, plaintext 

CSS

Kod

#counter-strike_top-menu {
float:left;
width: 980px;
}

ul.counter-strike_menu-glowne-ul, li.counter-strike_menu-glowne-li{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

Ten post edytował Piotrwusek 9.08.2008, 15:51:03

[ferrero2]

We Love IE
Kilka przyczyn (możliwości) nie mam czasu sprawdzać więc podam to co mi przychodzi do głowy.

1. w css zmieniasz display:block na display:inline-block;
2. używasz w htmlu znacznika
<strict> wsadzasz wszystkie <ul> i <li> do niego i zakańczasz </strict>
3. Pozbądź się białych znaków w kodzie html pomiędzy <li>

Może to pomoże

Pozdrawiam
Mariusz

[grzegorzr]

jak przyuwazylem nie pomoglo
zatem:
1) IE nie radzi sobie z przezroczystoscia obrazków *.png - trzeba używać hacka, znajdziesz go wpisując w google'ach "png behavior"
2) co rozwlajacego sie menu pod IE, sbrobuj zmniejszyc lewe paddingi elementów a z 15px na mniej. Jak to nie pomoze to dodaj regule margin: 0; dla elementów ul i li w menu.

[paziek]

Ogólnie to chyba nie ma sensu dostosowywać strony o klanie CSa pod IE6? Przecież nikt z pracy (głównie tam używa się jeszcze IE6) ci tej strony nie będzie odwiedzał, również jakiś dziadzia, który nie ma pojęcia o przeglądarkach tobie nie wejdzie na tą stronę.
W razie czego możesz zrobić browser sniffing i wyświetlać komunikat dla tych nieszczęśników używających IE6, aby zaktualizowali do IE7, lub zainstalowali coś normalnego.

Męcząc się z IE6 jedynie utwierdzasz ich w przekonaniu, że IE6 'wystarczy, nie trzeba aktualizować' - nie najlepsza sytuacja ;-)


ps. tak jak juz grzegorzr zauważył, zmniejszenie paddingu powinno poprawić sytuacje, najlepiej w ogóle go usunąć, bo IE6 ma zupełnie inną 'wizję' co do tego, jak powinien wyglądać padding :]

[Mrozie]

IE nie radzi sobie z przezroczystoscia obrazków *.png - trzeba używać hacka, znajdziesz go wpisując w google'ach "png behavior"

Warto jednak zauważyć, że nawet hack nie pomaga, gdy .png jest obrazkiem tła. W takich wypadkach trzeba albo usuwać półprzezroczyste tło dla wszystkich, albo zrobić dwa arkusze CSS (jeden dla ie6, a drugi dla reszty) i napisać prosty skrypt ustawiający arkusz wg przeglądarki użytkownika.

Męcząc się z IE6 jedynie utwierdzasz ich w przekonaniu, że IE6 'wystarczy, nie trzeba aktualizować' - nie najlepsza sytuacja ;-)

Co nie zmienia faktu, że profesjonalny koder nie pozwoli sobie na ignorowanie jednej grupy użytkowników, nawet jeśli ta grupa jest tak nie wyedukowana (żeby nie powiedzieć głupia), by wciąż używać badzIEwia.

[Piotrwusek]

tylko te padlingi nie dotyczą górnego menu, a to górne menu się cały czas rozwala i nie wiem czego to przyczyna


.png w nowszych wersjach IE jest już dobrze

[paziek]

Może zwiększ szerokość:
<div id="counter-strike_top-menu">
Ustaw szerokość dla: (to powinno rozwiązać problem, bo miałem podobny)
<ul class="counter-strike_menu-glowne-ul">
<strict> ?

Popróbuj też z :
Pozmieniaj szerokość dla elementów <a>
Usuń display: inline-block z elementów <a>

Co nie zmienia faktu, że profesjonalny koder nie pozwoli sobie na ignorowanie jednej grupy użytkowników, nawet jeśli ta grupa jest tak nie wyedukowana (żeby nie powiedzieć głupia), by wciąż używać badzIEwia.

Czyli co, wszyscy profesjonalni koderzy tworzą wersje swoich stron pod Netscape 3, wszelkie przeglądarki dla komórek, przeglądarki tekstowe itp. itd.? "Kurczę, bo przecież nie mogę ignorować tych grup!"
Sądzę, że profesjonalny koder robi swoją stronę używając porządnego kogu, a wtedy dla IE trzeba zwyczajnie przepisywać połowę na nowo, a dla IE6 niektóre części interfejsu wręcz są niemożliwe do przepisania. Nie wiem, czy profesjonalny koder będzie miał ochotę przerabiać/rezygnować z funckji interfejsu - zwłaszcza, jeśli wie, że odwiedzający nie powinien mieć problemu z aktualizacją/zmianą przeglądarki, co mu zajmie 5 minut max + 0$? A dopasowywanie strony przy każdej kolejnej zmianie .. bezcenne.
Ja się za guru nie uważam, ale sadzę, że pod profesjonalizm 'podchodzę' i zwyczajnie stronię od zleceń, gdzie >trzeba< robić wersję pod IE6. IE7 jakoś przeboleje..

Zrozumiałbym natomiast takie twierdzenie:

Co nie zmienia faktu, że bogaty właściciel nie pozwoli sobie na ignorowanie jednej grupy użytkowników, nawet jeśli ta grupa jest tak nie wyedukowana (żeby nie powiedzieć głupia), by wciąż używać badzIEwia.

Chyba koniec offtopu?

Ten post edytował paziek 11.08.2008, 12:11:31

[Piotrwusek]

to nie szerokości wina tylko linków

jak nie dam na końcu </a> to w IE jest wszystko dobrze ale w FF jest źle

jak nie dam na końcu </a></li> to w obu przeglądarkach jest dobrze

Ale to nie jest poprawne rozwiązanie

Zachowuje się to jak bym miał białe znaki w kodzie bo po zmniejszeniu font-size na 0px; zmniejszyły się odstępy

[ferrero2]

Niewiem nie sprawdzałem, ale tak jak pisałem wcześniej pozbycie się białych znaków można uzyskać przez <strict></strict> nie pomaga wrzucenie tam tych <li> ?

[Mrozie]

Tak tytułem offtopa jeszcze:

Czyli co, wszyscy profesjonalni koderzy tworzą wersje swoich stron pod Netscape 3, wszelkie przeglądarki dla komórek, przeglądarki tekstowe itp. itd.? "Kurczę, bo przecież nie mogę ignorować tych grup!"

No nie przesadzajmy. Wszystko zależy od typu strony, ale w większości przypadków użytkownicy korzystający z przeglądarek na komórki i innych wymienionych to jakiś... 1-2%? A teraz popatrz na IE6 - okazuje się bowiem, że userów zbyt leniwych by zrobić update jest przeciętnie jakieś 15-20%, czyli znacznie więcej. Ja również podczas pisania strony dostaje palpitacji serca kiedy trzeba ją dostosować do pseudowymogów IE6, ale jednak nie chciałbym, żeby ta 1/5 userów widziała stronę w kawałkach.

Btw, ktoś kiedyś powiedział, że profesjonalną stronę buduję się tydzień, dzień i 30 minut. 30 minut piszę się kod, jeden dzień się robi szatę graficzną, a tydzień poprawia, by jakoś znośnie prezentowała się pod IE.

Ad. tematu: proponowałbym tymczasowo wrzucić wszystko inline i usuwać na chwilę podejrzany kawałek kodu. Jesli jest ok, wklejasz z powrotem. Jesli nie, wiesz gdzie jest błąd.

Ew. możesz przejechać stronę validatorem W3, czasem potrafi wskazać błędy tam, gdzie teoretycznie być nie powinno.

[FliSs_tCv]

tutaj pomogłem pewnej osobie co do IE zajrzyj może się przyda http://forum.php.pl/index.php?showtopic=82034&hl=