IE Only CSS gremlin, divs displaying too low and images stacking Options

[Fouroh4]

Hi, this is hurting my head...

Two Source Pages:

HTML-> http://gndc.runhost.net/theanchor/3.box.challenge.html
CSS -> htt://gndc.runhost.net/theanchor/3.box.css

The Problems:

1. The 2 side divs are showing too low. They are about 7 pixels off, whenever i change the code to fix this in IE/win/OSX I lose the layout in Firefox, Opera and Safari.

2. In IE/OSX the background of the middle div isn't showing

3. The Images in the right div are stacking ontop of the 1st image, this is really weird.

The Code:
CSS Syntax for Both Boxes:

CODE

#topper {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 135px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 135px;
    background-color:transparent;
    background-image:url(../images/top.bg.new.gif);
    background-repeat: no-repeat;
    z-index: auto;
    }
    
* html>body #topper {
    height: 135px; /* ie5win fudge ends */
    background-position:135px 0;
    background-image:url(../images/top.bg.new.gif);
    }
    
#left {
    position: absolute;
    top: 162px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    border-bottom: 10px solid #000000;
    background: url(../images/nav.bg.gif);
    width: 151px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 151px;
    vertical-align: top;
    }
    
* html>body #left {
    top: 140px;
    width: 151px; /* ie5win fudge ends */
    }

#right1 {
    position: absolute;
    top: 174px;
    right: 0px; /* Opera5.02 will show a space  at right when there is no scroll bar */
    margin: 0px;
    padding: 0px;
    background: url(../images/right.nav.bg.gif);
    width: 161px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    vertical-align:top;
    width: 161px;
    }
    
* html>body #right {
    width: 161px; /* ie5win fudge ends */
    }

HTML for Both Boxes & topper:

CODE

<div id="topper">

    <img src="images/top.left.gif" width="307" height="143" align="left" alt=""/>
    <img src="images/community.names.gif" width="102" height="143" align="right" alt=""/>
    
</div>
<div id="left">

    <img src="images/this.issue.gif" alt="This Issue" width="151" height="31"/><br/>
            Page 2 & 3 - News<br/>
        Page 7 - Jerrys Journal<br/>
        Page 11 - <span class="style3">Chestermere Town Hall</span>
      
      <p><img src="images/other.sections.gif" alt="Other Sections" width="151" height="19"/><br/>
          Places of Worship<br/>
        Business Profile<br/>
        Horoscopes<br/>
        Gallery</p>
        
    <p><img src="images/anchor.poll.gif" width="151" height="19" alt="The Anchor Poll"/><br/>
          Where do you drink your coffee?</p>
              <p align="center">
                Tim Hortons<br/>
                Starbucks<br/>
                Second Cup<br/>
                   At Home<br/>
                   Waaaay too cool for coffee!</p>
                
  <p align="left"><img src="images/usefull.links.gif" alt="Useful Links" width="151" height="19"/><br/>
      - Calgary Airport<br/>
    - Alberta Lotteries<br/>
    - Calgary Flames<br/>
    - Road Cameras<br/>
    + Add New</p>

</div>
<div id="right1">
<img src="images/weather.gif" alt=""/>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
</div>

I am almost at the point where I'm just going to create two versions of the page one for the good browsers and one for IE which seems RIDICULOUS but inevetible and send the user to the appropriate one with a browser detection script.

Any Ideas?

404