list-style-image not working in ie

[nidhins]

hi everyone

list-style-image property is not working in ie please help

html

Code:

Welcome to the abode of Kanichukulangara Devi

• Home
• Contact Us

• Organizations
• Offerings
• Gallery
• Members

---

css

Code:

* {margin:0; padding:0;}

ul#main_menu
{
float:right;
padding-right:5px;
padding-top:10px;

}
ul#main_menu li
{
color:#f3b02a;
float:left;
padding-right:30px;
list-style-image:url(li_mage.png);
}

div#footer
{
background-color:#ffff88;
height:25px;
width:inherit;
}
div#header
{
background-image:url(../images/background/header_back.png);
background-repeat:no-repeat;
width:980px;
height:50px;
margin:0;
padding:0;
background-position:right;

}

ul#top_nav
{
margin-top:10px;
float:right;

}
ul#top_nav li
{
list-style:none;
display:inline-block;
float:left;
padding:10px;
font-weight:bold;
color:#510000;
padding-right:32px;
}

div#head_text
{
font-weight:bold;
color:#510000;
font-size:1em;
float:left;
margin-top:15px;
padding-left:10px;
}
div#content
{
border-style:solid;
border-color:#f3b02a;
border-bottom:none;
border-top:none;
width:980px;
height:565px;

}
div#wrapper
{
margin:0 auto;
width:980px;
height:615px;
}

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-image:url(../images/background/width_main_back.png);
background-repeat:repeat-x;

}

live example : http://kanichukulangaradevitemple.com/

thanks
nidhin

[AshtonSanders]

I would just use Background-image instead of the list style image. I’ve heard this complaint a couple times but have never had the problem myself.

Code:

ul#main_menu li
{
color:#f3b02a;
float:left;
padding-right:30px;
background:url(li_mage.png) left center no-repeat;
}

[nidhins]

thanks for the reply it works but the problem is that the letters overrite the image….i want it exactly like the dots in list items..

the problem can be sloved by using couple of  

is there any other solution fr this?

[AshtonSanders]

super easy:

Code:

ul#main_menu li
{
color:#f3b02a;
float:left;
padding-right:30px;
[b] padding-left: 30px;[/b]
background:url(li_mage.png) left center no-repeat;
}

Why do you have padding right anyway? I have a feeling you just mixed up your left/right ;)

[nidhins]

thanks for the help
it worked ….. i think often i get mixed up because i’m new to css.. :)

[AshtonSanders]

Not a problem. You’ll get the hang of it.

[Author]

Posts