Positioning of Logo ...

[ronanmagee]

Once more I find myself posting in here after pulling out all of my hair ...

I want to move the logo in the top left hand side down 6px ... http://www.dtcommercials.com

HTML is:

<div id="top">
	<div id="logo">
</div>
</div>

and CSS is:

#top {
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
background: #E8E8E8;
height: 100px;
}

#logo {
margin-top: 6px;
margin-left: 50px;
margin-bottom: 0px;
background-position: left top;
background-image: url(../images/logo.gif);
padding-bottom: 0px;
background-repeat: no-repeat;
height: 100px; /*Set height of text box */
}

I've put a border round it so as to demonstrate what I mean ...

If you look at the site in IE its grand ... however firefox doesnt move it down at all ... if for testing purposes I set the margin-top to be 50px, in firefox it moves my logo and grey border 50px down from the top of the screen ...

Any ideas ...

regards,

Ronan

[-Ox]

Maybe worth taking the margin off the inside element and placing some padding on the outer div like such:

CSS:

#top {
margin: 10px 20px 0 20px;
background: #E8E8E8;
padding-top: 6px;
height: 100px;
}

#logo {
clear: left;
margin: 0 0 0 50px;
background: url(images.gif) no-repeat left top;
padding: 0px;
height: 100px; /*Set height of text box */
}

Code:

<div id="top">  
	<div id="logo">
</div>

Hope this helps

/Ox

[Paul O'B]

Hi,

Ox's solution should work ok because it avoids mozillas top margin bug. Mozilla sometimes inhertits the top margin of its first child div which is happening in your case. All that happens is that parent moves down instead of the child as you increase the margin.

Setting a top border on the parent will usually kill the bug.

#top {
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
background: #E8E8E8;
border-top:1px solid #E8E8E8;
height:107px}

You would then need to increase the height of #top to accommodate the extra 6px margin of the child (as above).

Ox's solution by-passes the margin bug and so should work fine

Paul

[ronanmagee]

Hey guys,

thanks for the tip ...

Regards,

Ronan