My index.html page has several inline images that serve as links to

other pages in addition to the usual horizontal nav bar in the header.

All my images are in an "img" folder in the root folder and all show up

except those few . If I rename my index.html page something else and

save it in the same folder, IE (7) will display the images (which are

links also). But as simply "index.html" it shows the images as broken

and displays the alt text instead. Also, the nav bar no longer works

either. I've validated both my css and html and can't see any reason why

this should happen.

I'm building a web site and learning as I go. I'm not a novice, exactly,

but not intermediate either, so don't leave out the obvious in your

reply, as it may not be obvious to me. I used a free template which I

downloaded, and then modified the CSS and HTML using Notepad to suit my

design preferences. I reviewed my site in Netscape as I built it where

it works perfectly, (of course). It wouldn't work in IE until I changed

my default browser to IE which changed the icons of my pages to the IE

icon. All the pages work, except index.html.

Here's the CSS (I admit it has code in it that is probably less than

elegant):
/* ChocolateRevised.css */

body {
margin: 0em;
padding: 0em;
height: 100%;
background-color: #663300 ;
background: url(img/mpbg.gif) repeat;
color: #ffffff;
text-align: left;
font-family: Tahoma, Verdana, Arial, Helvetica, Geneva,

sans-serif;
font-size: .95em;
}

/* THE CONTENT DIVISION */


content {
display: block;
width: 770px;
border: 0em solid red;
margin-top: 25px;
text-align: left;
font-family: Tahoma, Verdana, Arial, Helvetica, Geneva,

sans-serif;
}

content.h2 { font-color: #ff9900;
}

#mid-col quotes { display: block;
width: 800px;
text-align: left;
font-family: Tahoma, Verdana, Arial, Helvetica, Geneva,

sans-serif;
font-color: #ff9900;
}

p.item { color: #ff6633; margin: 15px 30px 15px 30px;
}

p.quotes { text-align: right; font-size: .85em; font-color: #ff6633;

font-style: italic;
}

.takenote { color: #F7C046; font-weight: bolder; font-style: italic;
}

p.author { text-align: left; text-indent: 450px; font-size: .85em;

font-color: #ff6633; font-style: italic;
}

p.authorbox { text-align: right; font-size: .95em; font-color: #ff9900;

font-style: italic;
}

/* TAGS STYLES */



div { border:0px solid red;
} /* debuggin the layout divs */

p { margin: 3px 0px 7px 5px;
padding:0;
font-family: Tahoma, Verdana, Arial, Helvetica, Geneva,

sans-serif;
font-color: #ffffff;
font-size: 1em;
}


h1 { color: #f7c046;
}

h2 { font-family: Georgia, Utopia, "Bookman Old Style", "Times New

York", serif; color: #FF9900;
}

h3 { font-family: Georgia, Utopia, "Bookman Old Style", "Times New

York", serif;
color: #FF9900;
font-size: .95em;
font-variant: small-caps;
text-indent: 5px;
}


ul { list-style-type: square;
color: #ff9900;
}

ul li { color: #ff9900;
margin: 0em 5em 0em .25em;
}

ul li span.item { color: #ffffff;
margin: 0em 5em 0em 0em;
}


/* TEXT HIGHLIGHTING CLASS


.hl { color:#D57332; }
.h2 { color: FF9900; } */

