With HTML5, this was suppose to be easier to get the same look across browsers. While this is the case, it is not as easy as it should be. I will illustrate something. Maybe someone can tell me if this is as much as I can do to have a similar look or there is a way to adjust to achieve that goal.
Here is the sample code:
<!DOCTYPE HTML>
<Html>
<body>
<style>
input
{
Box-Sizing: Border-Box;
-Moz-Box-Sizing: Border-Box;
-webkit-box-sizing: Border-Box;
}
input[type="text"]
{
Font-Family: Arial, Helvetica, sans-serif;
Font-Size: 13px;
Font-Weight: Normal;
Border: 1px solid #CCCCCC;
Padding-Top: 0px;
Padding-Bottom: 0px;
Padding-Left: 2px;
Padding-Right: 2px;
Margin-Top: 1px;
Margin-Bottom: 0px;
Height: 21px;
}
select
{
Font-Family: Arial, Helvetica, sans-serif;
Font-Size: 13px;
Border: 1px solid #CCCCCC;
Padding-Top: 0px;
Padding-Bottom: 0px;
Padding-Left: 0px;
Padding-Right: 0px;
Height: 21px;
Margin-Top: 1px;
Margin-Bottom: 0px;
}
table
{
Font-Family: Arial, Helvetica, sans-serif;
Font-Size: 13px;
}
td.Label
{
Font-Family: Arial, Helvetica, sans-serif;
Font-Size: 13px;
Font-Weight: Normal;
Color: #555555;
Text-Align: Right;
Height: 19px;
Border: 1px solid #FFFFFF;
}
</style>
<table cellspacing="0" cellpadding="0">
<tr>
<td class=Label>First name:</td>
<td>Michel</td>
</tr>
<tr>
<td class=Label>Last name:</td>
<td>Fournier</td>
</tr>
<tr>
<td class=Label>Company:</td>
<td>Level Extreme Inc.</td>
</tr>
<tr>
<td class=Label>Country:</td>
<td>Canada</td>
</tr>
<tr>
<td class=Label>Color:</td>
<td><select style="width: 300px;"><option>Black</option></select></td>
</tr>
<tr>
<td class=Label>City:</td>
<td><select style="width: 300px;"><option>Blue</option></select></td>
</tr>
<tr>
<td class=Label>Choice:</td>
<td><select style="width: 300px;"><option>Orange</option></select></td>
</tr>
<tr>
<td class=Label>Survey:</td>
<td><select style="width: 300px;"><option>White</option></select></td>
</tr>
<tr>
<td class=Label>Telephone:</td>
<td><input type=text value="Test" style="width: 300px;"></td>
</tr>
<tr>
<td class=Label>Telephone 2:</td>
<td><input type=text value="Test 2" style="width: 300px;"></td>
</tr>
<tr>
<td class=Label>Telephone 3:</td>
<td><input type=text value="Test 3" style="width: 300px;"></td>
</tr>
<tr>
<td class=Label>Telephone 4:</td>
<td><input type=text value="Test 4" style="width: 300px;"></td>
</tr>
</table>
</body>
</Html>In the attached image, from the upper left, is the view of Safari, then Firefox, then Chrome and IE.
In that image, you will see that Firefox has a perfect match.
In Safari:
1. Text in select tag is one pixel below so it is not aligned with the label
In Chrome:
1. Text in select tag is one pixel below so it is not aligned with the label
2. Text in input tag is one pixel below so it is not aligned with the label
In IE:
1. Text in select tag is aligned with the label but both are one pixel higher
2. Text in input tag is one pixel below so it is not aligned with the label
If someone knows what I am missing, that would be greatly appreciated. I just spent a few hours trying to adjust as much as I can. Putting everything in lower case did help for Safari but was not a factor for the other browser. The sample is as simple as it could get. I eliminated all the things that were not necessary for this test.
