CSS Problem

Globian · Mar 10, 2012

I'm currently trying to recreate a webpage design from scratch by creating the images in photoshop, exporting them and coding it to complete the page, However i've already run into a browser compatibility issue.

Below is the code:

----------------------------------------------------------------
<html>
<head>
<title>Corporate Theme - What have you done for your business lately</title>
<style type="text/css">

#container {width: 1026px;
height: 813px;
border: 1px solid white;
margin: auto;}

body {background-color: black;}

#Header {width: 1022px;
height: 122px;
position: relative;
margin: auto;}

#CenterImage {width: 1022px;
height: 248px;
position: relative;
margin: auto;}

#Content {width: 1022px;
height: 380px;
position: relative;
margin: auto;}

#Footer {width: 1022px;
height: 62px;
position: relative;
margin: auto;}

#Logo {position: absolute;
left: 50px;
top: 45px;}

</style>
</head>
<body>

</body>
</html>

----------------------------------------------------------------

Now my problem is that the Header image loads in firefox along with the Logo however in Internet Explorer and Chrome instead of showing the header image i get the broken image icon however the Logo still displays.
As I'm not very good at positioning stuff with CSS I think the problem may be to do with having an ID Selector within a div where both the Div and ID Selector have different CSS Parameters.

Firefox:

Chrome:

Any help is much appreciated