CODEWITHSUNDEEP
css
IlludiumPu36
IlludiumPu36

Reputation: 4304

anchor background image - anchor text overlaying image

I have the following CSS which displays a background image in the anchor. The problem is that the link text is displaying over the image. Any ideas?

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-right:50px;
display:inline-block;    
}

Upvotes: 1

Views: 18663

Answers (2)

James Coyle
James Coyle

Reputation: 10398

Just add the required padding-left? If the image is 30px do something like padding-left:32px' and it will push the text to the right of the image.

Upvotes: 0

IlludiumPu36
IlludiumPu36

Reputation: 4304

I added padding-left which shifted the text over to the right...

a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;    
text-decoration: none;
vertical-align:text-center;
}

Upvotes: 3

Related Questions