webForumDet fria alternativet

IE-problem. ul och li

6 svar · 503 visningar · startad av nummersju

nummersjuMedlem sedan aug. 2005198 inlägg
#1

Hej hej!
I morse satt jag och pulade med css en stund. Kom på att jag skulle hitta på ett snyggt sätt att göra en produktmeny. Nog om det.
När jag är klar och har kollat den med FF hela tiden och är jättenöjd, så är det dags att titta på den i MSIE och vad får man se? Ja, det ser inte alls ut som det ska :(

http://nummersju.net/css/ul-li/test1.html
http://nummersju.net/css/ul-li/stilen.css

Någon som har lust att kolla på css-filen och ge några tips till varför den inte ser ut som den ska i MSIE?
Tack på förhand

nummersjuMedlem sedan aug. 2005198 inlägg
#2

Löste problemet på ett ganska smidigt sätt.
Genom att tabort bakgrundsfärgen på ul, ändra lite padding's och sätta <span class="rub"> på rubrikerna i stället...
Detta ger ändock olika reslutat, men det ser snyggare ut MSIE.
Ett problem kvarstår dock, varför hamnar list-image högre inte i mitten i MSIE?

http://www.nummersju.net/css/ul-li/test1-ie.html
http://www.nummersju.net/css/ul-li/stilen-ie.css

InsiderMedlem sedan jan. 2000978 inlägg
#3

Det är en bugg i explorer som uppstår när man sätter en fast bredd på en <UL> eller <OL>.
Beskrivning: http://www.quirksmode.org/css/tests/iewin_olwidth.html

Lösning: Ta bort width-egenskapen på #nav2 ul och på #nav2 li. Sätt bredden direkt på #nav2 istället. Ta även bort float:left på #nav2 li, så det inte blir ett block-element och tappar indraget på vänster sida.

#nav2 {width:300px;}
	
#nav2 ul {
	padding: 0px;
	padding-left: 10px;
	list-style-position: inside;
	background: #eee;
	font-weight: bold;
	list-style-image: url(square-menu.gif);
	clear: both;
	[S]adisplay: block;[/S]
	}
	
#nav2 li {
	background: #fff;
	font-weight: normal;
	}
nummersjuMedlem sedan aug. 2005198 inlägg
#4

Tack för hjälpen! Men det räcker inte :( Bakgrundsfärgen blir konstig ändå och list-image sitter ännu för högt upp i MSIE...
Något mer förslag?

webbebbaMedlem sedan juni 200573 inlägg
#5

Prova med {list-style: none;} i #nav2 ul och styr upp måtten i #nav2 li t ex {background: url(square-menu.gif) no-repeat 2px 8px;} eller vilka mått du nu skall ha. Ta då också bort {list-style-position: inside;}

nummersjuMedlem sedan aug. 2005198 inlägg
#6

Ah, smart idé, ska prova med en gång! :D

nummersjuMedlem sedan aug. 2005198 inlägg
#7

Nu har jag äntligen fått det att fungera likadant i MSIE och FF, tack för hjälpen både webbebba och Insider.
http://nummersju.net/css/ul-li/test1.html
http://nummersju.net/css/ul-li/stilen.css

125 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
122 ms — hämta tråd, inlägg och bilagor (db)