>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>
That's wrong.
><Html>
Wrong.
> -Moz-Box-Sizing: Border-Box;
> -webkit-box-sizing: Border-Box;
Wrong.
>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>
Wrong.
You're missing quotes.
I would suggest that to get a consistent look the first step would be getting the basic HTML right.
><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.
