# CSS rollovers

**URL:** <https://forum.kirupa.com/t/css-rollovers/112657>\
**Category:** Uncategorized\
**Created:** [June 10, 2004, 2:40am UTC](https://forum.kirupa.com/t/css-rollovers/112657 "2004-06-10T02:40:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RussianBeer](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/russianbeer/32/152_2.png) [@RussianBeer](https://forum.kirupa.com/u/RussianBeer)\
**Post date:** [June 10, 2004, 2:40am UTC](https://forum.kirupa.com/t/css-rollovers/112657/1 "2004-06-10T02:40:10Z")

</div>

Hey guys,  
I have created a roll-over via CSS which basicaly swaps the background of an image, the only thing is I want the roll over to be 140px wide and 25px high, so you can see the whole image, I tried entering in the roll over carestersitic yet to no avail, maybe I am doing something wrong.

the website:  
[http://www.pacific-emarket.com/whole%20site/index.htm](http://www.pacific-emarket.com/whole%20site/index.htm)

**Links and Roll over Code:**

```auto
a {
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFCC;
font-size:12px;
text-decoration: none;
padding: 10px;
height: 25px;
width: 140px;
font-weight: bold;
line-height: 50px;
letter-spacing: 3px;
}
a:hover 
{color:#000000;
width:140px;
 height:25px;
background: url(roll1.gif) top left no-repeat;}
a:visited 
{color:#000000;}

```

**the rest:**

```auto

 
#mainright {
width:20%;
float:left;
background:#C74C1F;
height: 500px;
}
 
#maincenter {
width:48%;
float:left;
background:#F7D5C5;
border: 0px none #C74E20;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 0px;
margin: 0px 0px 0px 1%;
height: 500px;
}
 
#mainleft { /*now far right column */
width:28%;
float:left;
background:#E8E8E8;
padding-bottom:10px;
border-top: 0px solid #C74E20;
border-right: 0px none #C74E20;
border-bottom: 0px solid #C74E20;
border-left: 0px solid #C74E20;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
height: 500px;
}
 
#banner {
background:#F6D4C7;
border-top: 0px solid #C74E20;
border-right: 0px solid #C74E20;
border-bottom: 20px solid #003A20;
border-left: 0px solid #C74E20;
width:98%;
margin: 0px;
padding: 0px;
}
 
p,h1,pre {
margin:0px 10px 10px 10px;
}
 
h1 {
font-size:14px;
padding-top:10px;
}
#mainleft img {
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #333333;
text-align: center;
margin: 10px;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 16, 2004, 9:55pm UTC](https://forum.kirupa.com/t/css-rollovers/112657/2 "2004-06-16T21:55:32Z")

</div>

I don’t belive that you can apply a height and width characteristic to an a tag, or that if you do, it ignores it. I’d suggest creating a div container of that size with the link inside it, and have it swap the image in the background with a rollover.

CSS Definitions:

```auto
 

.linkContainerOFF {
width:140px;
height:25px;
}
.linkContainerON {
width:140px;
height:25px;
background: url(roll1.gif) top left no-repeat;}
}

```

HTML: (replace [and] with \< and \> because I can’t figure out how to past HTML code without it rendering)

```auto

[div class="linkContainerOFF" id="link1"][a href="#" onMouseOver="link1.className='linkContainerON'" onMouseOut="link1.className='linkContainerOFF'"]hi there[/a][/div]

```