How can I make html padding that looks the same in different browsers?

Question

I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?

Answer 1

Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.

Here's a good Stackoverflow question about CSS Reset files

Answer 2

The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.

Answer 3

You are refering to the IE Model Bug

Answer 4

In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

Answer 5

Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html