A top bar on a website not floating properly on Chrome - html

Question

I am creating a website and this is what it should look like:
http://i.imgur.com/PjsnVPw.png
^^ That is in Internet Explorer
But on Chrome it looks like this: http://i.imgur.com/Ga6le1y.png
As you can see the Top bar on chrome shows completely wrong
The HTML and CSS for this is
HTML
<header>
<img id="logo" src="images/logo.png" alt="Logo">
<div id="topLinks">
<div id="SoicalLinks">
<img src="images/LinkedIn.png" alt="Linkedin logo">
<img src="images/twitterico.png" alt="Twitter Logo">
</div>
<div id="PhoneNumber">
01673 862133
</div>
</div>
<nav>
<ul>
<li><a class="first" href="#">Coaching</a></li>
<li>NLP</li>
<li>Course</li>
<li>Culture Change</li>
<li>Training & Consultancy</li>
</ul>
</nav>
<div class="clear"></div>
<div id="banner">
<div id="face">
<img src="images/webface.png" alt="A side on view of a face">
</div>
<div id="fishwaterimage">
<img src="images/fishwater.png" alt="a Fish with a splash of water">
</div>
<div id="quote">
<p>"...The experience has been first class, I feel privileged to have had this opportunity. Thank you team Dexter."</p>
</div>
<div id="readmore">
<p>Read more testimonials...</p>
</div>
</div>
</header>
and the CSS for all that is
body {
background-image: url(/images/background.png); background-repeat: repeat-x;
margin: 0 auto 0 auto;
width: 1024px;
}
img #logo{
float: right;
width: 325px;
display: inline;
}
#topLinks{
margin: 0 0 0 50px;
width: 250px;
display: inline;
float: right;
}
#PhoneNumber{
padding: 15px;
color: #a7a2a5;
background-color: #000;
float: right;
}
#SoicalLinks{
float: left;
}
nav{
text-align: center;
float: right;
margin: -50px 0 0 0;
width: 600px;
}
nav ul
{
list-style-type:none;
margin:0;
padding:0;
}
nav a
{
font-size: 20px;
color: #383336;
text-decoration: none;
border-left: 1px solid #b22b8d;
display:block;
padding: 0px 10px 0 10px;
}
nav li
{
display: inline;
float: left;
}
nav ul a.first {
border-left: none;
}
#banner{
box-shadow: 1.5px 2.598px 15px 0px rgb( 0, 0, 0 );
width: 900px;
height: 248px;
margin: 0 auto 0 auto;
}
#banner #face{
float: left;
z-index: 2;
position: absolute;
}
#banner #fishwaterimage{
float: right;
margin: 0 0 0 0;
z-index: 1;
}
#banner #quote{
font-size: 26px;
float: left;
z-index: 3;
margin: 25px 0 0 25px;
color: #a7a2a5;
width: 300px;
position:absolute;
}
#banner #readmore{
font-size: 15px;
float: left;
z-index: 3;
margin: 170px 0 0 25px;
color: #a7a2a5;
width: 300px;
position:absolute;
font-style: italic;
}
Anyone with any idea why that is not showing properly in chrome and the fix.

Answer 1

Did you try adding position: absolute or position: relative to the nav bar?