View Sidebar

Fixing Extra Padding Rendered by IE7 – Lemuel Cabia

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:

  1. By adding a border to the DIV with the property (clear: both)
  2. By removing the background property
  3. By completing the background’s shorthand properties [e.g. adding “…url(“image”) no-repeat 0 0;“]
  4. 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:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter