Web Design and Development
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 called BrowserShots. 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 (HTML, CSS) 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 Validator, CSS 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-align properties. 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 the body, including text. This is why you need to set the text alignment in the container 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.
Tags: cross-browser compatibility, CSS, css validator, Firefox, html validator, internet explorer, JavaScript, Mac, opera, platform, Safari, Windows12 Responses to “Is Your Website Cross-Browser Compatible?”
Trackbacks
Trackback URL for this entry:
http://www.velvetblues.com/web-development-blog/is-your-website-cross-browser-compatible/trackback/
Leave a Reply
- Categories
- CMS Plugins
- Code Samples
- Domain Names
- Industry News
- Internet Marketing
- Miscellaneous
- Professional Web Development
- Search Engine Optimization
- Tutorials
- Web Browsers
- Web Hosting
- Website Improvement Tips
- Website Performance
- WordPress Themes
- Subscribe by Email or RSS
- Want to be notified of new entries? Just enter your email address below. Our feed is delivered by FeedBurner.
- Recommended Hosting Company
- We prefer HostGator. Click here or on the image below to go to their site.
Want us to work on your project?
Contact us today for a quote. Click here to submit details regarding your project.
If you are making a general inquiry, send an email to info@velvetblues.com
the thumbnails inside the web page are not aligned properly. its not an official website just practicing
the problem basically occurs when i view the page on IE6
, it works fine in ff3.0
pls mail me the reason if possible.
Hi harpreet,
We’d need to see the website or HTML & CSS to tell you what was wrong.
Hi,
I created my website using rvsitebuilder, using Firefox to preview and publish the website. However, when I display my website in IE, there are structural issues, in terms of alignment that are changed and distorted. I have experimented on several computers using different IE versions–IE7, IE8. The issues are “most” pronounced in IE 7.
In IE 8 the site displays fine with the exception of one of my contact forms (built in rvsitebuilder, WYSWYG editor) not displaying certain cell lines, which is how I identified that the website is out of alignment in places in IE 7 .However, when I click the compability key in IE 8 the contact form displays as I created it, but other sections of my website then become distorted???
This is a huge issue, as 70% of internet users use IE of some version. My website renders fine and is the way I created it in Firefox, 3.5, and 3.6. There appears that IE is rendering the CSS scripting and coding differently. Please help!!!!!!!!
my test website is: www.hyerdriven.com/test. Please click on the Wellness Coaching tab in the navigation bar and compare the webpage in IE 7 and Firefox. Please advise me further. Respectfully, Jason Dobbs-Hyer
im just the beginner in using html, i used to create my html documents using a simple text editor and interpret/display it by the internet explorer, the problem occur when i opened it up to other web browser like mozilla firefox, safari, google chrome, and others…the result is the distortion of my html documents, the menu’s are overlapped to each other, the elements are misplaced. what should i do now to fixed these problems, does anyone here can help me, before i host it to web host provider. thank you.
Yes, cross-browser problems are very common and can be troublesome for the pros as well. If you are just starting out, I would suggest that you use an HTML editor. Additionally, it is a good idea to check and make sure that your html does not have any errors. This can be done by going to http://validator.w3.org/
Good luck.
hi there, it’s me again. I would like to know if the file extension name (.swf) can be possible to be a background of my html documents?
im just a beginner in using html, i used to create my html documents using a simple text editor and interpret/display it by the internet explorer, the problem occur when i opened it up to other web browser like mozilla firefox, safari, google chrome, and others…the result is the distortion of my html documents, the menu’s are overlapped to each other, the elements are misplaced. what should i do now to fixed these problems, does anyone here can help me, before i host it to web host provider. thank you.
im just a beginner in using html, i used to create my html documents using a simple text editor and interpret/display it by the internet explorer, the problem occur when i opened it up to other web browser like mozilla firefox, safari, google chrome, and others…the result is the distortion of my html documents, the menu’s are overlapped to each other, the elements are misplaced. what should i do now to fixed these problems, does anyone here can help me, before i host it to web host provider. thank you.
im just a beginner in using html, i used to create my html documents using a simple text editor and interpret/display it by the internet explorer, the problem occur when i opened it up to other web browser like mozilla firefox, safari, google chrome, and others…the result is the distortion of my html documents, the menu’s are overlapped to each other, the elements are misplaced. what should i do now to fixed these problems, does anyone here can help me, before i host it to web host provider. thank you.
c
hi, goodmornming. im creating my html documents using a simple notepad, i used to create a button link using image, but the background-image doesn’t appear on the screen when i was already opened it up to any mozilla firefox web browser version. I used to used to assigned my image using external css? Is there’s a problem or different effect if i used to declared my background image in external css..the format of image is in jpg format.. please help me administrator to my problem. i would like to se my background image not only to any version of internet explorer but rather to all web browser
please help me.. i don’t see my background image i declared in external css.
here’s my html code:
dmci menu
HOME
HIGH RISE
MID RISE
RESIDENTIAL
SUBDIVISION
CONTACT US
developers
———–
here’s my css code:
html{width: 100%; text-align: center;}
body{width: 100%; background-color:#000000; text-align: center; }
/* Button Settings */
#button4n p {text-align: center; text-indent: 0px; margin: 0 0 0 0; padding: 0 0 0 0; background-color:#000000;}
#button4n img {margin: 0 0 0 0 }
#button4n a {display: block; background-image : url(dmci menu folder/link.png); background-repeat : no-repeat; width:179px; height:32px; text-align: center; padding: 7px 0 0 0;margin:0 0 0 0}
#button4n a:hover {display: block; background-image : url(dmci menu folder/link-hover.png); background-repeat : no-repeat; width:179px; height:32px; text-align: center; padding: 7px 0 0 0;margin:0 0 0 0}
/* Text Settings */
#button4n a { font-family:arial,serif; font-style: normal; text-decoration:none; font-weight: 500; font-size:8pt; color: #ff0000; }
#button4n a:hover { font-family:arial,serif; font-style: normal; text-decoration:none; font-weight: normal; font-size:8pt;color: #adff2f; }
here’s: my html code
<!–
dmci menu
HOME
HIGH RISE
MID RISE
RESIDENTIAL
SUBDIVISION
CONTACT US
developers
–>
/*
dmci menu
HOME
HIGH RISE
MID RISE
RESIDENTIAL
SUBDIVISION
CONTACT US
developers
*/
HOME
HIGH RISE
MID RISE
RESIDENTIAL
SUBDIVISION
CONTACT US
developers