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
Links and Roll over Code:
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:
#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;
}