a { color: #FF9900; }

a:hover { color: #C2F904; text-decoration:underline }

a.nolink { color: #FFFFFF; }

a:hover.nolink { color: #ffffff; text-decoration:none; }


img{
padding:2px;
margin:3px;
border:0px solid #6F7850;
display:block;
}

blockquote {
margin: 1em;
padding: .5em;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

blockquote p {
margin:.2em; font-color: #ffffff;
}

/* THE MID-COL DIVISION AND RELATED STYLES - THESE STYLES ARE USED
TO HANDLE THE SHADOW EFFECT OF THE TEMPLATE*/

#mid-col {
margin:0 auto;
padding:28px;
padding-top:17px;
padding-bottom:17px;
width:900px;
text-align:left;
vertical-align: middle;
background:url(img/pbg.gif) repeat-y;
}

#mid-col h2 {
margin: .5em 0em .2em 0em;
padding: 0em 0em .2em 0em;
font-size: 1.25em;
font-color: #ff9900;
font-variant: small-caps;
}

#mid-col h3 { font-family: Georgia, Utopia, "Bookman Old Style", "Times

New York", serif; }

#mid-col p { margin: .5em 0em .2em 0em;
padding: 0em 0em .2em 0em;
font-family: Tahoma, Verdana, Arial, Helvetica, Geneva,

sans-serif; font-color: #ffffff;
}

mid-col.note { color: #D57332; }

#content top { margin: 0 0px 0px 0;
padding: 5px 0px 3px 0;
font-size: .85em;

}


/* THE HEADER BAR CLASSES */

#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
background: url('img/NewHeader.gif');
width: 900px;
height: 200px;
}

#header h1 {
margin:0 0 -.6em 0;
padding:1em 0 0 1em;
font-size:3.0em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:lighter;
width: 128px;
}

#header h2 {
margin: 1em 0 0 1.5em;
padding: 1em 0 0 1.75em;
font-size: 1.0em;
font-weight: lighter;
letter-spacing: 0.08em;
width: 230px;
}

.sbar { height: 162px; }


/* THE FLOATING COLUMN OR THE RIGHT SIDE BAR - RELATED STYLES*/

#float-col {
position: relative;
float: right;
margin: 2px 0px 5px 15px;
padding: 5px 10px 5px 10px;
width: 220px;
font-size: .85em;
border: 1px solid #2d2820;
background:url(img/side_bg3.gif) repeat;
}

#float-col h2 { color: #ffffff; text-align: center;
}

#float-col h3 { color: #Ff9900; font-size: .95em; text-align: center; }

#float-col p { font-color: #ffffff; font-size: .95em; }

#float-col ul {
margin:0em 0 0 0em;
padding:0;
list-style:none;
}

#float-col li {
margin:0 0 .2em 1em;
}

#float-col li a {
text-decoration:none;
}

#float-col a {
color:#ffffff;
}

#float-col a:hover {
color: #C2F904;
text-decoration: none;
}

.photoright { width: 240px; text-align: left; }

.pright { float: right; }


/* THE FOOTER RELATED DIVISIONS AND CLASSES */


#footer {
margin:2.5em 0 0 0;
padding:0px;
text-align:center;
font-size:.70em;
background:url(img/fo_bg.gif) repeat-x;
vertical-align:middle;
}

#footer, .ftop, .fbot { width:900px; <!-- overflow:hidden; --> }


/* FTOP AND FBOT ARE USED TO HANDLE THE CURVY CORNERS OF THE FOOTER

PART */


.ftop { background:url(img/fo_tm.gif); height:8px; }
.fbot { background:url(img/fo_bm.gif); height:7px; }





/* SOME ( LOTS ) OF DESIGN RELATED CLASSES */


/* THE CONTENT TOP AND BOTTOM CURVY STYLES */

.ct, .cb, .cbody { margin:0px; padding:0px; }

.ct { height:30px; width:900px; background:url(img/breadbar.gif);

clear:none; overflow:hidden; text-indent:18px; }

.cb { display:block; height:30px; width:900px;

background:url(img/co_bot.gif); overflow:hidden;}

.cbody { background:url(img/body_bg.gif) repeat-y; width:860px;

padding:20px; display:block; overflow:hidden; }


/* THE BREADBAR LINK STYLES */

.ct a {
font-size: 10px;
vertical-align: middle;
line-height: 30px;
color: #FB0303;
}

.spl_link { color:#FFFFFF; }


/* THE TOP NAVIGATION BAR STYLE CLASSES */

.tbar {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
padding: 8px;
padding-top: 9px;
padding-left: 50px;
height: 16px;
}
.tbar a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 100%;
padding:10px;
padding-bottom:9px;
text-decoration:none;
}

