Graphic spacing issue

Question

For the site I'm adding pages to, there are times when the spacing of a graphic beneath the text is way off, but only in Internet Explorer. It shows up just fine in firefox. I've tried doing <br> <br> between graphic and text as well as <p>. This doesn't resolve issue. I have also created different versions of the graphics with different names, but it doesn't matter. The code is identical to other pages that don't have this problem. The spacing is just fine if I move the graphic to another part of the page, which, in some cases, I can't do.
Any thoughts?
I'm using DreamweaverCS4 on a Windows 7 computer, if that helps. Graphics made in Photoshop CS4.

Answer 1

Ok. Let me know if this works. And thanks for taking a look.
CSS
body
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333333;
    overflow: scroll;
#container
    width: 940px;
    margin: 0 auto;
    text-align: left;
#flashContent { width:100%; height:100%; }
#header
    background: url(header.gif) no-repeat;
    height: 134px;
/*####################################### MENU #######################################*/
#menu
    text-align: center;
    line-height: 2em;
    padding-bottom: 0;
    height: 35px;
    background: url(menu.gif) repeat-x;
    color: #fff;
    /*background-color: #32447f;*/
#menu a
    text-decoration: none;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    font-size: 85%;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 12px;
    padding-bottom: 12px;
#menu a:hover
   color: #c6a45a;
/*####################################### MENU END #######################################*/
#flash {
    height: 361px;
    background-color: #000;
/*####################################### HOMEPAGE THREE COLUMNS #######################################*/
#threemain h1, ul, li {
margin: 0;
padding: 0;
#threemain h1 {
    font-size: 95%;
    color: #344764;
    font-weight: bold;   
#threemain h2 {
    font-size: 75%;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
#threemain ul {
    margin-left: 0;
    padding-left: 0;
    font-size: small;
    padding-top: 0;
    margin-top: 0;
#threemain li {
    list-style-type: none;
#threemain p {
    font-size: small;
    padding: 0;
    margin: 0;
#threemain a {
    text-decoration: none;
    color: #039;
#threemain a.h1 {
    color: #344764;   
#threemain a.prodtitle {
    font-size: 90%;
    color: #69C;   
#threemain a.request {
    color: #333;
#threemain a.prodtitle:hover, #threemain a.view:hover {
    color: #c6a45a;   
/*####################################### HOMEPAGE THREE COLUMNS END #######################################*/
/*####################################### SIDEBAR #######################################*/
#sidebar
    float: left;
    width: 300px;
    height: 500px;
    border-right: thin #eaebeb solid;
#sidebar .title
    font-weight: bold;
    font-size: 100%;
    display: block;
    padding-bottom: 8px;
    color: #444;
    text-decoration: underline;
    letter-spacing: 0.2em;
    margin-bottom: 0.5em;
    margin-top: 3em;
#sidebar a
    display: block;
    padding: 6px;
    color: #76787a;
    text-decoration: none;
    border-bottom: thin #eaebeb solid;
    margin-bottom: 1em;
#sidebar a:hover
    color: #c6a45a;
    font-family: Arial, Helvetica, sans-serif;
#sidebar .current {
    color: #c6a45a;
#sidebar ul
    text-align: left;
    margin: 0;
    padding: 0 0 0 50px;
    line-height: 1em;
#sidebar li
    text-align: left;
    font-weight: bold;
    overflow: hidden;
    font-size: 90%;
    line-height: 1em;
    list-style-type: none;
/*####################################### SIDEBAR END #######################################*/
/*####################################### SIDEBAR ALTERNATE #######################################*/
#sidebaralt
    float: left;
    width: 250px;
    height: 500px;
    border-right: thin #eaebeb solid;
#sidebaralt .title
    font-weight: bold;
    font-size: 100%;
    display: block;
    padding-bottom: 8px;
    color: #444;
    text-decoration: underline;
    letter-spacing: 0.2em;
    margin-bottom: 0.5em;
    margin-top: 3em;
#sidebaralt a
    display: block;
    padding: 6px;
    color: #76787a;
    text-decoration: none;
    border-bottom: thin #eaebeb solid;
    margin-bottom: 1em;
#sidebaralt a:hover
    color: #c6a45a;
#sidebaralt .current {
    color: #c6a45a;
#sidebaralt ul
    text-align: left;
    margin: 0;
    padding: 0 0 0 50px;
    line-height: 1em;
#sidebaralt li
    text-align: left;
    font-weight: bold;
    overflow: hidden;
    font-size: 90%;
    line-height: 1em;
    list-style-type: none;
/*####################################### SIDEBAR ALTERNATE END #######################################*/
/*####################################### CONTENT #######################################*/
#content
    margin: 0 0 0 300px;
#text {
padding-left: 50px;   
#content h1
    text-align: left;
    color: #c6a45a;
    line-height: 1.2em;
    font-weight: 400;
    margin: 25px 0px 20px 0px;
    font-size: 175%;
#content h2
    text-align: left;
    font-weight: 200;
    line-height: 1.2em;
    margin: 20px 0px 15px 0px;
    font-size: 135%;
#content p
    font-size: small;
    text-align: left;
    padding: 0;
    margin: 0px 0px 20px 0px;
    line-height: 1.5em;
