If you want a more universal look and display across browsers, you need a browser reset base CSS. I've been using a variation on Eric Meyer's original browser reset to get a good baseline. Search on "CSS Browser Reset" and you'll find a bunch of different resets that are commonly used.
Browser reset many major settings (mainly margins, borders, padding etc.) into a common state regardless of browser. This still won't make every browser render exactly the same, but it's a lot closer than default settings, although IE 6 and 7 will often render badly still.
Here's what I use inside of my base style sheet which adds a few things:
/* 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 */Beyond that I tend to add a few more things for specific overrides for tables and td etc.:
/* BUILT-IN ELEMENT CUSTOMIZATION */
body,table,td,th,input,textarea,select
{
font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 10.5pt;
}
pre
{
color: black;
font-family: monospace,courier new;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}
img
{
border: none;
margin: 0;
}
h1
{
background-color: #eeeeee;
color: navy;
font-size: 160%;
font-weight: bold;
padding: 5px;
text-align: center;
}
h2
{
color: maroon;
font-size: 140%;
font-weight: bold;
margin-bottom: 10px;
margin-top: 20px;
}
h3
{
color: steelblue;
font-size: 110%;
font-weight: bold;
margin-top: 15px;
margin-bottom: 6px;
}
td
{
vertical-align: top;
padding: 4px;
}
table.blackborder>tbody>tr>td
{
border: solid 1px lightgrey;
}
th
{
border-collapse: collapse;
font-weight: bold;
text-align: center;
}
a
{ color:#003399; }
a:visited
{
color: maroon;
}
a:hover
{ color:maroon;}
small, .smalltext,.small
{
font-size: 8.25pt;
font-weight: normal;
}
hr {
color: #535353; background:#535353; border: 0; height:1px;
}
hr.dark {
color: White; background:White; border: 0; height:1px;
}
ul
{
margin-bottom: 10px;
margin-top: 10px;
margin-left: 30px;
}
li
{
margin: 3px;
}
fieldset
{
border: solid 1px darkgrey;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
}
legend
{
font-weight: bold;
background: #DE8079;
color: White;
padding: 2px 8px;
margin: 3px;
border: solid 1px maroon;
text-align: left;
min-width: 30px;
}
input[type=text], input[type=password], select, textarea,
input[type=url],input[type=email],input[type=date],input[type=datetime]
{
border: 1px solid #cccccc;
box-shadow: 1px 1px 8px #eee;
transition: border linear 0.2s, box-shadow linear 0.2s;
background-color: #F5F7FA;
padding: 3px;
border-radius: 3px;
}
input[type=text]:focus, input[type=password]:focus,textarea:focus,
select:focus,input[type=url]:focus, input[type=email]:focus,input[type=date]:focus,
input[type=datetime]:focus
{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
background: cornsilk;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type=date]{
width: auto;
}
button, input[type=button], input[type=submit], input[type=reset]
{
padding-top: 2px;
padding-bottom: 2px;
width: auto;
}
.clearfix,.clear
{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.hidden
{
display: none;
}
.disabled
{
cursor: default !important;
opacity: 0.7;
}
.disabled:hover
{
cursor: none !important;
color: inherit !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
}Basically a few core settings I need in just about any app. And then there's still more with a fair number of custom styles that provide functionality I use in most HTML pages. Here's a link to my full base stylesheet I use in most apps:
https://github.com/RickStrahl/WestwindToolkit/blob/master/Samples/WestwindToolkitMvcWeb/Css/Westwind.cssOr - you can go even one step further and rely on a full CSS/HTML framework like Bootstrap which provides a ton of extremely useful features and functionalty like grid layout, thinks like icons, alerts and specific button formatting, tabs etc. all from a single CSS base.
+++ Rick ---
>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.
