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;
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.