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 & 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>© 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.
