Jump to content

lists and bullet images


Brendon Branigin
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ;/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...