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">
© Copyright Information here
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
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">
© Copyright Information here
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>