<ul>, <li> i IE

valderama · 23. 02. 2009.

Imam nekih problema sa IE i postojećim layoutom koji je čitav urađen korišćenjem lista (ul-li tagovi). Da bih u potpunosti eliminisao CSS, otišao sam na w3schools i uzeo njihov primer:

Kôd:

<html>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Problem je kada se <li> element koji sadrži "Tea" izmeni tako da ne sadrži taj tekst:

Kôd:

<html>
<body>

<ul>
  <li>Coffee</li>
  <li>
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

FF i Opera to prikazuju na jedan način (smeste ugnježdeni <ul> odmah u liniji sa <li>), dok IE uvek prikazuje <li> red, bez obzira na to da li taj element ima tekst ili ne, tako da potisne ugnježdeni <ul> jedan red niže, što ne može da se ispravi CSS-om.
O čemu se ovde radi? Imate li neka iskustva sa ovim problemom i kako ga prevazići (osim da se promeni layout)?

cvele · 23. 02. 2009.

realno, ti idalje imas space iza <li> elementa. ubi taj space pa vidi kako izgleda.

valderama · 23. 02. 2009.

Već probao... nije to... Izgleda da je problem do IE. Samo se pitam da li postoji rešenje tog problema (a da sve ostane u <ul> i <li> tagovima).

artur_dent · 23. 02. 2009.

moze "display = none"?

valderama · 23. 02. 2009.

Citat:

Originalno napisao artur_dent

moze "display = none"?

Mislim da to neće rešiti problem, zato što style="display:none" sakriva tag sa svim child tagovima, tako da će nestati i ugnježdena lista.

bOkIcA · 23. 02. 2009.

Deluje kao prljav hack ali mozda ti da ideju.

PHP kôd:


			
<html>

    <head>



        <style type="text/css">

            ul,li {

                padding-top: 0;

                list-style: none;

                }

        </style>

<!--[if IE]>

        <style type="text/css">

            li  ul {

                margin-top:-1.1em;

                }

        </style>

<![endif]-->



    </head>

    <body>



        <ul>

          <li>Coffee</li>

          <li>

                  <ul>

                    <li>Black tea</li>

                    <li>Green tea</li>

                </ul>

            </li>

          <li>Milk</li>

        </ul>



    </body>

</html>

valderama · 23. 02. 2009.

Citat:

Originalno napisao bOkIcA

Deluje kao prljav hack ali mozda ti da ideju.

Nešto slično sam pokušao (negativnu top marginu), ali mi se činilo baš kao prljavo rešenje, tim pre što je baš vezano za rešavanje specifičnog slučaja, a ja pokušavam neko sistemsko rešenje... da pokrije bilo koju pojavu ovog slučaja, u bilo kom kontekstu...

Izgleda da će ipak morati da se menja čitav layout...

vladv · 04. 03. 2009.

u style za IE ubacis ovo da se resis whitespace bug a

Kôd:

 ul li {  zoom:1;  vertical-align:bottom; }

valderama · 07. 03. 2009.

Citat:

Originalno napisao vladv

u style za IE ubacis ovo da se resis whitespace bug a

Kôd:

 ul li {  zoom:1;  vertical-align:bottom; }

Izgleda da je to to! Hvala!

23. 02. 2009.	#1
valderama novi član Datum učlanjenja: 12.10.2006 Poruke: 9 Hvala: 5 0 "Hvala" u 0 poruka	<ul>, <li> i IE Imam nekih problema sa IE i postojećim layoutom koji je čitav urađen korišćenjem lista (ul-li tagovi). Da bih u potpunosti eliminisao CSS, otišao sam na w3schools i uzeo njihov primer: Kôd: <html> <body> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> Problem je kada se <li> element koji sadrži "Tea" izmeni tako da ne sadrži taj tekst: Kôd: <html> <body> <ul> <li>Coffee</li> <li> <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> FF i Opera to prikazuju na jedan način (smeste ugnježdeni <ul> odmah u liniji sa <li>), dok IE uvek prikazuje <li> red, bez obzira na to da li taj element ima tekst ili ne, tako da potisne ugnježdeni <ul> jedan red niže, što ne može da se ispravi CSS-om. O čemu se ovde radi? Imate li neka iskustva sa ovim problemom i kako ga prevazići (osim da se promeni layout)?

23. 02. 2009.	#4
artur_dent I think I'm a sofa... Professional Datum učlanjenja: 16.11.2005 Poruke: 438 Hvala: 9 28 "Hvala" u 25 poruka	moze "display = none"? __________________ fotomanijak.com stvarno manijak WebManijak.com

23. 02. 2009.	#6
bOkIcA Bojan Abramovic Professional Datum učlanjenja: 17.01.2008 Lokacija: Novi Sad Poruke: 232 Hvala: 30 47 "Hvala" u 30 poruka	Deluje kao prljav hack ali mozda ti da ideju. PHP kôd: <html> <head> <style type="text/css"> ul,li { padding-top: 0; list-style: none; } </style> <!--[if IE]> <style type="text/css"> li ul { margin-top:-1.1em; } </style> <![endif]--> </head> <body> <ul> <li>Coffee</li> <li> <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>

04. 03. 2009.	#8
vladv novi član Na probnom radu Datum učlanjenja: 08.06.2007 Lokacija: Beograd Poruke: 15 Hvala: 1 2 "Hvala" u 2 poruka	u style za IE ubacis ovo da se resis whitespace bug a Kôd: ul li { zoom:1; vertical-align:bottom; } Poslednja izmena od vladv : 04. 03. 2009. u 13:23.

23. 02. 2009.	#2
cvele Banned Knowledge base Datum učlanjenja: 01.07.2005 Poruke: 1.598 Hvala: 206 140 "Hvala" u 89 poruka	realno, ti idalje imas space iza <li> elementa. ubi taj space pa vidi kako izgleda.