CSS padding issue in IE

HTML & CSS
1

Hey Everyone:

You guys provide really great fixes. Maybe you can take a look at this.

I’m a novice and having difficulty making my CSS consistent across web browsers.

The site is: www.thompulliam.com

I’m having a padding issue in IE. On all of my pages, the body content is being pulled up onto the edge in IE. All other browsers render it correctly. The same problem occurs on my blog posting on my blog page.

Please help with this CSS padding confusion.

Thanks in advance.

2

I’m having a padding issue in IE. On all of my pages, the body content is being pulled up onto the edge in IE.
Browsers apply their default margins and padding differently so it is always best to reset them to zero or define them manually.

Start with this:

body {
  margin:0;
  padding:0;
}

Or set your desired values manually, but you do need to address both of them.

3

You also need to remove the height:20px from #logo.

It has 40px font in it that overflows, the 20px height throws off your 30px top margin on #nav.

4

The site already has a body margin and padding of 0px. It is individual divs that have padding applied to them that is rendering incorrectly on IE and Chrome.

I need specific guidance on what code needs to be edited.

5

Can you be a little bit more specific to which divs you are referring?

6

problem divs- info, ppost, ppost p, and cpost p.

The problem areas are the left calendar sidebar on the blog page and the left body text area on the main pages.

7

Did you fix this problem? Just had a look in IE8 but didn’t see any difference between that browser and the others.

8

No, it has not been fixed. The padding errors are slight and may not be easily recognizable with a cursory glance. Here are some screen shots that point out the errors.

Chrome front:

IE front:

Chrome blog:

IE blog: