Forums

nidhins

hi everyone

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

html

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<title>Welcome to the abode of Kanichukulangara Devi::::</title>
<link href=\"style/oldenGold.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" >
</head>
<body>
	<div id=\"wrapper\">
			<div id=\"header\">
					<div id=\"head_text\">Welcome to the abode of Kanichukulangara Devi</div>
					<ul id=\"top_nav\">
						<li>Home</li>
						<li>Contact Us</li>
					</ul>
			</div>
			<div id=\"content\">
						<ul id=\"main_menu\">
								<li>Organizations</li>
								<li>Offerings</li>
								<li>Gallery</li>
								<li>Members</li>
						</ul>
			</div>
	</div>
	<div id=\"footer\">
	
	</div>
	
</body>
</html>

-------------------------------------------------------------
css

* {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.

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:

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.

treehouse : what would you like to learn today?

Forums

list-style-image not working in ie