Positioning between <h3>

[konnor5092]

This is a common problem I have always had but I've never sought about looking for an answer until now.

I am getting text between a <h3> tag shown in a different vertical position in firefox and IE. The size also appears to be different despite the <h3> tag being unstyled.

Firefox



IE7



The code can be viewed here....

http://www.mattoconnor.co.uk/studentrecipes.php

Thanks in advance,

Matt

[MikeHopley]

Originally Posted by konnor5092

The size also appears to be different despite the <h3> tag being unstyled.

Different browsers have different default styles. If you don't specify a style, you leave it to the browser to decide.

[konnor5092]

Originally Posted by MikeHopley

Different browsers have different default styles. If you don't specify a style, you leave it to the browser to decide.

Even regarding vertical positioning when I have set the margin and padding to 0?

[MikeHopley]

Originally Posted by konnor5092

Even regarding vertical positioning when I have set the margin and padding to 0?

Maybe.

The line-height value, for example, could also affect the vertical positioning. Unless this is zero, the difference in browser font-sizes will cause a difference in line-height, which will have much the same effect as adding different padding to the top and bottom. Try specifying a font-size, or specifying line-height: 0;, or both.

You might also have a conflict of styles, although it's unlikely. You can check this by adding !important after your zero-margin and padding declarations:

Code: Select all

{
margin: 0 !important;
padding: 0 !important;
}

These will override all conflicting rules, provided you have not used !important anywhere else. It's a marvellous CSS debugging tool for when you have complex stylesheets, or a cascade over multiple stylesheets. Be sure to remove it after testing.