IE7 Double Padding on Clearing DIVs
Posted by admin | Filed under CSS
About a week or so ago I encountered a new CSS issue that only was present in IE7 that I was surprised I hadn’t run in to before. Actually I was more surprised to encounter an issue that was only present in IE7 and fine in IE6. Maybe its just me but those bugs seem few and far between.
I was doing a simple two column layout and using my footer to clear the two columns which were floated left. Easy enough. The problem came in to play when I added some padding to the top of my footer which when displayed in IE7 was doubled. Right away my mind jumped to the well documented double float margin bug present in IE6. The solution to that one is to add “display:inline” to the float container and all is well. Unfortunately that did not work in this case BUT a small adjustment to “display:inline-block” did the trick.
Before:
#footer{
clear:both;
padding:15px 0;
width:800px;
}
After:
#footerBox{
clear:both;
display:inline-block;
padding:15px 0;
width:800px;
}
When implementing the solution on actual site files I prefer to apply the “display:inline-block;” rule with conditional commenting. However having the rule in the main CSS does not appear to cause conflicts in any other browsers I test on (Safari, Firefox, IE6) so its a matter of personal preference. Personally I strongly dislike IE and relegate all IE specific fixes etc to their own CSS that is included via conditional comments.
Tags: browser compatability, CSS