.tbar a:hover {
color: #C2F904;
}


/* THE ACTIVE PAGE EFFECT IN THE TOP NAVIGATION BAR */


a.current { background:url(img/alink_bg.gif) repeat-x; color: #FB0303 }


/* THE STYLES OF SEARCH BOX IN THE TOPBAR */


.searchbox form { padding:0; margin:0; display:inline; }

.searchbox form p { padding:0; margin:0; display:inline; }

.searchbox input { background:transparent; border:1px solid #CCCCCC;

color:#FFFFFF; font-size:.85em;}

.searchbox { border:0px solid #CC6600; float:right; margin-right:20px;

font-size:.80em; }



/* AN SEO CLASS - IS USED TO ENHANCE THE KEYWORD OPTIMIZATION */


.seo { position:absolute; left:-100px; top:-100px; right:0; }



/* SOME GENERAL PURPOSE CLASSES */


.noul { text-decoration:none; }

.bbg { background:#666666 }

.fleft { float:left; clear:left; }

.fright { float:right; }



/* THIS CLASS HANDLES THE LINKS WITH SOME DISCRIPTION - LIKE THE LINKS

IN THE SIDEBAR OF THE TEMPLATE */


.links-with-desc { color:#fb0303; font-size:12px; }

.links-with-desc li { padding-bottom:6px; }

.links-with-desc a { color:#fb0303; font-size:15px; font-weight:lighter;

text-decoration:none; }

.links-with-desc a:hover { color:#C2F904; }

#float-col .links-with-desc a:hover { color:#C2F904; }

#float-col .links-with-desc a { color:#fb0303; text-decoration:none; }




/* IMAGE ALIGNMENT CLASSES */


.img-left{
float: left;
clear: left;
margin-left: 0;
width: 128px;
}

.img-logo {
float: left;
clear: left;
margin-left: 135px;
width: 230px;
}

.img-right{
float:right;
margin-right:0;
}




/* CSS CODE FROM SAMS CHAPTER */

div.hom1 { float: left;
width: 250px;
margin: 0 15px 10px 15px;
padding-bottom: 10px;
}

div.hom1 img { float: left;
margin: 0px 10px 0px 0px;
}

div.hom1 p
{ width: 250;
margin: 0px;
padding: 0px;
color: #FFd660;
font-size: .95em;
font-variant: small-caps;
text-indent: 3em;
}


div.hom2
{ width: 240px;
height: 36px;
margin: 0 0 0 0px;
}

div.hom3
{ width: 240px;
margin: 0 15px 10px 15px;
padding-bottom: 10px;
}

div.hom3 p
{
margin: 5px 10px 30px 10px;
padding-bottom: 30px;
float: right;
font-size: .95em;
}

.clear
{
clear: both;
}


/* MY Services HEADING LINKS */

.more-with-desc { color: #FF9900; font-size: .75em; text-indent: 1.5em;

}

.more-with-desc a { color:#FF9900; font-size: .75em;

font-weight:lighter; text-decoration:none; }

.more-with-desc a:hover { color:#C2F904; }

.more-with-desc h2 { color: #ff9900; }


/* FORM FORMATTING */

input.checkbox { width: 1em; height: 1em; }

input.text { color: #d57332; font-family: Tahoma, Verdana, Arial,

Helvetica, Geneva, sans-serif; font-weight: bold; font-size: .85em;

width: 15em; }

input.email { color: #d57332; font-family: Tahoma, Verdana, Arial,

Helvetica, Geneva, sans-serif; font-weight: bold; font-size: .85em;

width: 20em; }

input[type="reset"] { background-image: url('img/reset.png'); width:

97px; height: 35px; border: none; color: #d57332; font-size: .0em; }

.th { width: 7em; }

textarea.text { color: #d57332; font-family: Tahoma, Verdana, Arial,

Helvetica, Geneva, sans-serif; font-weight: bold; font-size: .85em;

width: 30em; }

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Simply Done! offers professional

organizing services and estate organizing services for home and business

clients." />
<meta name="Keywords" content="Accounting, attics, basements, bedroom,

bookkeeping, business, California, children, closets, Clutter, Clutter

Control, collections, computer consulting, declutter, designing,

disorganization, downsize, downsizing, estates, Estate organizing,

family, filing, garage, home, home office, kitchen, legal, living room,

medical, memorabilia, Napa, Napa County, office, Organize, Organizer,

Organizers, organizing, paper, photographs, planning, Professional,

Professional organizer, records, relocation, San Francisco Bay Area,

seniors, services, space, stress reduction, Time management" />
<link rel="stylesheet" type="text/css" href="ChocolateRevised.css"

media="screen" />
<title>Simply Done! Professional Organizing</title>
</head>
<body>

<div id="mid-col">

<!-- THE HEADER DIV ENCLOSING ALL THE HEADER BAR ELEMENTS LIKE PAGE

HEADING, TOP NAVIGATION, SEARCH BAR ETC BEGINS -->
<div id="header">
<div class="sbar">

<!-- THE MAIN TITLES OF THE PAGE-->
<h1></h1>

<h2 class="seo"></h2>
</div>

<!-- TOP NAVIGATION BAR BEGINS HERE -->
<div class="tbar">
<a href="index.html" class="current">Home</a>
<a href="Services.html">Services</a>
<a href="Clients.html">Clients</a>
<a href="Blame.html">Who's To Blame</a>
<a href="About.html">About</a>
<a href="Contact.html">Contact Us</a>
<a href="Costs.html">Costs</a>
<a href="Relocate.html">Relocate/Downsize</a>
<a href="Resources.html">Resources</a>

</div>
<!-- TOP NAVIGATION ENDS HERE -->

</div>
<!-- HEADER BAR ENDS HERE -->


<div id="content">
<div class="ct"> <a href="index.html">Home</a>
</div>
<div class="cbody">

<!-- THE CONTENT OF THE BODY BEGINS HERE -->


<div class="hom1">
<a href="EstateMore.html"><img src="img/MindL.gif"

alt="Peace

of Mind" /></a>
<p class="photoright">Simplify Your Life</p>
<p class="photoright">Eliminate Guilt</p>
<p class="photoright">Save Money and time</p>
</div>
<div class="hom1">
<a href="ResMore.html"><img src="/img/PlaceL.gif"

alt="Peace of Place" /></a>
<p class="photoright">Clear the Clutter</p>
<p class="photoright">Find Important Stuff Easily</p>
<p class="photoright">Create Inviting Spaces</p>
</div>

<div class="hom1">
<a href="BusMore.html"><img src="/img/PurposeL.gif"

alt="Peace of Purpose" /></a>
<p>Increase Productivity</p>
<p>Master Tasks &amp; Projects</p>
<p>Stay Focused</p>
</div>

<div class="clear">
</div>

</div>
<!-- THE MAIN DISPLAY CONTENT ENDS HERE -->

<div class="cb">
</div>
</div>
<!-- END OF CONTENT ID -->

<!-- START OF FOOTER -->

<div id="footer">
<div class="ftop">
</div>
<div class="hom2"><img src="napo_50px.gif" alt="NAPO Logo" />
</div>
<p>Member, National Association of Professional Organizers</p>
<p>&copy; Template design by <a

href="http://www.kalyanchakravarthy.net/">Kalyan Chakravarthy</a>

Customized by Simply Done!</p>
</div>
<div class="fbot">
</div>

<!-- FOOTER END-->

</div>
</body>
</html>

Any help is appreciated. Although I am a grandmother, it's not the grandkid that's turning my hair gray.

There are some syntax errors in your CSS and html.

- Values of 0 have dimensions attached. This is not proper syntax. Just put a 0. I do see layout differences when this error is present

- height: 100%; has no meaning in the body tag. The document height IS the 100 percent anyway.

- Title must be the first tag after html.

- You could have a browser-host problem because there are capital letters in some filenames. Some hosts change all filenames to lowercase. Also, IE is not case sensitive, Firefox is case sensitive.