Phantom "border" around corner of image displayed in IE8

Question

I have a row of images contained in a single div. These images are jpg images of single-word text (like "Home" that the user clicks on to navigate to different pages. When I run the site on ie8, a small, horizontal dash appears at the lower right corner of each of these images. This dash is active in that if I click on it, it activates the action attached to the image (i.e. the next page comes up). Thus, it is obviously part of the image.

The weird part is that the image file itself has no border whatsoever. It is text on a white background. The remaining 99% of the perimeter is "clean" (i.e. no phantom border displayed). It is just the extreme right end of the bottom edge that displays this dash.

When I run the site in Firefox, everything is fine (no dash mark). I read a bit about ie bugs, but I don't see this listed in ie8. I made an effort with clearfix, but it didn't do anything.

Here is the relevant code. It's in the div id NavButtons where the problem occurs:

Thanks!

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

   <style type="text/css">

       .LeftIndent
       {
           left: 415px;
           position: relative;
       }

       #Tagline
       {
           float: left;
           width: 433px;
       }


       #Body
       {
           float: left;
           width: 732px;
       }

       #TotalPage
       {    
           width: 1280px;
           margin-left: auto;
           margin-right: auto;
           border-left-style: solid;
           border-left-color: #5E91A8;
           border-left-width: 15px;
           border-right-color: #5E91A8;
           border-right-width: 15px;
           border-right-style: solid;
       }
       </style>

<div id="TotalPage">
    <div>
        <img src="../Images/Header.jpg" alt="Image Missing" id="ImgBanner" align="left"/>
    </div>

    <div id="GrDash1">
        <img src="../Images/GreenSeparator.jpg" alt="Image Missing" />
    </div>

    <div id="NavButtons">
        <div class="LeftIndent">
            <asp:ContentPlaceHolder ID="NavHome" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavCap" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavBel" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavBio" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavExp" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavCon" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>             

    <div id="GrDash2">
        <img src="../Images/GreenSeparator.jpg" alt="Image Missing" />
    </div>

    <div>
        <div id="Tagline" >
            <img src="../Images/Tagline.jpg" alt="Image Missing" style="margin-top: 0px" />
        </div>
        <div id="Body">
            <asp:ContentPlaceHolder ID="BodyText" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>

    <div>
        <img src="../Images/CopyrightFooter.jpg" alt="Image Missing" style="margin-top: 10px" />
    </div>

</div>