Tips & Tricks For Cross Browser Compatible CSS Development

In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. It has a simple syntax, and uses a number of English keywords to specify the names of various style properties. Its specifications were maintained by W3C. It still hasn't became a standard over all browsers.

Here I want to share some of my experiences( pains I went through 😉 ) while developing styles for my previous projects. One of the project is based on div structure and other is based on table and div structure.

Some CSS styling attributes differs from browser to browser. But when we are developing a website most of the clients want their site to be compatible for all browsers. By cross browser compatible CSS it doesn't mean that website works in all browsers, it also should have same look n feel in all browsers.

CSS validation
When ever you found some difference in the appearance of page in different browsers, validate the css file. Check for syntax errors in the file eg. missing, closing or extra braces while defining styles. Suppose I have defined a style for a div as follows

 div#wrongStyle{{
   color : red;
   font-size:19px;
 }

IE applies above styles to the div but not Firefox. IE can correct such small errors but Firefox wont do that.
Separating styles
If you want to provide styling based on IE version you can use specify it in the following manner.




Developing styles for DIV based structure

In div based structure each element on the web page is placed inside a div and styles will be applied to it. To position those div elements you can use absolute positioning with fixed width or relative positioning.

Here the first thing we need to keep in mind is to separate positioning information from styling information. So that common styles like font, colors can be specified in top elements. It helps to maintain the layout without disturbing the styles. While developing these styles ,its a good idea to go in agile manner. i.e after applying each element check the page in all target browsers. This eases fixing the cross browser issues. If you are using absolute positioning you can develop each element in separate html file. These separate files or absolutely positioned div elements can be merged easily to form a complete web page.

CSS width, padding problem

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on.
For example, when specifying the dimensions of a container you might use the following CSS rule:

 #box
 {
      width: 100px;
      border: 5px;
      padding: 20px;
  }

This CSS rule would be applied to:

This is some dummy division holding a dummy text

In normal browsers above rule is interpreted as 100px width + two 5px borders + two 20px paddings. So the final width of the element will be
150px. But in pre-IE6 browsers the total width would be just 100px, with the padding and border widths being incorporated into this width.

A simple way to solve this is to have one more div inside and specify width for inner one and padding and margin to the outer. The code will look like...

#box
{
 width: 150px;
}
#boxInner
{
border: 5px;
padding: 20px;
}

And the new HTML would be:

This is some dummy division holding dummy text

Using the above code will help to show the box width to 150px regardless of the browser.

Selecting precise descendants

Sometimes CSS selectors also behaves differently in different browsers. To apply styles to a particular element in the page you can use child selector ( " parent > child > child's child " ). In my case, I faced the following problem. I need to apply some style only to the first li under "parent" class ul element and I don't have any control over the html code.

  • Item 1
    • Sub Item 1
    • Sub Item 1
  • Item 2

Now, you can specify the styling in the following way using child selector parent > li { style goes here}. There might be some other way for this. But I found it the above way useful as I can't change the html code.

Using Table structure for page

The most important thing we need to keep in mind while developing styles for tables is, on the top level element (usually body) specify padding, margin and border to be 0px. After that you can specify these attributes individually by assigning the div id or class where ever required. Also specify "cellpadding", "cellspacing" and "border" values in table tag explicitly, because the default values for these attributes differs from browser to browser.

Conclusion

You can find many other tips like this on net. Its always better to restructure our css and layout to make styling compatible with different browser rather than using some hacks. If you are using some hack it might work in the browser that you are testing and might not work on end user browser 🙂 . These are the ones that I have found useful during part of my projects development You can also share your experiences ( or pains 🙂 ) here while using CSS.

Comments (10)

  1. Mike Bosch - Reply

    April 11, 2008 at 9:50 am

    You should really push for a reset.css. See the Yahoo UI page for an example one. It really helps put you off on the right foot so that all your major elements have the same settings since those can vary by browser.

  2. Ganesh Gembali - Reply

    April 12, 2008 at 9:31 am

    Hi Mike,
    YUI reset CSS is really cool one. Thanks for the suggestion. 🙂

  3. [...] Here I want to share some of my experiences( pains I went through ) while developing styles for my previous projects. One of the project is based on div structure and other is based on table and div structure….. Readmore“ [...]

  4. Andrew Jhonson - Reply

    August 20, 2009 at 11:33 am

    To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites at http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/

  5. Urenjoy - Reply

    April 24, 2010 at 1:17 pm

    Designer must know basic difference between browsers and proper way to handle cross browser compatibility. for beginner see following:
    http://www.techbrij.com/80/7-tips-to-make-your-website-cross-browser-compatible

  6. jhansi - Reply

    March 13, 2012 at 3:28 pm

    Hi friends,
    I have a problem while i am designing my web page with image as a button, i was created my menu buttons with images and then i keep a link to this image. when i was run it in Mozilla Firefox and googleCrom it seems good but in internet the image is looking with blue boarder.so, how to remove that linking color in internet browser window..

    • Ganesh Gembali - Reply

      April 11, 2012 at 11:12 am

      Hi Jhansi,

      May be try to provide style "border:0px" for images. I also kind of faced same issue. In IE by default border for images is 1px with blue color.

  7. Kiefer - Reply

    April 10, 2012 at 6:08 pm

    You should really push for a reset.css. See the Yahoo UI page for an example one. It really helps put you off on the right foot so that all your major elements have the same settings since those can vary by browser.

    • Ganesh Gembali - Reply

      April 11, 2012 at 11:19 am

      Hi Kiefer,

      Thanks for the tip. Yes, I agree that reset.css would make it easier. Infact reset.css is nothing but a normalizer for css across browsers which is based on experience of lot of web developers @ Yahoo. But as Urenjoy also pointed correctly, we should know these basic differences. Using reset.css or something custom is up to the developer.

Add a Comment