css shift

Hi yea,
I have a div with a nested div inside. but when I view in firefox there is a
4 odd pix more dropped down from the top of the page. any one have any idea
as to why, I cannot post the page online at the moment but would be grateful
for any help.

regards

Kenny


<div id="masthead"><div id="masthead_right"><img
src="sitebits/images/logoarea.jpg" width="190" height="95"> </div>
<div id="masthead_openinghours"> <p><strong>Opening Hours: </strong>Monday -
Saturday 10am - 6pm<br><span style="margin-left: 105px;">Sunday Closed
</span> <br>
<span style="margin-left: 28px;"><strong>Freephone: </strong> 0800 056
1750 </span></p>
</div></div>



#masthead {
width: 744px;
margin: 0 auto;
background-image:url(../images/top_head_bg.jpg);
background-repeat:repeat-x;}


#masthead_openinghours
{width: 300px;
top:20px; /* this is the space i want from the top, it works fine inIE but
then in firefox it seems to be an extra few pix out.*/
margin-left: 440px;
padding:0px;
position:absolute;
font-size: 11px;
color:#000000;
letter-spacing: 1px;
line-height: 15px;}

Try zeroing your <p> tag see if that helps at all.

#masthead_openinghours p {
margin: 0;
padding: 0;
}


twocans wrote:

Hi yea,
I have a div with a nested div inside. but when I view in firefox there is a
4 odd pix more dropped down from the top of the page. any one have any idea
as to why, I cannot post the page online at the moment but would be grateful
for any help.

regards

Kenny


div id="masthead"><div id="masthead_right"><img
src="sitebits/images/logoarea.jpg" width="190" height="95"> </div
div id="masthead_openinghours"> <p><strong>Opening Hours: </strong>Monday -
Saturday 10am - 6pm<br><span style="margin-left: 105px;">Sunday Closed
/span> <br
span style="margin-left: 28px;"><strong>Freephone: </strong> 0800 056
1750 </span></p
/div></div



#masthead {
width: 744px;
margin: 0 auto;
background-image:url(../images/top_head_bg.jpg);
background-repeat:repeat-x;}


#masthead_openinghours
{width: 300px;
top:20px; /* this is the space i want from the top, it works fine inIE but
then in firefox it seems to be an extra few pix out.*/
margin-left: 440px;
padding:0px;
position:absolute;
font-size: 11px;
color:#000000;
letter-spacing: 1px;
line-height: 15px;}

Ah ha,
your a star, lol I wasted an entire hour on that, thanks for the help it
worked.


regards

Kenny








"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Try zeroing your <p> tag see if that helps at all.

#masthead_openinghours p {
margin: 0;
padding: 0;
}


twocans wrote:

Hi yea,
I have a div with a nested div inside. but when I view in firefox there
is a 4 odd pix more dropped down from the top of the page. any one have
any idea as to why, I cannot post the page online at the moment but would
be grateful for any help.

regards

Kenny


div id="masthead"><div id="masthead_right"><img
src="sitebits/images/logoarea.jpg" width="190" height="95"> </div
div id="masthead_openinghours"> <p><strong>Opening Hours:
/strong>Monday - Saturday 10am - 6pm<br><span style="margin-left:
105px;">Sunday Closed </span> <br
span style="margin-left: 28px;"><strong>Freephone: </strong> 0800 056
1750 </span></p
/div></div



#masthead {
width: 744px;
margin: 0 auto;
background-image:url(../images/top_head_bg.jpg);
background-repeat:repeat-x;}


#masthead_openinghours
{width: 300px;
top:20px; /* this is the space i want from the top, it works fine inIE
but then in firefox it seems to be an extra few pix out.*/
margin-left: 440px;
padding:0px;
position:absolute;
font-size: 11px;
color:#000000;
letter-spacing: 1px;
line-height: 15px;}