IE7 ne prikazuje simbole(bullets) u listi

[ Tudfa @ 27.04.2009. 14:53 ] @

Poz,

pokušavam da nateram IE7 da mi prikaze umesto default bulleta moju sličicu u listi. E sad,
ne samo da neće da prikaze moju sličicu, nego neće da prikaze ni default bullet. U pitanju je
horizontalni meni, a evo i osnovnog sourca:

Code:

<style type="text/css">

ul,li{ margin:0; padding:0;}
#menu_holder ul li{float:left; width:100px; border:1px solid #333;}
#menu_holder ul{ overflow:auto;}
#menu_holder{ padding:10px 0;border:1px solid orange;text-align:center;}
#menu{padding:10px 0; width:204px; border:1px solid blue; margin:0 auto;}

</style>

<div id="menu_holder">
    <div id="menu">
          <ul>
            <li id="menu_li_home"><a href="#">Link</a></li>
            <li id="menu_li_about"><a href="#">Link</a></li>
          </ul>
    </div>
</div>

Inače u firefox-u radi bez problema i prikazuje moje sličice. Ovde sam naveo primer bez list-style-image:url() jer,
ako uspem da prikazem default bullet, verovatno neće biti problema ni sam mojom sličicom. Postavio sam ivice,
čisto da se bolje vidi o čemu se radi. Svaka sugestija je dobrodošla... Mozda posto su elementi liste float:left
to pravi problem,ali ne vidim kako bi drugacije ovo uradio. Sa display:inline opet bulleti neće biti prikazani.

[ Plug-n-Play @ 27.04.2009. 15:27 ] @

Ovo će da ti radi u oba browsera, samo dodaj ono ostalo što ti treba

_{[edit: dodati [code][/code] tagovi]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 27.04.2009. u 19:23 GMT+1]}

[ Tudfa @ 27.04.2009. 16:09 ] @

Ne znam da li si me dobro razumeo Plug-n-Play...

Tvoj primer radi u slučaju vertikalnog prikazivanja elemenata liste(sad govorim samo vezano za IE7), što meni nije cilj.

Kao što sam već napomenuo ja pravim horizontalni meni tj. meni gde su elementi liste prikazani u liniji jedan za drugim.
Čim postavim da elementi liste budu float:left jer hocu da ih prikazem horizontalno bulleti ne budu prikazani.

[ snake_master @ 27.04.2009. 17:11 ] @

Jesi li probao da tu sličicu koju hoćeš za list-style, dodeliš kao background na li element, ja sam neke stvari rešavao tako...

Code:

li {background: url() no-repeat;
background-position: /* ovde upiši vrednosti, da bi podesio mesto da bullet bude u ravni sa linkom */
}

[ Plug-n-Play @ 27.04.2009. 17:23 ] @

sorry, nisam obratio pažnju u brzini... ma ne treba ti float, dovoljno je display: inline. ovo dole radi u oba browsera, samo prilagodi malo...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bullets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">


#navlist li {
    background: url(../images/li.png) no-repeat 0 0;
    list-style-type: none;
    display: inline;
    padding: 0 10px 0 15px;
    }
.link {
    font-family: arial;
    color: #000;
    }
#link_1, #link_2, #link_3, #link_4, #link_5 {
    text-decoration:none;
    margin: 0 10px 10px 10px ;
    }
</style>
</head>
<body>
<div id="nav">
<ul id="navlist">
<li><a href="#" id="link_1"><span class="link">link one</span></a></li>
<li><a href="#" id="link_2"><span class="link">link two</a></li>
<li><a href="#" id="link_3"><span class="link">link three</a></li>
<li><a href="#" id="link_4"><span class="link">link four</a></li>
<li><a href="#" id="link_5"><span class="link">link five</a></li>
</ul>
</div>
</body>
</html>

_{[edit: dodati [code][/code] tagovi]}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 27.04.2009. u 19:24 GMT+1]}

[ Tudfa @ 27.04.2009. 17:24 ] @

@snake_master

Pa hteo sam da to izbegnem, da vidim hoće moći ovako i da shvatim zašto ne radi u Internet Exploreru a u Firefox-u radi normalno...
Baš sad googlam, oko toga ali još nisam skapirao gde je problem.U svakom slučaju background slika ostaje kao alternativa. Tnx

[ snake_master @ 27.04.2009. 17:35 ] @

Citat:

Plug-n-Play: sorry, nisam obratio pažnju u brzini... ma ne treba ti float, dovoljno je display: inline. ovo dole radi u oba browsera, samo prilagodi malo...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bullets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#navlist li {
background: url(../images/li.png) no-repeat 0 0;
list-style-type: none;
display: inline;
padding: 0 10px 0 15px;
}
.link {
font-family: arial;
color: #000;
}
#link_1, #link_2, #link_3, #link_4, #link_5 {
text-decoration:none;
margin: 0 10px 10px 10px ;
}
</style>
</head>
<body>
<div id="nav">
<ul id="navlist">
<li><a href="#" id="link_1"><span class="link">link one</span></a></li>
<li><a href="#" id="link_2"><span class="link">link two</a></li>
<li><a href="#" id="link_3"><span class="link">link three</a></li>
<li><a href="#" id="link_4"><span class="link">link four</a></li>
<li><a href="#" id="link_5"><span class="link">link five</a></li>
</ul>
</div>
</body>
</html>

Ne znam da li na ovaj način koji si naveo može da stavi:

Code:
#link a {display: block;}

ako se ne varam jedno s drugim neće raditi:

Code:
li {display: inline;}
li a {display: block;}

[ Tudfa @ 27.04.2009. 17:39 ] @

@Plug-n-Play

Tek sam sad video tvoj post...
Inače ovo što ste obojca predložili radi, tako da ću se najverovatnije( kad se još malo umorim od googlanja) odlučiti za rešenje sa background.

[ Tudfa @ 27.04.2009. 18:49 ] @

Ne vredi, nisam pronašao šta pravi problem kod IE7 kad se koristi float, tako da sam uradio sa background.
Hvala obojci na trudu.