I am making a site for  my friends landscaping business and ran into a place where IE and FF don’t render the same way.

The problem was on my header element and it was related to padding.

I ran into the problem when trying to align a page background with my menu bar. First i thought it was a problem with dithering of my png file that I was using for the background image. After cleaning it up and saving it without dithering … then saving it as a gif file… I knew it was a problem with the divs that were making up my page and not with the background image.

I started up firebug and looked at the header elements.. sometimes you may have an image or container inside your header that pushes it to be larger because you simply forgot to set padding:0 .. the same for margins and borders…

Also I had a search box that is inside a form element and you know those things never play nice.

After a quick look I said heck and just used firebug to delete all the elements in the header… so basically it was a empty header with a height and padding set…

Still it was rendering one pixel off.

So I took a few minutes and hunted down a CSS hack that really should not be used unless it is a last resort.

Some people will use a browser detector script and feed different css files to different browsers.

This is probably the appropriate way to deal with this but it means that you are maintaining two or 4 separate CSS files… for most of us just maintaining  the one CSS file is enough work. So, how does it work?

Basically IE is forgiving on bad code… Microsoft is alway doing this.. they find that correction of errors on the fly makes people’s lives easier but it can have drawbacks.. Basically you are going to write some bad CSS to exploit the fact that IE will be nice and fix your errors.

Ok so here it is.

In FF i need the padding to be 4px in IE i need the padding to be 5px.

[php]

padding: 4px 5px 5px 5px;
padding: 5px;

[/php]

As you can see the will choke FireFox and other browsers and the line written correctly will be used by FF.

The line below padding will be corrected by IE and it will override the 4px that is above.

This is not a great way to code but it works and in a pinch you can at least test that you are not insane … and then if you want intercept the browser versions visiting your site and feed them separate CSS files.. but honestly .. why?