Is Your Website Cross-Browser Compatible? by Velvet Blues Web Design


Dawning Day Delicious Detail:  This series of posts is in response to one of my Knower follower’s questions.

——————————————————————

Is Your Website Cross-Browser Compatible?

Believe it or not, all web browsers do not behave the same way. And depending on how a website is coded, it might look differently in each browser. Clearly, this can be quite problematic; broken sites often look unprofessional. So how can you determine whether your website looks the same across all browsers?

Well, one approach to cross-browser compatibility is to install multiple browsers on your computer, such as Internet Explorer, FireFox, Safari, and Opera. But there is one big flaw in method: browsers behave differently depending on version and platform. This means that you’d need to install all versions of each browser on your computer to determine cross-browser compatibility… Clearly, this is unreasonable. So, how can you test your site?

Fortunately, there are free tools which can capture a website and let you preview screenshots of your site in each browser.

Free Website Checkers

There are a wide variety of tools that you can use to view your website in multiple browsers. However, we suggest you use a service calledBrowserShots. This services enables you to choose platform (Windows, Mac OS, Linux, BSD), resolution, browsers (and versions), as well as a host of other settings. And best of all, its free.

Validity

It is also a good practice to verify that your markup (HTMLCSS) meets current coding standards. This ensures that code is more likely to be compatible with current browsers as well as any new browser. Two free tools to validate your website can be found by clicking on the following links: HTML ValidatorCSS Validator. (Feel free to use some of the other tools on this site. There is also a link checker which can be helpful in finding broken links.)

Other Issues

If you are using advanced coding, such as JavaScript, be sure to verify compatibility between the major browsers. For example, if you are doing any DOM scripting, be sure to check out compatibility tables. Click here to view some popular quirksmode tables.

Alright, so now that you know what tools to use, go ahead and submit your site for screen shots. Once done, you might notice a lot of spacing, font, or border issues between the browsers. How can you fix it?

Quick Fixes for Common Cross-Browser Compatibility Issues

While it is possible to serve different content or style sheets depending on the browser, it is much easier to use smaller fixes. We’ve included some below.

Inconsistent Element Margins and Padding

We recommend that you set the default margin and padding (and possibly the border) of all elements to zero. Most browsers automatically use 0 as the default value for padding and margins, however, some browsers have default values of 5 or 10 pixels. To set the default value to all elements, add the following code to your stylesheet, above any style content:

*{margin:0;padding:0;}

If you are not using stylesheets, simply add the following between your head tags, above any style content:

<style>
*{margin:0;padding:0;}
</style>

If this looks unfamiliar to you, here is an explanation. The asterisk (*) is known as the universal selector. And it is used to apply styles to all elements.

Double Margins in Internet Explorer On Floating Elements

For some odd reason, Internet Explorer may actually double the margin on elements that are relatively positioned and floated left inside of another relatively positioned containing element. One quick way to fix this is to simply add one property to your style sheet definition for that element:

display:inline;

This will remove the excess space and will not affect the rendering in any other browsers.

Inconsistent Centering Issues

Sometimes, you might find that your website is not centered on all browsers. One quick way to fix this is to use both the margin and text-alignproperties. Take a look at the code below:

html{width:100%;}
body{width:100%;text-align:center;}
#container{margin:0 auto;text-align:left;}

This code centers the container element. It also centers everything in thebody, including text. This is why you need to set the text alignment in thecontainer element. Finally, it also sets the widths of the html and body elements to ensure that they span the viewable area of the browser.

Of course, you will probably run across a host of other problems; we can only cover a few here. But feel free to leave a comment mentioning your problem, and we’ll suggest a fix. Be sure to include a page url, browser, and anything else you think might help.

Advertisements

About Dawning Day Events

Calling All Visionaries, Artists, Entrepreneurs: Start this week off on a new note! If you are not tech savvy and want to learn how to: *Create an amazing online presence, let the world know about it, and allow your customer list to grow itself *Grow your business and improve your life easily, authentically, organically... You've Come To The Right Place! Success in Any Setting provides the information and tools you need to improve your web present, and ALSO helps clients find and focus on their individual Gifts through a unique and simple 3 step approach: 1) Remember Your Purpose 2) Imagine Your Life 3) Take Joyful Action If You Are: *seeking a better life *stuck in a rut *at a decisional crossroads *grieving or feeling isolated *in emotional, physical, or spiritual turmoil *lacking focus *look for a way to turn it all around for the better... HOPE IS HERE
This entry was posted in Dawning Day Delicious Details.... Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s