Subscribe to this feed

Navigation

Recent Posts

Archive

CSS Browser Differences IE and Firefox

Friday 04 May, 2007 - 13:38pm | 0 comments |

You can design the most beautiful CSS compliant web, all validated to W3C standards, only to find its almost completely unreadable or unusable in another browser. Font sizes are microscopic, menus don't appear as they may now be hidden under a layer, and the layout is all wrong. Worse, it just doesn't look as if its been professionally designed, and if you have already published it, all you can do is cringe before rolling up your sleeves and correcting it.

Browsers have different defaults. Internet Explorer seems to have more than others, so if you design and test using only IE your pages may not display properly in other browsers. As a rule you should test your site with other browsers before publishing it.

There is hack you can use for Internet Explorer to ensure it reads the right CSS and your site is cross browser compliant. This hack is achieved by simply adding !important to the css you want Internet Explorer to ignore. The following CSS creates similar font size across browsers. IE ignores the first line, whereas Firefox applies the first line.


body
{
font-size: medium !important;
font-size: x-small;
}

As another rule you should try to not mix your stylesheet with inline CSS, i.e. if you define an element in your stylesheet then add some inline CSS to it, the stylesheet CSS may be completely ignored and you may end up with a result you don't want..

Posted in: Business
Tags: CSS | W3C | IE | Firefox | Browsers

Comment
 | Link | back to top | del.icio.us digg it furl reddit

© Eriginal Ltd 2011, all rights reserved