No replies
patrickco's picture
Los Angeles
Last seen: 11 years 10 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

This is a problem that comes up for me quite often... I am really curious in knowing #1 why this is, and #2 is it fixable?

In firefox 3.5, the height / padding of the input and is not equal. The anchor tag is smaller than the input tag.

I often have situations like I have a save (input submit), and a cancel button (anchor to a different page), and the fact that they are different heights really ruins my design...

Any way to solve this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
	body {
		background: #000;
		color: #fff;
	.button {
		background: #5500ff;
		color: #fff;
		border: 3px outset #aaa;
		padding: 10px;
		margin: 0 10px;
		font: 12pt Arial, sans-serif;
		float: left;
		text-decoration: none;
	.button:hover {
		border: 3px inset white;
		<input type="submit" value="submit button!" class="button" />
		<a href="#" class="button">anchor tag!</a>