IE 8 and padding problem

I have issue with IE 8 padding setting. If you look at my web site mywebsite, you'll see the middle part(starting just below the menu bar) is wider than the rest and making the site out of proportion. It is due to padding setting that I applies to this div element. You can see the same problem in h2 elements - such as "Flat share": the maroon color background expands beyond the element's area which ends at the edge of white triangle on the right side. Does anyone know how to resolve this?It only happens in IE 8;works fine in IE 7 and firefox. Here's excerpt of my css

#page {
width: 1000px;
margin: 0px auto;
padding: 20px 5px;
background: #FFFFFF;
}

.sidebar li h2 {
height: 40px;
width: 220px;
margin: 0 0 0 0;
padding: 10px 15px 0px 15px;
background: #890208 url('../images/img05.jpg') no-repeat left top;
letter-spacing: -1px;
开发者_Go百科font-size: 16px;
color: #FFFFFF;
}

UPDATE : I follow Matthew's suggestion and decided not to define width and height explicitly. Voila, problem solved. Thanks guys for all replies.

The issue is that you have a inline style on the main div that holds everything that says its a 1000px. Every element within it has this same width. This will not work in all browsers as you are experiencing. Try using percentages for width on the inner divs like 95% (this number is just a guess ... it will depend on how big your margins/padding is).

The reason this is the case is that margins and padding are being factored into all your divs as well as for the main div. You are attempting to fit a div inside a div with the same width. Both the divs have default margins/paddings. In addition, you have explicitly declared some padding which is having a unexpected applied behavior.

You may have to use a conditional statement to offset the padding issue without affecting other browsers. This is the main reason reset.css files are used, but implementing a reset at this late a stage will no-doubt bring more trouble than it's worth.

<!--[if IE]>
    link a stylesheet that deals with the offset
<![endif]-->

This is a possible solution out of many, but it will work.

You can deal with this using a different style sheet like Daniel says, although you will want to specify "If IE 8". Like such

<!--[if IE8]>
    use a different style sheet for IE 8 here.css
<![endif]-->

OR, you can do what I always do when I run into this problem and just MINUS the padding from the total width of the div. (its a cheat that has always worked for me). So for example, if the DIV is 200px wide, and the content needs 20px padding on left. I would set the padding for the left and right. So lets say you have 20px left and 20px right. That totals 40. So set your DIV width 160px.Hope this helps!