lists and bullet images

[Brendon Branigin]

Im making a navigation system that calls for custom bullet images (one for normal and one for hover)i set it up so that "#navigatin li" uses one images and "#navigation li:hover" uses another and it works fine in firefox but in IE it does not change the images, how do i fix this?AlsoHow can i get the top border of the li to go over the bullet image?

[Brendon Branigin]

never mind on the 2nd question ;/ figured out i had to set the list to display inside ;/

[raimo]

Im making a navigation system that calls for custom bullet images (one for normal and one for hover)i set it up so that "#navigatin li" uses one images and "#navigation li:hover" uses another and it works fine in firefox but in IE it does not change the images, how do i fix this?

IE supports hover only with a-element. You need to use some nice Javascript to change images.Try:

<script type="text/javascript">function out(obj){obj.style.listStyleImage = 'url(img1.gif)';}function over(obj){obj.style.listStyleImage = 'url(img2.gif)';}</script><ul><li onmouseover="over(this)" onmouseout="out(this)">item1</li><li onmouseover="over(this)" onmouseout="out(this)">item2</li></ul>

Can't test it just now with IE (living in Linux) but should work with all browsers.Set CSS list-style-type: none; and there is no that original list-bullet, only image exists.http://www.w3schools.com/css/pr_list-style-type.asp

[Brendon Branigin]

I actualy ended up styling the backgrounds to the links with the imgs thanks for the help though.another problem you might be able to help me withI have 2 links that need to be inline, "link 1" needs to be preceded by "img 1""img 2" needs to proceed "link 1""link 2" needs to proceed "img 2"this all needs to be in the top right corner of my wrapper divi have it set up as a ul with 2 li'seach li has a class (1 and 2).1 is styled with a bg of img 1 which is non repeat align left vertical center.2 is the same as .1 but with img 2 as bgit works great in ie but ff doesnt even recognize the stylesheres the css

}.1 {	background-image: url(images/tm1.gif);	background-repeat: no-repeat;	background-position: left center;}.1 a:link {	margin-left: 15px;	text-decoration: none;	color: #000000;}.2 {	background-image: url(images/tm3.gif);	background-repeat: no-repeat;	background-position: left center;}.2 a:link {	margin-left: 15px;	text-decoration: none;	color: #000000;}

<div id="header">    <ul>      <li class="1"><a href="forums/usercp.php">my account</a></li>   <li class="2"><a href="http://www.runuo.com/contacts.php">contact us</a></li>    </ul>  </div>

I know theres propably a better way using some sort of special child/ancestor selector of some sort. please enlighten me ;/

[raimo]

Element class name or id can't be a plain number. So class="li1" works fine, but class="1" don't work at all.

[Brendon Branigin]

thanks, i changed the classes and it works perfectly