Please see the following link to my website: http://itsover9000.info/

 

I didnt seem to have any problems when viewing this website on my computer locally but after uploading it to my web server items are moving around.

 

The main images that move are the facebook, twitter and contact images. When viewing in chrome on some computers they are hiding below the toolbar and then suddenly will appear in the right location after some interaction on the website. On other browsers they are moved up further than they are supposed to be.

 

Please help if you can this is majorly stressing me out :|

 

I have checked on the w3c validators for both my html and css and they are both perfect

 

Any help would be appreciated THANKS

Give this a try

 

<div id="topHeader">
<h1> <a href="">
<img src="images/infront360logo400px.jpg" id="topLogo" alt="Infront 360 Photography Logo">
</a>
</h1>
<ul id="topRight">
<li><a href="">
<img alt="Facebook Icon" src="images/facebook.png">
</a></li>
<li><a href="">
<img alt="Twitter Icon" src="images/twitter.png">
</a></li>
<li><a id="topContact" href="">

</a></li>
</ul><!-- topRight -->
</div>

 

#topHeader {
height: 60px;
}
#topHeader H1 {
float: left;
width: 400px;
}
#topLogo {
margin: 9px 0 0;
}
#topRight {
float: right;
list-style-type: none;
margin: 13px 0 0;
width: 400px;
}
#topRight li {
float: left;
}
#topRight img {
margin-right: 3px;
}
#topContact {
background: url("../images/tel.png") repeat scroll 0 0 transparent;
display: block;
height: 18px;
margin: 6px 10px 0;
width: 192px;
}
#topContact:hover {
background: url("../images/tel.png") repeat scroll 0 -18px transparent;
}

that seems to be working fine thank you very much.

 

Did you work out what I was doing wrong??

 

Thanks

Evening,

bit of advice, tone down that drop shadow. its too much. website jumps out at you and screams in your face. have a play with it but i dont think it needs to be that heavy

 

Craig