Forum Moderators: not2easy
However Opera 9 & Gecko 1.8x are refusing to render the height of the labels and input field elements the same. I've even added other box model related properties and values to ensure I covered default styling the browsers may add themselves (which they do with either margin or padding, forgot which).
Regardless, they should render the same. I'm (hopefully) sure this is an important detail that has been picked up by others in the past. I've noticed other form related bugs though I need to confirm whether this is a pixel measurement related bug or if I'm doing something wrong that I'm not aware of as I'm going on my fourth red bull trying to get a site done in a single day! :)
For your brain's pleasure...
<?xml version="1.0"?>
<!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">
<head>
<title></title>
<style type="text/css">
html,body {
background: #000;
color: #fff;
}
input.text {
background: transparent;
border: #fff dotted 1px;
color: #9ff;
font-size: 12pt;
height: 16px;
margin: 0px;
max-height: 16px;
padding: 0px;
}
label.text {
border: #fff dotted 1px;
float: left;
font-size: 12pt;
height: 16px;
margin: 0px;
max-height: 16px;
padding: 0px;
width: 120px;
}
</style>
</head><body>
<form action="">
<fieldset>
<label class="text" for="example">Example</label><input class="text" id="example" name="example" value="" />
</fieldset>
</form>
</body>
</html>
- John
max-heightfont-family<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title></title>
<style type="text/css">
html,body {
background: #fff;
color: #000;
font-family:Verdana, Arial, sans-serif;
}
input.text {
background:transparent;
border: #f00 dotted 1px;
color: #00f;
font-size: 12pt;
height: 17px;
margin: 0px;
padding: 0px;
}
label.text {
border: #00f dotted 1px;
float: left;
font-size: 12pt;
height: 17px;
margin: 0px;
padding: 0px;
width: 120px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<label class="text" for="example">Example</label><input class="text" id="example" name="example" value="Example" />
</fieldset>
</form>
</body>
</html>It works well in Firefox 1.5, in Konqueror 3.5 the box heights are the same but the text positioning in slightly off, box alignment is off in Opera 8.5 and and it's a bit off for both the box height and the text positioning in IE6. ;) (Sorry I swapped out some of the colors from your example.)
