Developer/Designer Notes

Common browser pitfalls to note while coding CSS

Posted by Kiran Mova on April 10, 2007

My GUI works fine in my browser, and doesn’t display properly when I run the same from my boss’s machine. The reason most often is that my boss has a different browser. So here are some notes on what might cause that:

  • Each browser has their own default font size, padding and margins. Clear them using the ‘*’ property.
  • IE doesn’t render sizes mentioned as ‘px’ relative to device resolution. IE also has an issue with ’em’, which makes the text non-readable when user tries to alter the font size. Learn to fix this em issue.
  • The famous Box model bug in IE.  The IE considers ‘content width’ = ‘css width’ – margin – padding, where as the W3C specifies it as ‘content width’ = ‘css width’.  There are some box model hacks there, but I like the solution from Miha Hribar, specify the margins/paddings to the child objects instead of the parent.
  • @import, causes some minor glitches in IE6, the solution is to use the <link> as explained in Common Problems while coding with CSS and HTML (Look for other common issues in this article.).
  • Avoid CSS Hacks as much as possible, since the browsers are moving in the direction of supporting the standards. Some hacks however might be required, to support the older browser versions.
  • positioning with floats is rendered differently in IE compared to Firefox.

Check some interesting comments posted at Andy Budd’s common problems with CSS that people face.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: