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

Discussion in 'Web Design and Development' started by samhicks, Jun 7, 2009.

  1. samhicks macrumors newbie

    Joined:
    Jun 7, 2009
    #1
    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:
    HTML:
    <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:
    Code:
    /* 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;
    }
     
  2. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #2
    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:confused:.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    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.
     
  4. nuxx macrumors member

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #4
    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.
     
  5. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #5
    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. :)
     

Share This Page