Image and link issue

Good day mates,

I'm 2 months new to CSS :) and I am having quite an issue at the moment, I am trying to set an image as a link with CSS, but the problem is that it does not take all the size the image has but just a portion of it. Just to make it more clear, I'm not using the image as a background, but as the link itself.

I dont want to use XHTML or PHP to determine the link with the image since I want to set it as the main template of the website.

Just to give you more data, the image I use has 20x60 pixels in size (being 20 height x 60 width pixels).

The CSS code for the button (and link) in question looks as the following:

/* This would be the container */

.carrito {
float:right;
margin-left:30px;
margin-top:5px;
margin-right:5px;
width:60px;
height:20px;
border:#000 solid 1px;
}

/* This would be the parameters for the link */

.carrito a:link {
color:transparent;
background-image:url(img/carritoa.jpg);
}

.carrito a:visited {
color:transparent;
background-image:url(img/carritoa.jpg);
}

.carrito a:hover {
color:transparent;
background-image:url(img/carritob.jpg);
}

.carrito a:active {
color:transparent;
background-image:url(img/carritoa.jpg);
}

And the HTML just has a div container as the following:

<div class="carrito">
<a href="#">Carrito</a>
</div>

It came to my mind that may be the browser (Firefox) had a predetermined size set or something like that for images in links, so I thought also I could set the height and the size of the image used in the parameters of the pseudoclasses, but to no avail.

I would appreciate your help with this issue, may be I am missing something that a pro knows :) since I am still a beginner.

If you need any other data, let me know and I'll reply asap.

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>link with background-image</title>

<style type="text/css">
.carrito {
float:right;
border:1px solid #000;
margin:5px 5px 0 30px;
}
.carrito a,.carrito a:visited,.carrito a:active {
display:block;
width:60px;
height:20px;
background-image:url(img/carritoa.jpg);
}
.carrito a:hover {
background-image:url(img/carritob.jpg);
}
</style>

</head>
<body>

<div class="carrito">
<a href="#">Carrito</a>
</div>

</body>
</html>

Image and link issue

using display:block

hurafloyd

birdbrain

rocknbil

hurafloyd

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week