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:
Quote:
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
