Home/ Questions/Q 6220467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T07:57:41+00:00

This happens to be the top padding plus the bottom padding on the element

  • 0

This happens to be the top padding plus the bottom padding on the element id f3c. I have attached two pics – one of IE8 and one of IE9.

I tried to capture the relevant information from the debugger. Basically I have a link inside a fieldset, inside a form. The fieldset is so the page validates.

I’m using relative positioning for the link (top:9px).

Not sure why IE9 would add in in 4px from IE8’s calculation unless for some reason it is counting the (padding-top:2px and padding-bottom:2px).

ACTUAL DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE8

IE9

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on the screenshot, you’re adding padding to an inline element.

    Try adding:

    display: inline-block;

    And make the adjustments from there.

    edit:

    Inline elements don’t apply margin/padding/width/height (well they shouldn’t but browsers like ie have non-standard behaviours)

    Block elements can have margin/padding/width/height but they cause elements to be stacked vertically.

    inline-block is kind of a hybrid between them. They allow other inline elements to be placed vertically next to them, however you can also add margin/padding/width/height to them.

    My general rule is that block level elements are the heavy construction elements in a page (the framework) where as inline is for the content within the page (bold, italics, etc). inline-block allows you to fudge inline elements a little with the margin, padding.

    note: Just be aware that in older versions of ie this still isn’t pixel perfect.

    • 0