please look at this link
http://sudhakargolakaram.co.in/files...ontallist.html


my question is about showing icons when the mouse moves over the links



in the case of the 1st list it working fine but when i hover over the mouse i do not see the icons for each of the link also the amount of space between the icons and the 1st letter in each list needs a little extra space, when i add extra left padding then it works fine for few links but for others the gap increases


in case of 2nd list i have used separate classes for each list items however when i am not able to see the icons and also on hover i cannot see the icons for each of the links

i have used png images for the icons and also for the repeating background image on mouse over

please advice how i can fix this

thanks

i have updated the file at
http://sudhakargolakaram.co.in/files...ontallist.html

everything is working fine the only thing i need is for the last list item i also need the divider line on the right side of the list item

i have a background image for each of the links presently so when i add the divider image as top right for the last list item the icon for the last list item disappears

i have tried adding additional class to li and to a also tried adding and id to the anchor tag but i am not getting both the icon and the divider line at the right side for the last list item

please advice how i can fix this

thanks

You could use this...

http://www.quirksmode.org/css/firstchild.html

for the last list item i also need the divider line on the right side of the list item

Add a class for 'lastItem' and put in the divider image on the right where you want it.

hen i add the divider image as top right for the last list item the icon for the last list item disappears

Sounds to me like your container (in this case your UL) isn't wide enough to hold all the list items + the images. Check the totals on your widths+padding+margins.

You also need to CLEAR your floats inside the UL.

thanks for replying

i have added a class to the last list item but in this case the divider does not appear on the left side

the a tag of the last list item already has a background icon so if i add another class to this a tag then i do not see the icon

i have checked the width of the div and reduced the amount of padding and there are no margins on the ul li or ul li a

if i get the divider then i do not see the icon or vice versa
regarding clearing floats for ul should it be

.topmenu ul {
clear: both;
list-style-type: none;
margin: 0;
padding: 0;
}

or should this clear: both be somewhere else

The clearing element has to come AFTER the ul. Putting clear:both ON the ul will not clear the floats.

following is the code with the changes i have made but i do not see the divider for the last list item at the right side

<div class="topmenubg">
<div class="topmenuwrapper">
<div class="topmenu">
<ul>
<li><a href="#" class="journals">Journals</a></li>
<li><a href="#" class="author">Author Resources</a></li>
<li><a href="#" class="about">About Us</a></li>
<li><a href="#" class="peer">Peer Reviewers</a></li>
<li><a href="#" class="newsa">News</a></li>
<div class="clear"></div>
</ul>
</div>
<!-- topmenu ends -->

</div>
<!-- topmenuwrapper ends -->
</div>
<!-- topmenubg ends -->



.topmenubg {
float: left;
width: 100%;
height: 40px;
margin-top: 20px;
background: url('topmenubg.jpg') repeat-x top left;
}
.topmenuwrapper {
width: 940px;
margin: 0 auto;
}
.topmenu {
float: left;
width: 718px;
height: 36px;
padding: 2px 0 2px 0;

}
.topmenu ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0 0 0 0;
}

.topmenu ul li{
display: inline;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 10px;
background: url('topmenu_divider.gif') no-repeat top left;
}


.topmenu ul li a {
color: #fff;
font: bold 13px Gotham, Verdana, Arial, sans-serif;
text-decoration: none;
display: block;
padding: 10px 20px 10px 20px;
}


.topmenu ul li.newsli a{
background: url('topmenu_divider.gif') no-repeat top right !important;
}


.topmenu ul li a.journals {
background: url('journals.png') no-repeat 2px 10px;

}
.topmenu ul li a.author {
background: url('author.png') no-repeat 2px 10px;

}
.topmenu ul li a.about {
background: url('about.png') no-repeat 2px 10px;

}
.topmenu ul li a.peer {
background: url('peer.png') no-repeat 2px 10px;

}

.topmenu ul li a.newsa {
background: url('news.png') no-repeat 0px 10px;
}

.topmenu ul li:hover{
background: #ccc;
}