Problem:
IE7 inserts extra padding-top when applied to an element inside a cleared DIV that comes after floated DIV. But it’s ok with
Mozilla/Firefox, Opera and Netscape browsers.
Check my test page: http://www.dlsu.edu.ph/_temp/test-ie7-padding.asp
Solution/s:
From my test case, it should be fixed using one of the following:
- By adding a border to the DIV with the property (clear: both)
- By removing the background property
- By completing the background’s shorthand properties [e.g. adding “…url(“image”) no-repeat 0 0;“]
- By removing the float property on the first DIV
This is not only a version 7 problem of IE I guess, because I noticed that it also occurs with the previous versions with regard to our whole DIV structuring using CSS.
By the way, Tantek’s CSS box model hack has a different solution with this problem.
Share this:
