Okay this is blowing my mind. I have built a WordPress theme out of some very simple HTML and images. Unfortunately, I can't show you the actual theme in action because it's not ready to be live on the site, and you have to be logged in as administrator.
Anyway, EVERYTHING seems to be lining up properly and displaying correctly in both FF and IE, except for ONE image. The image simply won't show up in IE and shows my alt= text. I feel crazy posting my code to an image tag, but here it is <img src="<?php bloginfo('template_directory'); ?>/images/bottom.jpg" alt="The Image Isn't working!"> .
I even copied and pasted the image tag from another, working image just to be sure.
Can anybody help?
P.S. Even the site navigation is comprised of 5 images at the top and 5 images at the bottom, and the main logo is an image at the top also, and ALL of these are working fine.
Here's my entire page code, just in case...
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<title><?php bloginfo('name'); ?> - Abbeville, LA - <?php bloginfo('description'); ?></title>
</head>
<body>
<div id="wrapper">
<div id="navi">
<a href="<?php bloginfo('home'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/home.jpg" alt="home" /></a>
<a href="<?php bloginfo('home'); ?>/about/"><img src="<?php bloginfo('template_directory'); ?>/images/about.jpg" alt="about" /></a>
<a href="<?php bloginfo('home'); ?>/staff/"><img src="<?php bloginfo('template_directory'); ?>/images/staff.jpg" alt="staff" /></a>
<a href="<?php bloginfo('home'); ?>/admissions/"><img src="<?php bloginfo('template_directory'); ?>/images/admissions.jpg" alt="admissions" /></a>
<a href="<?php bloginfo('home'); ?>/contact/"><img src="<?php bloginfo('template_directory'); ?>/images/contact.jpg" alt="contact" /></a>
</div>
<div id="content">
<br />
<center>
<img src="<?php bloginfo('template_directory'); ?>/images/banner6.jpg" alt="Harvest Time Christian Academy"/>
</center>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div><!--entry-->
</div><!--post-->
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php else : ?>
<div class="post">
<h2><?php_e('Not Found'); ?></h2>
</div>
<?php endif; ?>
<div id="blogos">
<center>
<img src="<?php bloginfo('template_directory'); ?>/images/bottom.jpg" alt="The Image Isn't working!">
</center>
</div>
</div>
</div>
<div id="navi2">
<a href="<?php bloginfo('home'); ?>/calendar/"><img src="<?php bloginfo('template_directory'); ?>/images/calendar.jpg" alt="calendar" /></a>
<a href="<?php bloginfo('home'); ?>/photos/"><img src="<?php bloginfo('template_directory'); ?>/images/photos.jpg" alt="photos" /></a>
<a href="<?php bloginfo('home'); ?>/athletics/"><img src="<?php bloginfo('template_directory'); ?>/images/athletics.jpg" alt="athletics" /></a>
<a href="<?php bloginfo('home'); ?>/clubs/"><img src="<?php bloginfo('template_directory'); ?>/images/clubs.jpg" alt="clubs" /></a>
<a href="<?php bloginfo('home'); ?>/bulletins/"><img src="<?php bloginfo('template_directory'); ?>/images/bulletins.jpg" alt="bulletins" /></a>
</div>
<div id="footer">
<p>Copyright© 2009 Harvest Time Christian Academy | Master Pages Internet Service | Admin</p>
</div>
</body>
</html>and css...
img {
border: 0px;
}
#sidebar {
float: right;
overflow: hidden;
width: 150px;
}
#left {
float: left;
overflow: hidden;
width: 690px;
}
#holder {
width: 848px;
margin-right: auto;
margin-left: auto;
}
body {
background: #212b35;
font-family: Georgia;
font-size: .85em;
}
#wrapper {
width: 860px;
margin-left: auto;
margin-right: auto;
}
#navi {
width: 850px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#navi2 {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 80px;
text-align: center;
}
#blogos {
margin: 0;
}
#content {
width: 850px;
height: 550px;
margin-left: auto;
margin-right: auto;
background: #fff;
padding: 10px;
}
#holder {
width: 840px;
margin-left: auto;
margin-right: auto;
}
#left {
width: 700px;
float: left;
}
#sidebar {
width: 140px;
float: right;
}
#footer {
width: 850px;
margin-left: auto;
margin-right: auto;
color: gray;
text-align: center;
float: none;
}