ugrás a tartalomhoz

CSS-ben formázott horizontális lista IE alatt nem működik rendesen

griphons · 2007. Dec. 12. (Sze), 16.19
A fent említett listát menüként használom.
A menülemek között képet jelenítenék meg. Firefox alatt a list-style-image gond nélkül megjelenik, IE alatt azonban mihelyt horozontálisan jelennek meg az elemek (float: left;) a kis képet nem rakja ki.

Van valakinek vmi ötlete? Szeretném Css-sel formázni a menüsort mint listát, nem akarom képekkel tagolni a menüt.
‹ Flash háttérzene frame megoldással Ismétlődő háttér problémája ›
 ■
1

kód link stb

gex · 2007. Dec. 12. (Sze), 16.29
kód link stb... te ennyiből meg tudnád oldani?
2

bocsi

griphons · 2007. Dec. 12. (Sze), 16.46
CSS:
li.menu {
	float: left;
	list-style: none url(../img/menuke.gif);
	margin-right: 25px;
}
HTML:
<ul>
<li class="menu"><a href="main.php?pg=0">menu1</a></li>
<li class="menu"><a href="main.php?pg=1">menu2</a></li>
<li class="menu"><a href="main.php?pg=2">menu3</a></li>
<li class="menu"><a href="main.php?pg=3">menu4</a></li>
</ul>
Hát ez a lényeg. Ie alatt a list-style-image-t nem jeleníti meg, ff alatt meg igen. Fura.
3

Közben megoldottam a problémát :D

griphons · 2007. Dec. 12. (Sze), 16.54
Közben találtam egy megoldást egy oldalon.
Background tulajdonságot alkalmaztam a listaelemeknél, így nincs szükség a list-style-image-ra, és ez ie-n is ff-nél is megjelenik.
Kicsit ugyan bűvészkedni kell a margin-padding-gal, de működik :D
4

list-style-image, ie vs ff

gex · 2007. Dec. 12. (Sze), 17.50
valószínűleg az volt a probléma nálad, hogy az ie és az ff (és még sok más böngésző) eltérő margin és padding értékeket ad alapbeállításként a különböző elemeknek. ezt kiküszöbölendő mindig állítsd be ezeket az értékeket, akár úgy is, hogy globálisan mindent lenullázol, és utána külön megadod ahol szükség van rá.

a list-style-image helyett valóban jó döntés a background-image, könnyebb pozícionálni.

ha pedig bűvészkedésnek érzed a margin és padding beállítását, akkor szerintem nem strict doctype-ot használsz, mivel így eltérő doboz-modellt használnak a böngészők (máshogy értelmezik a margin, border és padding helyét).
5

lehet...

griphons · 2007. Dec. 12. (Sze), 20.33
a margin és padding beállítások eltérő kezelését ismerem, azzal nem volt gond.
A probléma abból adódott, hogy az IE a lista elem kezdő jelét nem teszi ki ha float-tal formázom a listaelemeket. A FF-nak viszont ez nem gond.

Bűvészkedés alatt azt értettem, hogy a listaelem szövegét és a háttérképként használt képecskét úgy hozzam szinkronba, hogy két listaelem között megfelelően középen legyen a grafika. Hhhez egy nagyobb padding-left és egy kisebb margin-left érték kellett, de ez csak apró "bűvészkedés" volt, mert ezen már nem akartam számolgatni a pixeleket.

Köszönöm kérdésed a doctype-pal minden rendben, standard értéken működik ie és ff alatt is, úgyhogy ez nem zavart be.

Azért a segítséget köszi.
Ez a fullreset reload elég kemény, én csak bizonyos elemekre szoktam alkalmazni, pl div, p, td, th, ul, ol, és persze a bodynál. Ha valahol mégis kell, ott szintén előbb alapállapotra állítok, és itána jöhet az id-s szeparáció.

Kösz mégegyszer!