Heading top margins on FireFox

[Otaku Ichise]

Nobody ever answered me this yet so here goes:

tag <h3></h3> on firefox when you give a { margin-top:20px } why doesnt firefox let he get exactly 20 pixels from top and doesnt let it move from top unless i give pading.

I want to know what you realy do normaly to move an heading from top without gving pading.

 

[eliasr]

Can you put some example code?

 

[Otaku Ichise]

a piece of the code then*

Html

<div id="layer_right">
<div id="layer_right_top"><h3>* Site on construction</h3>
</div>
<div id="layer_right_middle"></div>
<div id="layer_right_bottom"></div>
</div>

css

#layer_right {
width: 600px;
height: 930px;
float: left;
z-index: -1;
background-image: url(../images/banner.jpg);
background-position: center top;
background-repeat: no-repeat;
position: relative;
}
#layer_right_top {
width: 600px;
height: 56px;
background-image: url(../images/layer_right_top.png);
background-repeat: no-repeat;
background-position: top;
margin-top: 146px;
}
h3 {
margin-top: 8px;
margin-left: 8px;
font-size: 15px;
margin-bottom: 0px;
}
#layer_right_middle {
height: 660px;
width: 600px;
background-image: url(../images/layer_right_middle.png);
}
#layer_right_bottom {
height: 60px;
width: 600px;
background-image: url(../images/layer_right_bottom.png);
background-repeat: no-repeat;
}

 

[eliasr]

Ok, the problem is the behavior of this.

#layer_right_top {
width: 600px;
height: 56px;
background-image: url(../images/layer_right_top.png);
background-repeat: no-repeat;
background-position: top;
margin-top: 146px;
}
h3 {
margin-top: 8px;
margin-left: 8px;
font-size: 15px;
margin-bottom: 0px;
}

When you define #layer_right_top, your margin-top is at 146, and when you define in h3 the margin-top is at 8... but... this is in global pixels, i mean, from the top of the webpage, not from the nested div, so is upper than the container [the div tag] but the render of the browser ignore this and put the text inside the div tag.

If you want define h3 8 pixels down from the div tag, need make 146 + 8, so put 154px and you have the expected behaivor.

Or use pading, that makes spaces from the container.

Sorry for my english :biggrin: