6 svar · 505 visningar · startad av nummersju
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
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
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;
}
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?
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;}
Ah, smart idé, ska prova med en gång! :D
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