Reputation: 4319

how do i fix this weird image shifting

i have an include header i'm using on my site. The include on the home page is the same exact include on the interior page but for some reason on the interior page the image content shifts. The text on the right of the image (it's part of the image) is about 57pixels from the right on the home page and 40 pixels from the right in the interior page.... they're the same image!! I'm completely perplexed. Any help is greatly appreciated!

here's the url, click on the about and home page and you'll see what i mean:

http://goo.gl/6xdjRu

<style>
.center {
    width:1080px;
    margin:0 auto;
    position:relative;
}
</style>

 <div class="center">
 <img src="/images/header_home.jpg" width="1080" height="233" usemap="#Map" style="display:block;" id="header" />

    <div style="position:absolute; z-index:7; width:120px; display:none; left:434px; top:70px;" id="sub_about">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><a href="/history.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_history','','/images/but_history-over.png',1);mopen('sub_about');"><img src="/images/but_history.png" alt="History" width="120" height="39" id="but_history" style="display:block;"></a></td>
            </tr>
            <tr>
                <td><a href="/mission.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_mission','','/images/but_mission-over.png',1);mopen('sub_about');"><img src="/images/but_mission.png" alt="Mission" width="120" height="37" id="but_mission" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/associations.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_associations','','/images/but_associations-over.png',1);mopen('sub_about');"><img src="/images/but_associations.png" alt="Associations" width="120" height="35" id="but_associations" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/careers.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_careers','','/images/but_careers-over.png',1);mopen('sub_about');"><img src="/images/but_careers.png" alt="Careers" width="120" height="40" id="but_careers" style="display:block;"></a></td>
            </tr>
        </table>

        </div>

    <div style="position:absolute; z-index:7; width:120px; display:none; left:542px; top:70px;" id="sub_services">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><a href="/electrical.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_electrical','','/images/but_electrical-over.png',1);mopen('sub_services');"><img src="/images/but_electrical.png" alt="Electrical" width="120" height="39" id="but_electrical" style="display:block;"></a></td>
            </tr>
            <tr>
                <td><a href="/technology.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_technology','','/images/but_technology-over.png',1);mopen('sub_services');"><img src="/images/but_technology.png" alt="Technology" width="120" height="37" id="but_technology" style="display:block;"></a></td>
            </tr>
            <tr>
              <td><a href="/security.asp" onMouseOut="MM_swapImgRestore();mclosetime();" onMouseOver="MM_swapImage('but_security','','/images/but_security-over.png',1);mopen('sub_services');"><img src="/images/but_security.png" alt="Security" width="120" height="37" id="but_security" style="display:block;"></a></td>
            </tr>
        </table>

        </div>

</div>

Upvotes: 0