I did apply the reset thing to my test page. So, what I did, I created another page but used the reset code and not any of my styles. See image attached where we can see that the look is pretty much perfect, as far as the alignment goes, except for just one pixel offset in IE, where it decides to move up by one pixel the content of a select tag. You can see that the Survey item with the value White are not baseline aligned together. But, I did look closely with a zoom at that image and all the rest are perfectly aligned. So, each label is aligned ok with its select or input tag.
So, then, I started to try to add some of my styles one by one. I was able to add the box-sizing style so 300px would be the same for a select or an input tag. Without that, we can easily see that the default setup for a select is in fact including the 300px where an input tag is not including its padding thus ending up with 304px. This is one thing that took me a while to figure out about two years ago. When using the style for the box-sizing, we can then rely that the width of a control is represented as is among the controls we use.
So, this style is working ok and does not affect the alignment (we exclude the fact that IE has an offset one of pixel, for whatever reason its judges as satisfactory) and the overall image remains the same as the original one.
Then, I tried to control the border color of the controls. We know that IE 10 came up with so many weird reactions in the way it renders the page that many are simply clicking on the set compatiblity option to get the previous look. We face that problem on an application where many users have upgraded their browsers to IE 10 and it came up as a real mess. So, we recommended them, for now, to use the set compatibility switch, and they obtain the same look as IE 9. Once I have this application upgraded to HTML 5 with all the other related adjustments, this will no longer be a factor. But, having said that, the reason to control the border color of controls, as you know, is to obtain a similar look because, despite the fact that three browsers out of three are using the grey look, IE 10 came up with this black border. And, the other three browsers are using darker grey borders on specific location. For examle, Safari uses a darker grey border on top. The same goes with Firefox. Then Chrome uses the same grey border for the four corners. And, IE 10, as mentioned, black for the four corners. So, when I enable a style for the input tag with just one entry for the border color, suddenly the input control gets smaller. And, I didn't even tell that in the style to act like that. I simply apply a border color. So, by identifying a specific style to an input control, the browser decides to change a few things here and there.
Geez, my image in LViewPro of those four browsers side by side was so real that I thought it was the browser not responding to a click on the "assumed" window. lol
Then, I enable the select style just for the border color as well. So far so good, nothing else was affected.
Then, this is where it got interesting. When I started to apply the font style, of course, each font as its default setting and this changes the height of the control, unless stated otherwise. But, after having put back all my styles with the removal of the inside padding text for the controls, including a few more adjustments, it came up as in image 2.
On that one, it is now Safari which is perfect. All labels and text in controls are baseline aligned perfect. The text in control is also aligned centered vertically. As for Firefox, it is almost perfect. We can see that there is a one offset pixel causing a display behavior on the Survey line. Chrome is having its text inside controls to be offset but that can always be bypassed at the framework level, which detects Chrome and can add the proper padding to force the text to appear exactly where I want inside controls. As for IE, well, this one is always the troublemaker. The labels are affected and those ones are more difficult to align.
IAC, I thank you for your help. This reset code is very nice and I'll be sure to check it out more. It does improve a few things and might help me to avoid using fancy HTML coding in regards to image that I have to put inside DIV to avoid the gap that most of the HTML developers are facing at first when running their app in HTML5 for the first time.
I include the code for the second image here:
<!DOCTYPE html>
<html>
<body>
<style>
/* BROWSER RESET (based on Eric Meyer's Reset) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary, time, mark, audio, video {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
line-height: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
:focus {
outline: 0;
}
html, body {
height: 100%;
}
body
{
background: white;
color: black;
line-height: 1.35;
}
ol, ul {
list-style: disc;
margin: 20px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
/* text-align: inherit; */
padding: 4px;
}
blockquote, q {
quotes: none;
margin: 15px;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
}
input,select,textarea
{
font-size: inherit;
font-weight: inherit;
font-style: inherit;
}
p
{
margin: 10px 0;
}
/* END BROWSER RESET */
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;
height: 21px;
padding-left: 2px;
padding-right: 2px;
margin-top: 1px;
margin-bottom: 0px;
}
select
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
border: 1px solid #CCCCCC;
height: 21px;
margin-top: 1px;
margin-bottom: 0px;
}
table
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
}
td.Label
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #555555;
text-align: right;
border: 1px solid #FFFFFF;
height: 19px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
td
{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
height: 19px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
</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>
