1. Skip to Content
  2. Accessibility
  3. Site Map

Philippine Web Accessibility Group

A Philippine Initiative to UN Web Accessibility Design Compliance

Home | About PWAG | Membership | Recommendations | Resources | Seal | Websites | Archives | FAQs | Contact Us
PWAG logo of name in markup format with crossing arrows on top

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.

Back to top
Copyright©2006-2007 Philippine Web Accessibility Group. All Rights Reserved. Email: info at pwag dot org