Images not appearing properly in browser - fine in Dreamweaver preview?! Help!

[samhicks]

Hi,

I've just created a simple holding page for a website however when i upload the site to the server using filezilla the main image on the homepage isn't displaying fully in all browsers?

It's on a temporary web address at www.lavalight.co.uk

Initially thinking it was a corrupt jpg i've tried re-saving as high medium and low jpgs in photoshop, i've even tried saving the image as a gif to see if that makes any difference but that seemed to make it worse as then only the top fifth of the image appeared then.

I've had this problem with another site i designed which included some jquery java coding which makes the images fade in and out. I was getting this same problem the last image in the loop. Yet to sort it out as i assumed it was a problem with the javascript, now i'm not so sure.

Any help would be most welcome!!!

HTML CODE INSIDE BODY:

<div id="container">
<div id="nav">
<ul><li><a href="index.html">Home</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>
<div id="dotted-line"></div>
<div id="image"><img src="images/shop-front.jpg" width="800" height="550" /></div>
<div id="dotted-line"></div>
<div id="telephone">t. 01373 462 466 | e. <a href="mailto:elitestationers@aol.com">elitestationers@aol.com</a></div>
</div>

CSS FOR HOMEPAGE:

/* GENERAL 
---------------------------------------------*/
body {
	background-color: #CCCCCC;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin-left: 30px;
}



/* NAVIGATION 
---------------------------------------------*/
#nav {
	height: 40px;
	float: left;
	width: 800px;
}
#nav ul {
	display: inline;
	list-style: none;

}
#nav li {
	float: left;
	padding:10px 10px 0 10px;
}
a:link {
	color: #999999;
	text-decoration: none;
	font-size: 16px;
}
a:visited {
	font-size: 16px;
	color: #999999;
	text-decoration: none;
}
a:hover {
	font-size: 16px;
	color: #0099FF;
	text-decoration: none;
}
a:active {
	color: #999999;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
}




/* HOMEPAGE 
---------------------------------------------*/

#container {
	height: 630px;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
#image {
	float: left;
	height: 550px;
	width: 800px;
	margin-top: 5px;
}
#telephone {
	color: #333333;
	height: 20px;
	width: 790px;
	padding-top: 5px;
	padding-left: 10px;
	padding-bottom: 10px;
	float: left;
}

 

[Dal123]

I had this sort of thing with my logo. And I don't know what was causing it. Must be a bug or something in Dreamweaver.
What I did was I opened the file in Adobe Image Ready, and saved it. Then saved it as optimized. I tried importing in Dreamweaver. No joy. Repeated it a few times and it worked.
Very strange.

 

[angelwatt]

The problem isn't JavaScript as I can see the issue when just viewing the image. Even downloading the image and opening it in Preview, it looks the same. Does it look that way when you view it locally? Maybe something is happening during the upload.

 

[nuxx]

I doubt this is the cause of the problem, but you have two divs with the same id; "dotted-line"

An id should be unique. If you want two or more elements to share the same properties you should use class instead.

 

[wheezy]

I doubt this is the cause of the problem, but you have two divs with the same id; "dotted-line"

An id should be unique. If you want two or more elements to share the same properties you should use class instead.

That won't cause it.

Your file isn't saving out correctly, give it a new name. Something is getting corrupted in the metadata or some jpg blah blah blah, it's not your code at all. Do a Save for Web in Photoshop. Should fix your problem.