Hello, people of the forum, first time post! I'm new to HTML/CSS, so please be kind

I tried to find the answer to my problem via google, but to no avail (also tried searching the forum - sorry if this topic has come up before!). Here's the gist of it:

I am missing some graphics but not others in IE and Chrome. These graphics appear just fine in FF, Opera, and Safari. Said graphics are the same type as other graphics that appear, and also (as far as I can tell) are using the same code as the graphics that show up. I thought that this had to do with me placing them side by side instead of one at a time, but the graphics are still missing when I show them one at a time like my other graphics. I'm stymied.

The broken/missing graphics are bluerobot.jpg, silverrobot.jpg, and redrobot.jpg. Cowgirlscan.jpg shows up just fine.

I tried posting the link to the actual website here, but the spam filter got me since I don't have 10 posts yet I also had to omit a great deal of the html for the same reason. Hopefully this is enough to give you an idea of my problem!

Here's the relevant html:


Code:
<div id="bodycontent">
    
    <h3>Robots</h3>
   <div class="galleryphoto">
    <img src="gallery/bluerobot.jpg" width="215" height="300"
    alt="an adorable blue 1950's vintage style robot girl with antenna pigtails" />
    <img src="gallery/silverrobot.jpg" width="215" height="300"
    alt="a tall, slender conicular robot with gauges and scientific instruments on his chest.  He has one tall silver antenna." />
    <img src="gallery/redrobot.jpg" width="215" height="300"
    alt="A cheerful red square boy robot" /> 
    <p><span class="fun">Gearaldine</span> is a girl robot with green antenna pigtails.  She is young and always has a spring in her step.</p>
    <p><span class="fun">Reader</span> is a tall, slender and dignified robot.  He likes to read his gauges and keep his makers in the correct oxygen mix when they visit new planets.</p>
    <p><span class="fun">Torganon</span> is a friendly red robot boy.  He is always cheerful and likes to play.</p>
   </div>
   <h3>Americana Dia de los Muertos Line Art</h3>
   <div class="galleryphoto">
    <img src="gallery/cowgirlscan.jpg" width="825" height="650"
     alt="a 1950's style pinup cowgirl, but drawn as Dia de los Muertos skeleton art" />
    <p>I am really inspired by vintage 1950's pinups.  There are so many great Americana themes, and combining them with the Day of the Dead - what could be more perfect?</p>
Here's the relevant CSS:

Code:
/*
CSS for Stellar Graphic Art & Design site
*/

*{margin:0; padding:0;}

body {
  font-family: "Trajan Pro", Verdana, Helvetica, Arial, sans-serif;
  background-color: #e2edff;
  line-height: 125%;
  padding-top: 0;
  margin: 0;
}

h1, h2, h3 {
  font-family: "Trajan Pro", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 160%;  
  color: white;
  border-top: 3px solid #7da5d8;
  padding-top: 5.1em;
  padding-bottom: 2em;
  padding-left: 10em;
  margin: 0;
  background: url(backgrounds/stellarbannernotext.gif) repeat-y left; 
} 

h2 {
  color: indigo;
  font-size: 130%;
  font-weight: strong;
  padding: 1em;
}

h3 {
  color: #339999;
  font-size: 130%;
  font-weight: normal;
  padding-top: 1.5em;
}

li {
  font-family: "Trajan Pro", Helvetica, Arial, sans-serif;
  font-size: small;
  list-style-type: none;
  padding-top: 40px;
  padding-left: 30px;
}

p {
  color: #339999;
  font-family: "Myriad Pro", Verdana, Helvetica, Arial, sans-serif;
  font-size: medium;
  padding: 10px;
}

p2 {
  font-family: "Myriad Pro", Verdana, Helvetica, Arial, sans-serif;
  font-size: small;
  color: black;
  padding-left: 7px;
  padding-top: 10px;
}

#tagline p {
  font-style: italic;
  font-family: Trajan Pro, Georgia, Times, serif;
  background-color: #bed8f3;
  border-top: 3px solid #7da5d8;
  border-bottom: 3px solid #7da5d8;
  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: -.6em;
  background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}

a {
  font-weight: bold;
  color: black;
}

a:link {
  color: black;
}

a:visited {
  color: blue;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: navy;
}

a:active {
  color: aqua;
  background-color: navy;
}

.fun {
  color: darkslateblue;
  font-family: Georgia, Times, serif;
  letter-spacing: 0.05em;
}



/*
This section deals with the positioning of items on the screen. It uses absolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display.
*/

#navigation, #bodycontent, #header {
  position: absolute;
}

#navigation, #bodycontent {
  top: 14.24em;
}

#bodycontent {
  left: 200px;
}

#header {
  width: 100%;
}

#navigation {
  width: 180px;
  height: 484px;
  background: #7da5a8 url(backgrounds/starsgradient.gif) no-repeat;
}

.feature {
  float: left;
  margin: 30px;
}

.galleryphoto {
  padding: 20px;
  padding-left: 0px;
  margin-right: 20px;
  border-bottom: 1px solid navy;
  margin-bottom: 10px;
}

#tagline {
  padding-top: 0em;
  padding-bottom: .2em;
}
Standard disclaimer - yes, I know I have a lot more to fix than this one issue But I figured I should start here. Thanks for reading this!