CSS Relative Positioning Difference Between IE and FF

[Fruit & Veg]

I'm starting to put together a site and I'm trying to overlay the logo on top of the design. The logo is awkwardly overhanging both the header and the main body elements, so I need to overlay the image.

Here's the test page so far - http://www.thebrandsurgery.co.uk/testsite/ - it's fine in FF2 but it's about 10px down in IE7.

I've tried searching for hacks and answers but nothing is working. How can I get this image to appear correct in both browsers?

Here's the CSS I'm using:

html, body {margin:10px; padding:0; font: 76% arial,sans-serif; text-align:center;}

p {margin:0 10px 10px;}
a {display:block; color: #006; padding:10px;}

hr {border:0; width: 100%; color: #ec0c8c; background-color: #ec0c8c; height: 1px;}

div#container {text-align:left; width:700px; margin:0 auto; padding:0;}

div#header {float:right; width:660px; padding-top:80px; padding-bottom:3px; border-bottom: 3px

solid #ec0c8c;}

div#pinkbar {width:650px; float:right; background:#ec0c8c; padding:5px; margin:0;

color:#ffffff; text-align:right; font: 14px arial bold;}

div#logo {position: relative; top:-356px; left:70px; margin:0; padding:0;}

div#content {float:right; width:660px;}

div#navigation {background:#B9CAFF; float:left; width:40px;}

div#extra {background:#FF8539; float:right; width:660px;}

div#footer {background:#ffffff; float:right; width:660px;}

Maybe there's a better approach for acheiving this? Let me know

[Fruit & Veg]

OK, ignore the above.

I've been playing around and nothing is working. That page is now setup how I want it. The logo is at the bottom but I want it to be overlayed at the top of the pink nav bar so it lines up. It overlays two divs, plus it needs to remain in the same place for different sized browsers - this is the killer.

Any ideas?

[Costin Trifan]

First thing first:
I saw you're using the same ID on multiple divs to identify them (that is to apply styles to them)... This is wrong! Use CSS classes for that. An ID should identify a single element in your page not multiple elements.

Anyway, I've been playing around with your code and I came up with this, so this is how you want it to look like?

[chicgeek]

Originally Posted by Costin Trifan

First thing first:
I saw you're using the same ID on multiple divs to identify them (that is to apply styles to them)... This is wrong! Use CSS classes for that. An ID should identify a single element in your page not multiple elements.

To add:

ID = single assignment
class = multiple assignments

Not sure if you need a IE positioning hack, but I tend to use this:

margin-bottom: 0px; (all browsers see this)
*margin-bottom: -2px; (only IE sees this and fixes itself)

[bratwebdesign]

To overlay the logo do this:

Change div#container to this: (I only added position: relative

div#container {
	text-align : left;
	width : 700px;
	margin : 0 auto;
	padding : 0;
	position: relative;
}

Then to div#logo: (added position, top and left)

div#logo {
	position : absolute;
	top : -5px;
	left : 40px;
	width : 157px;
	margin : 0;
	padding : 0;
}

I tested this on IE6 and FF2 at different screen resolutions and it worked perfectly. I would change the logo to a gif without the background though.

Hope this helps.

[Costin Trifan]

Ok, ignore my post too!

note for myself:
never get involved into these kind of problems anymore