Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Seattle
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My images wont load when I preview in any browser

    I am working on a site and when I go to preview in any browser none of my images load. I am really new to this but made a website that worked yesterday now when I try to get a little more in-depth i dont really know what is going wrong.

    Here is my css
    Code:
     
    @charset "UTF-8";
    
    body {
    	background: 727ba0;
    	background-image: url(../image/background.png) repeat-x left top;
    	text-align:center;
    	font-family:"goudy old style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #wrap {
    	width: 948px;
    	background-image:url(image/Wrap.png) repeat-y left top;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #content {
    	background-image:url(image/container.png) no-repeat left top;
    }
    
    h1 {
    	width:470px;
    	margin: none;
    	float:left;
    	height:150px;
    }
    
    h1 a {
    	width:470px;
    	height:150px;
    	display:block;
    	background-image:url(image/logo.png) no-repeat top left;
    }
    
    h1 a span {display: none;}
    
    /* top navigation menue */
    
    #main-navigation {
    	float: right;
    	height:49px;
    }
    
    #main-navigation li {
    	float:left;
    	height:49px;
    	margin:none;
    	position:relative;
    	padding-top:1px;
    }
    
    #main-navigation li a {
    	height:49px;
    	display:block;
    }
    
    #main-navigation li a span {
    	display:block;
    	height:49px;
    	text-indent:-9999px;
    	line-height:0;
    	font-size:0px;
    }
    
    #main-navigation #nav-home {
    	background-image:url(image/nav-home.png) no-repeat left top;
    	width:99px;
    	margin:none; /*as needed to look good*/
    }
    
    #main-navigation #nav-home span {
    	background-image:url(image/nav-home.png) no-repeat left bottom;
    	width:99px;
    }
    
    #main-navigation #nav-about-us {
    	background-image:url(image/nav-about-us.png) no-repeat left top;
    	width:134px;
    	margin:none; /*as needed to look good*/
    }
    
    #main-navigation #nav-about-us span {
    	background-image:url(image/nav-contact.png) no-repeat left bottom;
    	width:134px;
    }
    
    #main-navigation #nav-contact {
    	background-image:url(image/nav-contact.png) no-repeat left top;
    	width:123px;
    	margin:none; /*as needed to look good*/
    }
    
    #main-navigation #nav-contact span {
    	background-image:url(image/nav-contact.png) no-repeat left bottom;
    	width:123px;
    }
    
    #main-navigation #nav-retailers {
    	background-image:url(image/nav-retailers.png) no-repeat left top;
    	width:123px;
    	margin:none; /*as needed to look good*/
    }
    
    #main-navigation #nav-retailers span {
    	background-image:url(image/nav-retailers.png) no-repeat left bottom;
    	width:123px;
    }
    
    #main-navigation .current {background-position: left center}
    #main-navigation li a.current span {diplay:none;}
    and here is the html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>mack &amp; bancker | fine jewelry</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
     
    <body>
    
    	<div id="wrap">
        <div id="content">
        	<h1>
            	<a href="#" title="welcome to mack &amp; bacnker">
                <span>Fine Jewelry | Engineered Works of Art</span>
                </a>
            </h1>
            <ul id="main-navigation">
            <li>
            	<a id="nav-home" class="current" href="index.html" title="mack &amp; bancker">
            	<span>Home</span>
            	</a>
            </li>
            <li>
            	<a id="nav-about-us" href="#" title="about us">
            	<span>About Us</span>
            	</a>
            </li>
            <li>
            	<a id="nav-contact" href="#" title="about us">
            	<span>Contact</span>
            	</a>
            </li>
            <li>
            	<a id="nav-retailers" href="#" title="retailers">
            	<span>Retailers</span>
            	</a>
            </li>
            </ul>
    	</div>
        </div>
        
    </body>
    All the images are in the same folder under "image" and all names are spelled correctly. Why wouldn't the images be loading or linking or anything of the sorts???

    Any help would be great thanks.

    _mitch

  • #2
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    According to W3C, your markup and CSS is invalid. Here are two links that will help you out:

    XHTML Validation
    CSS Validation

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Location
    Seattle
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you that solved a good deal of my problems.

  • #4
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    No problem. Glad I could help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •