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 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disappearing Images

    Hi,

    I've been editing a website template which uses CSS. Everything was going fine until I changed an image - now the image won't load in IE.

    The size, location, file name, file type and case are all correct. Even when I edit the original image, and save back over the old file, it refuses to load the image. Basically as soon as I touch the image, it stops loading.

    It loads fine on AOL however. Please help.

    Thanks in advance,
    David.



    The CSS;
    body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    color: #787878;
    }

    html, body, #wrapper, h1 {
    margin: 0;
    padding: 0;
    }

    th, td {
    font-size: 10px;
    }

    img {
    border: 0; }
    position: absolute;
    }

    a {
    color: #525d8c;
    }

    #wrapper {
    margin: auto;
    text-align: left;
    width: 800px;
    position: relative;
    }

    h1, h2, h3 {
    font-size: 10px;
    }


    h1 {
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    }

    h2 {
    margin: 0 0 5px 0;
    padding: 0;
    }

    h3 {
    padding: 4px 0 0 0;
    }

    .block {
    display: block;
    }

    .clear {
    clear: both;
    height: 10px;
    }

    .left {
    float: left;
    margin: -1px 5px 0px 0px;
    }

    .readmore {
    text-align: right;
    }

    #nav {
    background: red;
    position: absolute;
    top: 48px;
    left: 448px;
    width: 106px;
    }

    #nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #8dc445 url(images/menu_bg.gif) repeat-y;
    }

    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid white;
    }

    #nav a {
    color: #387009;
    text-decoration: none;
    display: block;
    padding: 6px 0 6px 30px;
    }

    * html #nav a {
    width: 100%;
    w\idth: 76px;
    padding: 5px 0 5px 30px;
    padd\ing: 6px 0 6px 30px;
    }

    #nav a:hover {
    background: #5b8c29;
    color: white;
    }

    #booking {
    position: absolute;
    top: 0;
    left: 555px;
    width: 245px;
    height: 172px;
    background: #6ED700;
    padding: 0;
    }

    #booking h2 {
    background: #6ED700;
    color: #0c4366;
    border-bottom: 1px 6ED700;
    padding: 0px 0px;
    }

    #booking .jtype {
    text-align: center;
    padding: 0 0.7em 1em 0em;
    }

    #booking form {
    margin: 1.5em 0 0.5em 1.5em;
    padding: 0;
    }

    #booking th, #booking td {
    text-align: left;
    padding-right: 7px;
    padding-bottom: 10px;
    color: #0c4366;
    }

    #booking .text {
    width: 90px;
    border: 1px solid #0c8dbd;
    }

    #booking .submit {
    border: 1px solid #0a5f7e;
    background: #177da2;
    color: white;
    font-weight: bold;
    font-size: 11px;
    }

    #booking .advanced {
    margin-top: 3px;
    margin-left: 20px;
    }

    #booking,
    #booking a {
    color: #0c4366;
    text-decoration: none;
    font-weight: bold;
    }

    #booking img {
    float: left;
    margin-right: 10px;
    margin-top: 1px;
    }

    #main {
    padding-top: 48px;
    width: 446px;
    position: relative;
    }

    #main .inner {
    position: relative;
    margin: 0 0 0 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    }

    #packagesheader {
    position: absolute;
    top: 113px;
    margin-top: 6em;
    left: 448px;
    }

    #packages {
    float: right;
    clear: both;
    width: 315px;
    padding-top: 143px;
    margin-top: 6em;
    margin-right: 18px;
    line-height: 1.6;
    }

    * html #packages {
    margin-right: 8px;
    }

    #packages h2 {
    margin-left: 0px;
    }

    #packages .golden {
    color: #0087DC;
    background: url(images/minitree.gif) no-repeat;
    padding: 5px 0 3px 30px;
    }

    #packages .silveren {
    color: #0087DC;
    background: url(images/minitree.gif) no-repeat;
    padding: 5px 0 3px 30px;
    }

    #special {
    border-top: 1px solid #ccc;
    padding: 15px 0 0 0;
    text-align: center;
    }

    #footer {
    clear: both;
    background: #333;
    color: white;
    padding: 7px 15px;
    }

    .blue {
    color: #0087DC;
    }

    .green {
    margin-top: 3em;
    color: #5FC806;
    }



    The HTML;


    <!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>
    <title>TITLE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper" class="clearfix">
    <h1><img src="images/logo.gif" width="554" height="47" alt="Travel Agency"></a></h1>
    <div id="booking" class="clearfix">
    <h2><img src=images/translogo.gif height=45></a></h2>
    <form action="?" method="get">
    <div class="jtype" class="clearfix">
    <br><br><br><br>
    </div><!-- end .jtype -->
    <table summary="" cellspacing="0" cellpadding="0" border="0">
    <tr><th>Newsletter</th><td><input name="out" type="text" value="Enter e-mail address" class="text" /> <input type="submit" value="GO" class="submit" /></td></tr>
    </table>
    </div><!-- end booking -->
    <div id="nav" class="clearfix">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutjill.html">About Me</a></li>
    <li><a href="priorities.html">Priorities</a></li>
    <li><a href="blog.html">My Blog</a></li>
    <li><a href="join.html">Join Me</a></li>
    </ul>
    </div><!-- end nav -->
    <h2 id="packagesheader" class="clearfix"><img src="images/blue1.gif" width="352" height="23" /></h2>
    <div id="packages" class="clearfix">

    <h3 class="golden">Right Hand Heading #1</h3>
    <p>Text.</p>
    <p class="readmore"><a href="unknown.html"><img src="images/readmore.gif" width="68" height="15" alt="readmore" /></a></p>

    <h3 class="silveren">Right Hand Heading #2</h3>


    <p>Text.</p>
    <p class="readmore"><a href="unknown.html"><img src="images/readmore.gif" width="68" height="15" alt="readmore" /></a></p>

    <div id="special" class="clearfix">
    <a href="webcards.html"><img src="images/webcards.gif" width="293" height="79" alt="webcards" /></a>
    </div><!-- end special -->

    </div><!-- end packages -->
    <div id="main" class="clearfix">
    <img src="images/nature.jpg" width="447" height="298">
    <h2><img src="images/blue2.gif" width="447" height="24" /></h2>
    <div class="inner" class="clearfix">
    <h3 class="blue">Welcome to the official homepage</h3>
    <img src="images/photo_1.jpg" width="109" height="71" alt="hi" class="left" />
    <p></p>

    <br /><br />
    <h3 class="blue">Left Hand Heading #2</h3>
    <img src="images/photo_1.jpg" width="109" height="71" alt="sea, the beaches" class="left" />
    <p></p>

    <div class="clear" class="clearfix"></div>
    </div>
    <div class="clear" class="clearfix"></div>
    </div><!-- end main -->
    <div id="footer" class="clearfix">
    &copy; Copyright Information here
    </div><!-- end footer -->
    </div><!-- end wrapper -->
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Posting the html/css is kind of useless as we won't be able to recreate the issue because we don't have your images. Post a link to your site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is this the problem right here?

    img {
    border: 0; } <---- extra curly bracket
    position: absolute;
    }


    You'd be amazed how a silly, tiny thing like that can fubar things. Hope it's something that easy!

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it working, thanks.
    I hate curly brackets....


  •  

    Posting Permissions

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