Štýlované zoznamy a IE

1. Návštěvník 624AFAF1 20. 3. 2005 09:17

   Mám problém so zobrazovaním zoznamov na mojich stránkach. Totiž, v IE (mám 5.0) sa pod odkazom v zozname urobí prázdne miesto (tam kde nie je odkaz je to v pohode). Túto chybu mám iba v IE, teda dúfam že iba v ňom ;-) Tu je zdroj z HTML : <div class="menucontent"> <ul> <li><a href="index.php?id=astronomia" class="first">Astronómia</a></li> <li><a href="index.php?kat=slnsustava&id=main">Slnečná sústava</a></li> <li class="nolink">Hviezdy</li> <li class="nolink">Súhvezdia</li> <li class="nolink">Pozorovania</li> <li class="nolink">Súradnice</li> <li class="nolink">Ďalekohľady</li> <li class="nolink">Sondy</li> <li class="nolink">Vesmírne stanice</li> </ul> </div> CSS trochu upravené do tohoto fóra (čitateľnejšie ;-) : .menucontent{ border-width:0 1px 1px 1px; border: 1px solid #B7B7B7; padding-top:1px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px;} .menucontent ul { list-style-type: none; padding: 0px; margin: 0px;} .menucontent ul li{ padding: 0px; margin: 0px;} .menucontent ul li.nolink {padding: 0px; margin: 0px; padding-left: 2px; display: block; text-decoration: underline; border-left: 8px solid #E5E5E5; border-bottom: 1px solid #CFCFCF; border-right: 1px solid #bbb; background-color: #F0F0F0; color: #333; text-decoration:none;} .menucontent ul li a:link, .menucontent ul li a:visited {padding: 0px; margin: 0px; padding-left: 2px; display: block; text-decoration: underline; border-left: 8px solid #E5E5E5; border-bottom: 1px solid #CFCFCF; border-right: 1px solid #bbb; background-color: #F0F0F0; color: #333;} .menucontent ul li a.first:link, .menucontent ul li a.first:visited {padding: 0px; margin: 0px; padding-left: 2px; display: block; text-decoration: underline; border-left: 8px solid #E5E5E5; border-bottom: 1px solid #CFCFCF; border-right: 1px solid #bbb; background-color: #F0F0F0; color: #333; border-top: 1px solid #B7B7B7;} .menucontent ul li a:hover {border-left: 8px solid #DADADA; border-bottom: 1px solid #ccc; border-right: 1px solid #bbb; background-color: #FAFAFA; color: #333; text-decoration: none;} .menucontent ul li a.first:hover {border-left: 8px solid #DADADA; border-bottom: 1px solid #ccc; border-right: 1px solid #bbb; background-color: #FAFAFA; color: #333; text-decoration: none; border-top: 1px solid #B7B7B7;} Originál CSS čo mám na stránkach /*astronomia.wz.cz/css/main.css*/ .menucontent{border-width:0 1px 1px 1px;padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;} .menucontent ul{list-style-type:none;padding: 0px;margin:0px;} .menucontent ul li{padding:0px;margin:0px;} .menucontent ul li a:link, .menucontent ul li a:visited, .menucontent ul li a.first:link, .menucontent ul li a.first:visited, .menucontent ul li.nolink, .menucontent ul li.firstnolink{padding:0px;margin:0px;padding-left:2px;display: block;text-decoration:underline;} .menucontent ul li a:hover, .menucontent ul li.current, .menucontent ul li.currentfirst, .menucontent ul li a.first:hover, .menucontent ul li.nolink, .menucontent ul li.firstnolink{text-decoration:none;} /*astronomia.wz.cz/css/colors/white.css ----- farby*/ .menucontent {border: 1px solid #B7B7B7;} .menucontent ul li a:link, .menucontent ul li a:visited, .menucontent ul li a.first:link, .menucontent ul li a.first:visited, .menucontent ul li.nolink, .menucontent ul li.firstnolink {border-left: 8px solid #E5E5E5; border-bottom: 1px solid #CFCFCF; border-right: 1px solid #bbb; background-color: #F0F0F0; color: #333;} .menucontent ul li a.first:link, .menucontent ul li.currentfirst, .menucontent ul li a.first:visited, .menucontent ul li.firstnolink {border-top: 1px solid #B7B7B7;} .menucontent ul li a:hover, .menucontent ul li.current, .menucontent ul li.currentfirst, .menucontent ul li a.first:hover {border-left: 8px solid #DADADA;border-bottom: 1px solid #ccc; border-right: 1px solid #bbb; background-color: #FAFAFA; color: #333;}

2. Návštěvník 922082FE 20. 3. 2005 11:27

   Neni to samozřejmě řešení, jen taková podivnost IE, když dáš pod ten styleshet: li { border: 1px solid #f7f3f7; } tak mezery zmiznou.

3. Návštěvník 922082FE 20. 3. 2005 12:02

   Už to vidím, odkaz je přehozen na display block, proto nemůže být v line tagu, kterým je <li>. Musel bys mu dát nějak float: ...;, nebo align="...". Lepší by asi bylo, místo seznamu, to celé nějak za<div>it.

4. Návštěvník 624AFAF1 20. 3. 2005 18:08

   <div> mi aj pomohol, lenže potom mám celý zdroják taký <div>ný ;-) a zoznamy by boli v tomto prípade krajšie

5. Návštěvník 922082FE 20. 3. 2005 18:43

   Tak mi napadlo, když jsou odkazy display block, tak je můžeš formátovat jako <div> a nemusí tam být nic. Můžeš jim dát klidně třídu přímo: <a class="prvni" href="... a:line.prvni { ... }

6. Návštěvník 624AFAF1 21. 3. 2005 18:36

   IMHO veci ako je aj border (čo tam mám aj ja) nejde, musí tam byť <div> alebo nejaké podobné veci (napríklad tie zoznamy) Ale už som to rozbehal aj s div-mi takže nie je problém

← Zpět na všechna témata