Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Current page with icon

current page, link, icon



5:13 pm on May 4, 2011 (gmt 0)

5+ Year Member

Hi Guys,
Could you help me with this issue?
I created a list with left "dot" icon img.
I created a current class.When the link is correspondent to the current page the left icon will be changed to "heart" icon img.
The current class is working properly, but the heart icon is overlapping the dot icon. I would like to remove the dot icon when the heart icon appears.How to do that?

This is my sample:
#menu {
width: 250px;
height: 390px;
#menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
#menu ul li {
padding-bottom: 35px;
padding-left: 3px;
#menu ul li a {
color: #412b39;
text-decoration: none;
font-size: 18px;
background-image: url(images/dot-icon.png);
background-repeat: no-repeat;
background-position: left center;
display: block;
padding-left: 20px;
#menu ul li a:hover {
color: #F9C;
text-decoration: underline;
.current {
background-image: url(images/heart-icon.png);
background-repeat: no-repeat;

<div id="menu">
<li class="current"><a href="index.html">sample</a></li>
<li><a href="sample.html">sample1l</a></li>
<li><a href="sample.html">sample2</a></li>


6:14 pm on May 4, 2011 (gmt 0)

5+ Year Member

My online sample:
As you can see the heart icon is behind of dot icon.
I would like to hide the dot icon in current state and just shows the heart icon.

[edited by: alt131 at 1:25 pm (utc) on Dec 6, 2011]
[edit reason] Thread Tidy -404 [/edit]


6:30 pm on May 4, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

You are applying the dot-icon.png background to the a element, but the heart-icon.png background to the li element. You need to make those consistent. For example, instead of ".current", you could specify this as the selector:

#menu ul li.current a


7:24 pm on May 4, 2011 (gmt 0)

5+ Year Member

Thanks a lot for your help.
I didn't realize this detail.

Featured Threads

Hot Threads This Week

Hot Threads This Month