IE6 IE7 h3 positioning - HTML Forums

eugene3.1 · 10-24-2009, 05:11 PM

I've been building a website but have an Issue with H3 headers. It seems that the positioning with padding etc is ignored by IE7 and below.

Does anyone know a way around this? Adding sizes into the style sheet desn't help. The site can be seen here: www.bangersandmashme.com

cheers,

eugene3.1 · 10-26-2009, 02:52 PM

I've managed to solve it for all browsers but in IE7 the padding pushes the pink h3 in the middle column under other content. Anyone know why IE7 treats the css different?

Excavator · 10-26-2009, 03:58 PM

Hello eugene3.1,
Have you tried the reset?
Applying margin:0; padding:0; to everything will let you specify your own measurements since defaults are different from browser to browser.

Put this at the top of your CSS -

Code:

* {
margin: 0;
padding: 0;
}

phatbass · 10-26-2009, 04:40 PM

The problem seems to be caused by your <div class="padding"> that wraps the <h3>. The padding-top of 17px pushes the content too far down in IE and hides it behind the div below it.

If you change your padding-top to 12px it works fine, BUT in FF it then appears a bit too high. I've experienced quite a bit of such inconsistencies between browsers. So far, I have not been able to find an elegant fix, not sure if one exists. I noticed that it's not caused by a particular tag, but is rather caused by heavy nesting. The more nested elements you have, the more noticeable such inconsistencies will be.

eugene3.1 · 10-26-2009, 05:57 PM

Thanks phatbass and Excavator, been banging my head against the cross browser walls for ages with this.

Excavator's tip works well, makes alignment much easier.

* {
margin: 0;
padding: 0;
}

In my case I also needed to make the the top div in the middle column taller so the text aligned with the right column but didn't push the middle column headers too far.

Thanks again guys thats one annoying issue to cross of my list. :-)