ArticlesReader.com Menu
Newest Articles
Most Viewed Articles
ArticlesReader.com RSS
Submit Article
Login
Signup
Search the articles

Articles Main Categories
Advice
Animals
Automobiles
Business
Career
Communications
Computer Programming
Computers
Entertainment
Environment
Family
Fashion
Finance
Food
Health & Medical
Home & Garden
Humor
Internet Business
Internet Marketing
Legal
Leisure & Recreation
Marketing
Other
Politics
Reference & Education
Religion
Self Improvement
Sports
Technology & Science
Travel
Writing
Subscribe
Receive alert message from us when new articles submitted to our site for free.

Enter your name

Enter your email

Syndicate

















Related Products
Home::CSS

Cross Browser Compatibility

Author : Warren Baker

There are literally hundreds of web browsers in use around the
world. All of them implement the W3C document standards a little
differently. Web designers must wrestle with these differences
to make a web site work. This article discusses the effect those
different implementations has on design.

What is Cross Browser Compatibility?

If a web page is completely cross-browser compatible, it will
look more or less the same in all of the existing web browsers.
The most commonly used browsers are Internet Explorer, Netscape
Navigator, Firefox and Opera.

Each one of these browser implements HTML, JavaScript and
Cascading Style Sheets (CSS) a little differently. Some
difference only create cosmetic difference others can break the
webpage. The situation gets worse because each browser is free
to implement "enhancements" to the W3C standard version of each
of these formats.

Then to compound matters even more the underlying operating
systems also creates difference in how the computer displays
graphical elements and text differently. When you add the fact
that people are also using multiple versions of each of the
browsers, no wonder web designers get headaches.

So what is a web designer to do?

Obviously, 100% compatibility with all potential browsers is
impossible. But it is possible to design your web page so it
will work in the most popularly used browsers.

To accomplish that, a web designer must write squeaky-clean code
that conforms to the W3C standards to get consistent results
across all browser platforms. The whole idea behind the
standards is that if each browser adheres to the same set of
rules, you will get more or less consistent results in all of
the existing browsers.

Conforming can be a real challenge. It will limit some of the
neater effects available in specific browsers. There are online
code validators available. You can validate HTML code at
http://validator.w3.org , the validator can also validate your
CSS and links. The service is free.

The validator checks your code based on the DOCTYPE you specify
on the webpage. The DOCTYPE tells the browser which version of
HTML or CSS the web page is using.

HTML Editors

There are some compatibility issues associated with anything
other than hand coding for HTML (and for that matter, even with
hand coding.)

Best Choice - The best choice for compatibility is Dreamweaver
but you cannot use layers. Layers must be converted to tables to
be used.

Worst Choice - The worst choice is FrontPage. FrontPage is
loaded with problems because it uses Microsoft and therefore
internet explored specific code. Items that will not work in
other browsers include:

* Marquees - you can use a JavaScript scroller to create a
similar effect that will work in the most common browsers. *
bgsound tag - this is IE specific. * Page Transitions - this is
IE specific. * Front Page generated Style sheets - this is IE
specific and can have unexpected results or crash other
browsers. * Front Page generated DHTML - it is better to use
JavaScript to create the effects you want since it is more
likely to be cross browser compatible. * Hover Buttons - this is
IE specific and has been know to crash browsers including older
versions of IE. You can use JavaScript, flash or CSS to get
similar effects.

Other HTML Editors - the rest of the HTML editors will fall
somewhere between Dreamweaver and FrontPage in cross browser
compatibility. You just have to test the code your HTML editor
generates.

CSS Style Sheets

Not all of your style sheets will work correctly in all of the
browsers. However, style sheets rarely crash a web browser, but
sometimes the pages will be downright ugly if not completely
unreadable. One of the major CSS problems is absolute
positioning since most browsers do not support it and it will
cause different block to overlap others and create a jumbled
mess.

Flash

Flash is great for adding style to a webpage and Macromedia
provides flash plug-ins for all of the major web browsers. But
don't build the entire site with flash. Browser for the blind,
most handheld devices do not support flash.

A small but significant number of users don't like it and don't
install the plug-in so they won't be able to access a flash
site. Also, search engines spyders can't follow the links on a
flash site and won't index it.

Graphic Links

While these are attractive, they have the same problems as flash
with browsers for the blind and hand-held devices. Always use
the alt tag with graphics.

Bottom Line - even code that is validated may not work correctly
in all the major browsers. The best way a web designer can
create cross browser compatibility is to test all of their web
pages in the most popular browsers to see what happens.
Personally, I find that a combination of style sheets and tables
works best to ensure my pages look good in all of the browsers.

Spam emails More free articles

Related articles


  1. Introduction To Cascading Style Sheets
  2. CSS: The Basics - ID's and Classes
  3. CSS: The Basics - ID's and Classes ... Correct
  4. CSS - Maximum benefits
  5. Using CCS to Eliminate Tables
  6. CSS Print Media Tutorial
  7. Teach yourself CSS the easy way
  8. Starting Cascading Style Sheets
  9. SEO Benefits Of CSS
  10. 7 Reasons Why Using CSS is a Must
  11. Font Organizers Review, Part I
  12. CSS in Flash the return of crisp and legible fonts.
  13. CSS Browser Detection - The complete guide
  14. Cascading Stylesheets: 5 Reasons To Use CSS
  15. The Power of CSS
  16. Cross Browser Compatibility
  17. Using CSS with Tables
More related feeds
cross browser compatibility by alexruimy
i have a small file (one page, php/css/html, no images) that works well in firefox but doesn’t look right in internet explorer. need someone to make site cross browser compatible with the exact same functionality. (Budget: $30-250)

Checking Website Browser and Platform Compatibility
I was also made aware of a Smashing Magazine article has some more details and tools in “Browser Tests, Services and Compatibility Test Suites”. IBM has a few more in “Cross-browser Web application testing made easy”. What do you use? ...

How to Start / Create Your Own Website: The Beginner’s AZ Guide
For that, please see the article How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking). Although there are two possible ways given in the article, I suggest that you take use the ...

Secrets of JavaScript Libraries
Libraries have in common: advanced use of JavaScript, cross-browser support, best practices. He likes Prototype, jQuery (surprise!), and base2 (which I hadn’t heard of; it adds missing JavaScript/DOM features to bring all browsers up to ...

if you can’t stop supporting ie6, you can at least tame it
For JavaScript functionality, I use the excellent jQuery library, which lets me focus on the interactivity I’m trying to create rather than worrying about cross-browser compatibility. I also use jQuery to set rollovers on elements where ...

How to get Cross Browser Compatibility Every Time
Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create ...

html code error/Opera/FF cross-browser compatibility (IE7=OK)
I have been trying to optimize the html code and make it Opera/FF cross-browser compatible but without any success. The webpage loads correctly in IE7, and I have managed to make it look almost OK in Safari, but FireFox and Opera 9.51 ...

CSS coding for cross browser compatibility
Cross browser compatibility can be hard to achieve, but if you follow a few guidelines, you can make your CSS cross browser compatible a lot easier. Reset your CSS, use supported techniques and don’t forget to validate. (more…)

NCsoft Corporation: Web Designer
Mastery of HTML, CSS, XML, DHTML and Javascript with knowledge of cross browser compatibility. • Skilled at building table-free layouts using semantic markup and CSS. • Strong proponent of web standards and usability. ...

Graphic Web Designer specialising in Web Standards Compliant ...
Posted On: July 24, 2008 ID: 1146819 Category: Web Development > Web Design Skills: Photoshop, XHTML, CSS, Web Design, Web Graphics, Graphic Design, Cross Browser Compatibility, Web Standards Country: Australia Hours Billed: 52 ...

 


 

2007 articlesreader.com - All Rights Reserved