CSS background centering problem  
Author Message
Roberto Smith

PostPosted: Internet Explorer Web Development, CSS background centering problem Top

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">


<style type="text/css">



background-color :Gray;








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;




background-image: url(button_white.gif);

color: black;



<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>




<a href="#" class="button">button 1</a>

<a href="#" class="button">button 1 with too much text</a>







Internet Explorer Development4  
Jason D_dot_NET

PostPosted: Internet Explorer Web Development, CSS background centering problem Top

I experience a similar problem. It seems that IE 7 (still) has broken CSS rendering. I do not know why it isn't fixed though...