Valign button text in firefox

Henrik_Abel
Henrik_Abel used Ask the Experts™
on
Hi

How can it be that my text in buttons is nok aligned vertical? It works in Safari, but in FF the text is placed to low?
Picture-1.png
Picture-2.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
ca you include the CSS/HTML ?  you have attached 2 different graphic files which are both different.
have you also tried it in IE7 and IE8 ?  they all have differences

Author

Commented:
Hi

The two buttons are screenshots from FF and Safari. I dont use IE....
input.button {
	margin: 0;
    padding: 0;
    padding-left: 5px;
    margin-right: 10px;
    border: 0;
    background: #fff url(../plugins/buttons/left.gif) no-repeat;
    color: #666;
    height: 17px;
    position: relative;
    cursor: pointer;
    width: 70px;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	color: #656565;
	font-weight: normal;
}

Open in new window

Browsers handle padding in div elelments with width differently
one 'hack' I've seen  is to have 2 divs - one that does the padding and one that does the width.


P.S. you may not use IE but if your website is public then 70% of internet users do use IE
#lefttext {
	width: 200px;
	float: left;
}
#padbox {
	padding: 4px 8px 4px 8px;
}
---------------use the divs---------------------------------
<div id="lefttext">
	<div class="padbox">
		<p>lopsem ipsum dolor ...</p>
	</div>
</div>

Open in new window

Tony van SchaikFront-end Developer
Commented:
I always do this like this. If button height is 32px, you can set line-height 32px so the text will be centered.
For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"/>
<style type="text/css">
body {
	margin:10px;
	padding:0px;
}
 
.button {
	width:120px;
	height:32px;
	text-align:center;
	font:16px "Segoe UI", Tahoma, Arial; /* 32px divided by 2 = 16px */
	color:#fff;
	background:#f5f5f5;
	border:1px solid #e5e5e5;
}
 
.button a {
	text-decoration:none;
	color:#ff0000;
	line-height:32px; /* equal to height of button */
}
 
.button a:hover {
	text-decoration:none;
}
</style>
</head>
<body>
<div class="button"><a href="#">Test Button</a></div>
</body>
</html>

Open in new window

Commented:
Use padding-bottom to fix this in firefox.

IE6, 7 and 8 seem to ignore it, as does Chrome, but in Safari the text is also raised a little, although not the full amount specified in the padding-bottom so it still generally looks ok.

To be safe you'd probably be best off correcting the problem using a script that applies only to firefox, and then when the bug is finally fixed in firefox make it apply only to older versions.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial