I've made this
css rollover button by using a background image behind some text, and sticking left and right ends on to make it rounded.
It works great except that, on the hover, the image across the central part decides to repeat vertically, in both IE and FF. Any ideas how to get it right?
Have a look:
http://www.aocd00.dsl.pipex.com/buttons.html
Here's the code:
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>12345 12345 12345 12345 12345</title>
<style type="text/css">
<!--
.left,.right{width:46px;height:46px;float:left;}
.left{background: white url(up_left.gif) no-repeat;}
.right{background: white url(up_right.gif) no-repeat;}
.middle{float:left;padding:10px 0 0 0;margin:0;background: url(up_mid.gif); background-repeat: repeat-x; height:46px;}
.wholebutton a:hover {background:url(x.jpg);}
.wholebutton a:hover .right{background:white url(down_right.gif);}
.wholebutton a:hover .left{background:white url(down_left.gif);}
.wholebutton a:hover .middle{background:white url(down_mid.gif);}
.wholebutton a{text-decoration:none;}
.wholebutton b{
text-decoration:underline;
cursor:hand;
color:#000000;
font-weight:100;
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size:12px;
}
-->
</style>
</head>
<body>
<div class="wholebutton">
<a href="##">
<b class="left"></b><b class="middle">I've got a luvverly bunch of coconuts</b><b class="right"></b>
</a>
</div>
</body>
</html>
hover image repeating on me
Dec 7th, 2005, 11:26
Similar Threads
