Stop Websites Breaking In Different Web Browsers

Web Browser

It is often the case in website design/web development that you will create a website theme only to notice that it is displayed differently or incorrectly in certain browsers, especially Microsoft's Internet Explorer. This hub will aim to solve this problem by implementing one easy solution, a reset style sheet. Using a reset style sheet should get rid of just about all cross-browser problems that you have, for instance different heading sizes, font styles and line spacing. For this solution to work, you obviously must be creating websites using internal or external Cascading Style Sheets (this will not work with in line styles). If you are not, I have written a list of tutorials to introduce you to the CSS language. In a nutshell, a reset style sheet eliminates all the predefined browser styling for elements, allowing you to truly start coding from scratch and build a site that looks exactly as you intended across all browsers.

There are a couple of downsides when using a CSS reset. First, you will have to define all of the styling for elements such as lists and headings. That means adding a margin-left to the 'ul' tag, and adding a 'font-size' to the 'h1' tag. Using a reset will also cause the browser to have to download slightly more in order to display your page, which may effect download times for users using dial-up. It can also be a difficult to decide if you want to use a separate reset.css file or implement the reset in your styles.css file. Putting the reset in your styles file might cause unwanted clutter, while putting it in a separate file will cause the browser to have to make more http requests, slowing down the speed of which your page downloads. There is no definite answer as the which is best here, just personal preference so I will leave that choice up to you.

Hopefully, you can now develop websites that look the same across a variety of web browsers, allowing you to focus on improving the websites content, interacting with users and mastering SEO techniques. If you would like to help 'force' Microsoft into creating a more standards complaint Internet Explorer, then you should download Mozilla Firefox, Google Chrome or Apple Safari. The fight against the Internet Explorer problem is getting through to Microsoft, as newer IE releases such as IE8 are cutting out a lot of the awkward styling that made web coding troublesome for developers like you and I. For more information on web development and design, you can visit my HubPages profile, browse my related hubs or read my RSS feed. If anything here is unclear or you need help, don't hesitate to leave a comment below and I will get back to you as soon as possible!

There are a number of reset style sheets already floating around the web, such as Eric Meyer's Reset, Yahoo's Reset, and Shaun Inman's Reset. These are all relatively the same and have been developed and refined to eliminate most predetermined browser styles. If you are not sure which one to choose, I would go with Eric Meyers because he is one of the most influential people in the web design scene. Once you have chosen what reset you want to use, you must then ask yourself how you are going to implement the reset, are you going to link to a reset.css in your HTML or will you just add the reset in your style.css? There is no definite answer as to which is better, as adding the CSS to your styles file may cause unwanted clutter, but keeps all your styles in the one file while putting the CSS in a separate reset file will lead to better organization but more HTTP requests from the user's browser, leading to slower loading times. If you are using an internal style sheet (styles defined in the head section of your HTML) you will be forced to add the reset in there. The problem with internal style sheets in general is that all your CSS must be loaded every time your website is loaded, as opposed to only once if you are using external CSS, but this topic is outside the scope of this hub.

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article