CSS rozbité v IE

[Jarda_]

Zdravim,

dokazal by mi prosim nekdo poradit co je spatne v mem CSS na strance
sunmed.cz ?
V IE ma stranka posunutou druhou radu odkazu, v ostatnich prohlizecich se stranka zobrazuje jak by mela.

[Reklama]

[webhope]

Předně, v Exploreru vidím něco úplně jiného než ty. Menu je vlevo ne nahoře jak to vidíš na obrázku co si poslal. Prostor vpravo od menu je prázdný. Prostor por hlavičkou je prázdný. Tzn. Tvůj hlavní text na stránce začíná někde úplně dole! IE 6.0

....

V první řadě bych řešil toto:

Kód: [Vybrat]

<div class="container"> <!-- holds centered page, contains everything else -->
<div class="top"> <!-- heading and top menu -->
<div class="heading">

</div>
<div class="menubar">

<ul>
<li><a class="pressed" href="index.php?page=0"><div>Úvod</div></a></li>
<li><a class="unpressed" href="index.php?page=1"><div>Náš tým</div></a></li>
<li><a class="unpressed" href="index.php?page=2"><div>Fotogalerie</div></a></li>
<li><a class="unpressed" href="index.php?page=3"><div>Ceník</div></a></li>
<li><a class="unpressed" href="index.php?page=4"><div>Nejčastěji kladené otázky</div></a></li>
<li><a class="unpressed" href="index.php?page=5"><div>Kontakty</div></a></li>
</ul>

</div>
<div class="services">
<ul>
<li><a href="index.php?cat=sluzby&page=0"><div>Kosmetika</div></a></li>
<li><a href="index.php?cat=sluzby&page=1"><div>Výplňové materiály a botulotoxin</div></a></li>
<li><a href="index.php?cat=sluzby&page=2"><div>Masáže a ultrazvuková kavitace</div></a></li>
<li><a href="index.php?cat=sluzby&page=3"><div>Výživové poradenství</div></a></li>
<li><a href="index.php?cat=sluzby&page=4"><div>Neurologie</div></a></li>

<li class="last"><a href="index.php?cat=sluzby&page=5"><div>Rehabilitace</div></a></li>
    </ul>
</div>
</div>

<div>Neurologie</div> a podobně je nesmysl. Divy se používají na větší bloky kódu, které chceš nějak seskupit. Ty divy uvnitř odkazů nemaj co dělat. Pak by ses měl podívat na to jestli ty divy mají nastavenou výšku a případně i šířku. V IE nemám nainstalované nástroje pro vývojáře, takže ti v tom moc nepomůžu, ale vypadá to na nesprávné rozměry divů. Dále Firefox 3.6 nezobrazuje ty kulaté rohy co tam máš. Vlastně ani to zelené menu tam nevidím. To bude asi těma divama.

[Riff]

Kód: [Vybrat]

.services ul li {
    vertical-align: top;
}


[Jarda_]

Super! Diky Ti Riff. 

Webhope co mas za verzi IE? Ja mam 11 a vypada to jak na tom obrazku. Misto toho divu tam pak teda zkusim dat span, a zmenit mu display style na block? Ja ho tam mam aby jako odkaz fungoval i prostor kolem, ne jen ten text.

[webhope]

Je to verze IE 6. Explorer normálně nepoužívám takže neaktualizuju a Firefox mi stačí to co mám. Lidi sice říkaj že 3.6 je stará, jenže z hlediska časového to není až tak úplně pravda. Tu 3.6 jsem instaloval před pár lety a ten vývoj jde strašně rychle, tak nevím co bych měl pořád aktualizovat. Nejvíc mě totiž štve že si nainstaluješ novou verzi a ta pak nebude fungovat tak spolehlivě jako ta stará verze apod. Takže nejsem příznivec změn, hlavně těch designových.

Z mého pohledu je ta stránka celá nepovedená a nefunkční. Především jsem nenašel jak děláš ty kulaté rohy, žádné obrázky tam nejsou, takže si asi použil nějakou vlastnost která vytváří kulaté rohy v CSS. Ale tato vlastnost nefunguje na starších prohlížečích. Taktéž není vidět to zelené menu, což je divné, ani text není vidět. Dej si tam popisky k těm odkazům protože tak člověk nevím na co má kliknout.

Kód: [Vybrat]

.services ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    display:inline-block:
}
Je nesmysl. Když nepoužíváš pozadí tak co chceš skrolovat a opakovat?
Spíš
.services ul li {
    background-color:#FFFFFF;
    display:block;
}

Všechno dát do blocků s pevně nastavenou výškou/šířkou, tak, aby ty prvky floatovaly doleva. Hlavně li. Díky tomu, že li nefloatují tak to IE hází jak kdyby tam bylo nějaké zalomení

tedy vidím

div
ul
- li
- li
- li
- li
- li
/ul
/div

místo

div ul  li li li li li /ul
/div

Z tvého obrázku to vypadá jak kdyby menubar ul mělo nějaký obrázek na pozadí, ale ten obrázek jsem tam nenašel.

[Reklama]

[Riff]

Tak samozřejmě že je to celý špatně, ale každý nějak začínal :-) Na začátku je člověk rád, že to funguje, techniku vypiluje časem.

Jako floatované blokové prvky to menu teoreticky být nemusí, proto tam má zřejmě ten inline-block, který float supluje. Což na druhou stranu díky absenci vertical-align způsobilo rozhašení menu v IE a díky tomu, že IE inline-block plně podporuje až od osmé verze se ti to v IE6 neřadí vedle sebe jako inline prvky. Na IE6 ovšem zapomeň, ten je mrtvý už pěkně dlouho(to samé by se ostatně dalo říct i o FF 3.6).

Kulaté rohy dělá pomocí border-radius a gradient na hoveru zase pomocí linear-gradient. Je dobré čas od času kouknout na stránky jako caniuse.com a podle podpory doplnit příslušné prefixy nebo fallbacky(nebo nejlíp používat nějaký framework pro LESS/SASS, ale prvořadé je zvládnout čisté CSS).

Osobně jsem zastánce přístupu, že stránka ve vykopávkách jako IE8 a nižších nemusí vypadat identicky jako v nejnověším webkitu, pokud je jinak plně funkční a nikde se nic nesype. Že se ve prastarém exploreru zobrazí hranaté rohy místo kulatých nevidím jako problém. Například u gradientů se ale za slušnost považuje přidat do definice fallback v podobě celobarevného pozadí.

[webhope]

Riff: tak už se mi to objasňuje, on totiž ten můj firebug neukazuje v css žádné z těch nepodporovaných stylů. To je velice podivné. Ale domníval jsem se že to tam bude udělané nějak takto, jenže firebug zradil. Zatím ale stejně upgradovat nehodlám. Mám rád starý dobrý a hlavně funkční 3.6 , jakmile mi designeři začnou vnucovat svůj design s přeházenými tlačítky apod. tak jdu od toho.

[Riff]

Tak to už dělej, jak uznáš za vhodný. Každopádně to povede k tomu, že nebudeš moct při kódování používat nejnovější postupy, což zvlášť při rychlosti vývoje CSS/HTML nemusí být dvakrát rozumné rozhodnutí ;-)