#content a
    text-align: left;
    color: #039;
    line-height: 1.5em;
    overflow: hidden;
#content a:hover
    color: #c6a45a;
#content ul, ol
    font-size: small;
    font-weight: bold;
    line-height: 2em;
    margin-left: 3.5em;
#content li
    font-size: small;
    padding: 0.2em;
    font-weight: normal;
    line-height: 1.4em;
#content sup
    color: #003300;
    font-weight: bold;
    font-size: small;
.partners ul{
.partners li{
.column1 {
    float: left;
width: 250px;
border-top: solid 1px #aaa;
border-right: solid 1px #aaa;
margin-top: 10px;
padding-right: 30px;
margin-top: 10px;
padding-top: 10px;
.column2 {
    float: left;
width: 250px;
border-top: solid 1px #aaa;
margin-top: 10px;
padding-left: 30px;
margin-top: 10px;
padding-top: 10px;
/*####################################### CONTENT END #######################################*/
/*####################################### CONTENT ALTERNATE #######################################*/
#contentalt
    margin: 0 0 0 250px;
#textalt {
padding-left: 50px;   
#contentalt h1
    text-align: left;
    color: #c6a45a;
    line-height: 1.2em;
    font-weight: 400;
    margin: 25px 0px 20px 0px;
    font-size: 175%;
#contentalt h2
    text-align: left;
    font-weight: 200;
    line-height: 1.2em;
    margin: 20px 0px 15px 0px;
    font-size: 135%;
#contentalt p
    font-size: small;
    text-align: left;
    padding: 0;
    margin: 0px 0px 20px 0px;
    line-height: 1.5em;
#contentalt a
    text-align: left;
    color: #039;
    line-height: 1.5em;
    overflow: hidden;
#contentalt a:hover
    color: #c6a45a;
#contentalt ul, ol
    font-size: small;
    font-weight: bold;
    line-height: 2em;
#contentalt li
    font-size: small;
    padding: 0.2em;
    font-weight: normal;
    line-height: 1.4em;
#contentalt sup
    color: #003300;
    font-weight: bold;
    font-size: small;
/*####################################### CONTENT ALTERNATE END #######################################*/
/*####################################### FOOTER #######################################*/
#footer {
    text-align: center;
    color: #666666;
    font-size: 60%;
        height: 30px;
        padding-top: 1em;
#footer span {
padding-left: 0.2em;
padding-right: 0.2em;
#footer a
    text-align: left;
    color: #039;
    line-height: 1.5em;
    overflow: hidden;
#footer a:hover
    color: #c6a45a;
/*####################################### FOOTER END #######################################*/
img.icon
    padding: 0;
#pic {
    float: right;
    padding-left: 1em;
    padding-bottom: 1em;
    width: 300px;
.clearfloat
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
/*####################################### MISC #######################################*/
#partners td {
    border-bottom: thin solid #06C;
    padding-top: 1em;
#partners img {
    border: none;
#instruct td {
    padding: 0.5em;
    border: solid thin;
#instruct table {
    border: solid thin;
#contact {
    font-size: small;
    text-align: left;
    padding: 0;
    margin: 0px 0px 20px 0px;
    line-height: 1.5em;   
.b1 {
    padding: 0.5em;
#container #sidebar ul li {
    color: #c6a45a;
#container #sidebar ul li {
    color: #c6a45a;
#container #sidebar ul li .current a {
    color: #c6a45a;
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>
<meta http-equiv="cache-control" content="no cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Name of Company</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
p.MsoNormal {
margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
-->
</style>
</head>
<body>
<div id="container">
  <div id="header"> </div>
  <div id="menu"> <a href="index.html">Home</a> <a href="name.html">Title</a> <a href="name.html">Title</a> <a href="name.html">Title</a> <a href="name.html">Title</a> <a href="name.html">Title</a></div>
  <div id="sidebar">
    <ul>
      <li class="title"> Library
        <div align="left"> </div>
      </li>
      <li>
        <h4 class="current">June 2013</h4>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>
    <h4 class="current">May 2013</h4>
    </li>
    <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
    <li>       
        <h5><a href="anothername.html">anothertitle</a> </h5>
      </li>
    <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>
        <h4 class="current">April 2013</h4>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>       
        <h5><a href="name.html">title</a> </h5>
      </li>
      <li>
        <h4 class="current"><a href="name.html">March 2013</a></h4>
      </li>
      <li>
        <h4 class="current"><a href="name.html">February 2013</a></h4>
      </li>
      <li>
        <h4 class="current"><a href="name.html">January 2013</a></h4>
      </li>
    </ul>
  </div>
  <div id="content"><img src="graphic.jpg" width="638" height="150" />
    <div id="text">
  <h1> Tip of the Week</h1>
          <td align="left" valign="middle"><p>4/26/2013</p>
            <h4>Did you know?</h4>
            <p>words words words <strong>a word</strong> words words words.
            <p>a whole sentence of words words words words words words words words words.<br />
              <br />
GRAPHIC I'M HAVING ISSUES WITH             <img src="images/TipoftheWeek/luckycharmgraphic.jpg" width="882" height="300" /><br />
              <br />
              <strong>a few more words (some more words)</strong>: