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.

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

More related feeds

The Importance of Cross Browser Compatibility
Google Webmaster Central Blog is a great resource on all things SEO (search engine optimisation). This article outlines the basics -. “When your site renders poorly or is difficult to use on many browsers you risk losing your visitors’ ...

Workin’ it on all browsers
This step requires some trial and error, but there are several good places to help reduce the “trials” as your make your site cross-browser compatible. Doctype is an open source reference with test cases for cross-browser compatibility, ...

How to get Cross Browser Compatibility Every Time | Anthony Short ...
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 ...

Foo Hack » Cross Browser Support for inline-block Styling
Foo Hack » Cross Browser Support for inline-block Styling.

A Review - Painting the Web
There is no way Shelly could have know about Javascript dynamo Dmitry Baranovskiy’s awesome Raphaël JavaScript Library that provides cross browser support for browser generated vector graphics such as SVG. Considering the book was ...

The State of SVG Browser Support + Using Flash for SVG in Internet ...
This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael. ...

Google Chrome and Web Standards
1) There are 17 entries in the FAQ for developers and 6% is devoted to cross browser compatibility. To me this is a huge percentage and it means that the number of pages that actually render differently in Chrome is probably very high. ...

The 960px grid on top of full-range background
Before I deepen into the procedure, i must say it’s always good to have a container/bucket div instead of acting directly over the body element for cross-browser compatibility. I have tried it and IE 6 didn’t like it very much. ...

New Dashboard Launched!
Better cross-browser compatibility. The new dashboard is a swf (flash) file which kinda runs the same on all browsers. Ability to churn out nicer looking graphs to display statistics and analytics - chat analytics as well as ...

Guzel Magazine Wordpress Theme
... Support for Stories - Images are resized on the fly, no custom fields * Video Spot * Ajax Tabs * Dropdown Navigation * 2 Sidebars with Widget Support * Valid XHTML Strict code * Valid CSS code * Cross browser compatibility * [...]

Cross Browser Compatibility

Related articles