Padding Issues on IE

HTML & CSS
1

If you look in Firefox my Locate Scholars Near You on the bottom looks right but in IE the right hand side is right snug with the blue border. Any ideas what would cause this?

http://scholarscanada.com/wordpress/education/

Thanks,

Mike

2

Firstly, you are using H1 (block level element) within an A element (inline) which is not “valid” (so beware of the HTML police! :wink: )

Anyhow, the reason those links have a gap at the top in good browsers is because of the default top and bottom margins on the H1 elements. IE6 is not recognizing those because of the float.

Perhaps the easiest solution would be to set a top padding on the #midblock2 box which is served just to IE6 via conditional comments, or like so:


* html #midblock2 {
     padding-top: 10px;
}
3

The easiest way would to not hack for IE6…:slight_smile:

Ignoring the invalid HTML you could just set the anchors to block display (that way it can accept vertical padding) and then set a 1px top padding to avoid the margin collapse the <h1> is creating.

Then remove the bottom margin on the <h1> to avoid spacing out too much :slight_smile:

#midblock2 a{display:block;padding-top:1px;}
#midblock2 h1{margin-bottom:0;}