Browse DevX
Sign up for e-mail newsletters from DevX


Cross Browser and Cross Platform Issues : Page 5

Different computers display graphics differently—understand these variations and design for them.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Graphics as a Workaround for Incompatability
Consider using graphics-based solutions as a work-around for browser incompatability.

In most cases, browser differences impact page layout (especially tables and CSS) to a much greater extent than they effect the way graphics will appear. Because graphics are handled in a more consistent way than CSS styles, you may opt for a graphics-based solution rather than a CSS solution simply to provide a more standard appearance across all browsers.

For example, you could create a simple navigation panel using CSS font properties. This would create the smallest and most flexible file. But, if you have readers on older browsers or you are using properties that are unevenly implemented, you might want to create the panel as a graphic, which will appear the same on all browsers.

Tables and Browser (In)Compatability
Tables are a particular areas of potential cross-browser problems.

Because tables are implemented differently in different browser releases, you'll want to be especially aware of your table code when you're reassembling sliced graphics.

  • Make sure that cellspacing, cellpadding, and border attributes are included and set to zero. If you exclude these attributes, different browsers will apply different default values and you may end up with thin spaces between segments, instead of a nice unifed, reassembled image.
  • Make sure your code has no extra spaces or hard returns between it. Some versions of Navigator have a "feature" that turns extra white space and hard returns into space between cells.

Some browsers read the page aloud or display it in very enlarged pieces.

Some people view the Web with adaptive devices that read text aloud or that display pages at very large sizes. In addition, a text-only browser called Lynx is still in use by a small perecentage of people.

To account for these types of browsers, always be sure to include the alt text attribute in the image tag. The alt attribute should have a value that briefly describes the graphic. If you don't want a description included, you should still use the alt attribute, but give it a null value, like this:

<img src="box.gif" alt="">

When a reader encounters an image, it will speak aloud the text in the alt tag. If you have a sliced graphic, you'd include readable alt text in one of the slices—"this is a photo of my dog Mack," for example. And you'd have the alt text value be null in the other slices. This way the meaning is shared, but the poor user doen't have to listen to a litany of "slice1," "slice2" and so on.

Be sure to check out the W3C's Accessiblity Checklist for other ways that simple tweaks to your design's implementation can support accessability.

Sometimes a graphics-based solution is the easiest way to handle cross-broswer differences.

When slicing images, be aware that the browsers use different default values for tables, so always be sure to enter cellpadding and cellspacing attributes in the table that reassembles your image.

Always include the alt attribute in your image tag—either with a text value or a null value.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date