IE7 css padding problem?

Question

here is my problem. i added padding to my div and reduced the div height accordingly. all browsers except IE7 will render it properly (no surprise...). I have tried a conditional comment to add more padding but it doesnt help one bit.

#contentLargeLeft
{
position:absolute;
padding: 15px 20px 0px 42px;
top:222px;
width:438px;
height:308px;
background-image:url(images/cloud.jpg)…
background-repeat:no-repeat;
}

I have tested it on Safari, Firefox 3, Opera, IE8 Beta and IE7 - all but the latter work ok. I have had this problem before but i am stumped as to how to fix it. Adding more padding does not help.

Additional Details

adam, tried that with padding-top: instead of height and it does nothing sadly. is there anything else microsoft require to get padding to work?

hi littlegraywolf - the height of the div physically is 323px and ive already reduced it by the 15 pixels, hence why its 308. ive fixed this before which is why it is so frustrating! i think ill give that method a try soon, im losing my patience with microsofts buggy browsers.

excellent answers all round guys, adam - yours worked a treat in the end after i implemented it correctly. and littlegraywolf - its a tip ive learned and i can use in the future.

much appreciated folks thank you!

Answer 1

Best Answer - Chosen by Voters

Here's a solution:
height: 25px; //Firefox, Most browsers
!height: 16px; //IE7
_height: 20px; //IE6

The last 2 comments only work in IE.

With these ! or _ declarations, you can change the height, width, padding, any CSS for IE7 and IE6, and it won't affect Firefox/most browsers.

--This solution won't validate. You can create a second stylesheet and put all of your IE declarations in it if you want your normal stylesheet to validate.

Source(s):

If this doesn't work, go with the other guy's idea.

Answer 2

I hate this kind of issues myself. Seen a number of them.

I found that the conflict for IE comes up when you declare static height/with AND pad the box.
What IE does is add padding to your box, i.e.
Height: 438 + top padding 15 becomes 453 (is my math is correct). Which creates a problem.

I found that the best solution is to have another container inside the static height/width one what is flexible height/with and has the padding parameters.

So you would have:
<div id="YourOldContainer">
<!-- this will have your css MINUS the padding -->

<div id="NewBufferContainer" style="padding: 15px 20px 0px 42px;">
All your actual content goes here.
</div>

</div>

Cheers.

Answer 3

Bloody Microsoft and it stupid browser eh!

I can't see anything wrong with it really, perhaps you better look in Microsoft's re-written guide originally created by the W3 but Microsoft decided to be idiots and make developers lives hell.