...

View Full Version : Disappearing Images



dbbb220
07-28-2007, 02:58 PM
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>

_Aerospace_Eng_
07-28-2007, 03:09 PM
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.

mranster
07-28-2007, 04:01 PM
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!

dbbb220
07-28-2007, 05:27 PM
Got it working, thanks.
I hate curly brackets....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum