With the help of some simple CSS code i have turned a humble <a> tag into a nice button. The CSS code works fine in Firefox and Opera, in IE however i have a small problem. To achieve the button effect i use two small pictures. One picture for the unselected state and one for the selected state. The pictures must be centered under the text inside the <a> tag. Everything works fine if the text is small enough to fit into the specified width of the <a> tag. If the text is longer than the width the overflow is hidden. But... the picture is now not centered around the text, the top of the picture is at the center of the text.
The following code demonstrates the problem. The pictures are 119*22 pixels.
Hope someone can help me .....
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.hide-link.com/ ">
< html xmlns=" http://www.hide-link.com/ " lang="en" xml:lang="en">
< head>
<style type="text/css">
body
{
background-color :Gray;
}
div
{
clear:both;
}
a.button
{
display: block;
font: bold 9pt Verdana;
overflow: hidden;
color: white;
text-align: center;
text-decoration: none;
width: 130px;
height: 2.5em;
line-height: 2.5em;
background: url(button_black.gif) no-repeat center;
}
a.button:hover
{
background-image: url(button_white.gif);
color: black;
}
</style>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<title>CSS Button problem</title>
</head>
<body>
<div>
<a href="#" class="button">button 1</a>
<a href="#" class="button">button 1 with too much text</a>
</div>
</body>
</html>
Internet Explorer Development4
| 
