• Locked
No replies
Tue, 2009-11-10 22:50
patrickco
patrickco's picture
Offline
Enthusiast
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?

http://collinatorstudios.com/button_problem.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<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" />
 
</script>
 
<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;
	}
 
 
</style>
 
</head>
 
<body>
 
	<form>
 
		<input type="submit" value="submit button!" class="button" />
 
	</form>
 
		<a href="#" class="button">anchor tag!</a>
 
</body>
 
</html>

Top
Tags: