Consitent Button padding across various browsers?

HTML & CSS
1

Hi all,

I am programming a widget for a client. It uses a standard HTML button - I need the button to have the exact same dimensions across the major browers.

The thing is, the padding looks different in firefox (more of it) than in say Apple Safari or MS IE. If I set explicit width and height values then of course the text value (e.g search) does not sit dead on horizontal.

Is there anything I can do to keep things looking consitent? thanks!


#search_button_min{
	padding:3px;
	color:#ffffff;
	border: 1px solid #ffffff;
    background: #cccccc;
	position:absolute;
}
2

There’s not much I can see wrong. There aren’t any trouble-spots in your code that are known to be interpreted differently in different browsers, except your background property.

If you’re only describing the color that the background should be, I would recommend only using the background-color property as there’s no reason to use the shorthand property/

That might be the reason.

Good luck.
~TehYoyo

3

Hi,

Using the background shorthand syntax is perfectly fine.
I hadn’t actually seen that in firefox before, I guess I’ve never looked to achieve that sort of pixel perfection when it comes to form elements - Most people don’t worry about these small differences and let form elements do their own thing.

I thought you were referring to a nasty bug in IE(6,7 I believe) that horizontal padding is simply ignored, a fix is to simply add overflow: visible to the element.

But, what you’re actually looking at is a default style in firefox that is a little hard to track down.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BUTTON</title>
<style>
.btn {
	padding: 3px;
	color: #fff;
	border: 1px solid #fff;
	background: #ccc;
	overflow: visible;
	line-height:normal !important;
}
input::-moz-focus-inner { padding:0; border:0; }
</style>
</head>
<body>
<input type="submit" class="btn">
</body>
</html>

You can find these browser provided styles in Firebug under User Agent CSS > forms.css