• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 458
  • Last Modified:

CSS Button with class icon

I have developed a button but failed to display the icon as a class when displaying the background of the button, when not the icon displays.

Here's my style code:
#forum_options {
}
#forum_options a:link {
background: url("bckg_mainmenu_btn.png") repeat;
display:inline-block;
border:thin silver solid;
height:18px;
vertical-align:middle;
padding-top:4px;
padding-left:24px;
padding-right:5px;
margin-left:5px;
margin-right:1px;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
color:silver;
text-decoration:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#forum_options a:visited {
  border:thin silver solid;
  color:silver;
}
#forum_options a:hover {
  border:thin white solid;
  color:white;
}
.icon_read{
background: url("read.png") no-repeat;
background-position:4px center;
}
.icon_rss{
background: url("rss.png") no-repeat;
background-position:4px center;
}

Open in new window


Here's the href:
<div id="forum_options">
 <a class="icon_read" href="#">Generic Button</a>
 <a class="icon_rss" href="#">RSS</a>
 </div>

Open in new window


And the test page live: http://dubaimanianet.ipage.com/temp/button_test.html
Whereas in the first line the problem with the style code up mentioned. And on the second line if I remove the background.

Question: how to keep the bckg and display the icon?

Thanks!
0
nsiotto
Asked:
nsiotto
1 Solution
 
gavsmithCommented:
You can not apply two different backgrounds on the same element. Your best bet would be to add a span inside the link and tweak the style slightly:

#forum_options {
}
#forum_options a:link {
background: url("bckg_mainmenu_btn.png") repeat;
display:inline-block;
border:thin silver solid;
height:18px;
vertical-align:middle;
padding-top:4px;
padding-right:5px;
margin-left:5px;
margin-right:1px;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
color:silver;
text-decoration:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#forum_options a:visited {
  border:thin silver solid;
  color:silver;
}
#forum_options a:hover {
  border:thin white solid;
  color:white;
}
.icon_read{
background: url("read.png") no-repeat;
padding-left:24px;
background-position:4px center;
}
.icon_rss{
background: url("rss.png") no-repeat;
padding-left:24px;
background-position:4px center;
}

Open in new window


<div id="forum_options">
 <a href="#"><span class="icon_read">Generic Button</span></a>
 <a href="#"><span class="icon_rss">RSS</span></a>
 </div> 

Open in new window


Hope that helps
Gav
0
 
nsiottoAuthor Commented:
I knew the solution was in the span. I was eager to see if there was also an alternative but this solves my issue anyhow. Thanks!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now