Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Apply CSS-reset for browser-consistensy

Tuesday, May 13th, 2014 by Servage

Browser Inconsistency

In the olden days of web designing, we used to employ CSS with HTML in rather inconvenient ways and thus with limited use. CSS later underwent an evolution, allowing designers to replace all table-based layouts with styled sheets that eventually lead to the responsive websites we have today.

Not only CSS, browsers evolved as well, fitting on smaller devices with HTML5 and CSS3 compatibility. Despite advancements in browser technologies, common standards across all browsers are lacking consistency in style for how they display content. Going forward, it will remain impractical to impose standards, as each new browser or new version of existing browsers offer their own set of features.

Currently, web developers and site designers deal with these challenges to display content consistently across all browsers. Because we rely on CSS for style designs, we tweak the CSS coding to meet our needs. In layperson terms, we tell all browsers to override their default styles and obey our predefined rules.  This sort of tweaking is referred to as a “CSS Reset.”

What Is Browser Inconsistency

There are many browsers in use and you’ll find distinct differences in each. For instance, Firefox displays some space above the first paragraph as well as below the bottom paragraph. This spacing makes the presentation of content decent; whereas, Internet Explorer (IE) treats these margins between window border and paragraph texts differently. Content in IE windows often seems cluttered. Because of the different treatment between the two operating browsers for how they display the same content, this is termed as “browser inconsistency.”

How to Overcome Browser Inconsistency

Technically, there are several ways to overcome such inconsistency, with help from CSS being the most practical way for modern web developers. Circa 2004, or back in the olden days on the web, Andrew Krespains suggested making use of a universal selector (*) asterisk at the beginning of CSS file. This asterisk was used to select styled elements and set their values at (0) zero. This technique is sometimes still used, but it is not popular nor advisable in our contemporary era.

*{
Margin: 0;
Padding: 0;
}

Reason why we don’t go this route today is due to the fact that not all browsers support this wildcard technique and/or behave in odd ways when it is applied. Therefore, to introduce our own margin and padding style we go with:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Nowadays, we use other common elements to set default values, in order to override the default browser settings, such as:

* {
margin: 0;
padding: 0;
outline: 0;
border: 0 none;
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
}

As noted above, we can’t rely on universal selectors, so we need to modify our CSS in the following ways:

html, body {
padding: 0;
margin: 0;
}

html {
font-size: 1em;
}

body {
font-size: 100%;
}

a img, :link img, :visited img {
border: 0;
}

It is important to test this out to see if it works for your needs and if you like it. Point is, you can set your own custom CSS reset and obtain positive results across all browsers. If you desire help from third party expertise, you can use a public-facing CSS framework such as Blueprint or YUI.

References & More Reading

CSS Tip #1: Resetting Your Styles with CSS Reset
Killer Collection of CSS Resets

Apply CSS-reset for browser-consistensy, 3.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.