Free space between menu images in IE

[arlon]

I have a problem about top menu layout (I'm using a Tentacle-modified theme)

I'd like to have the images with no space between them, like it shows in Firefox. (first screenshot)

But in IE (both v.6 and 7) It appears like the 2nd image attached.

Here is my code for that area, as found in theme.php

Code Select Expand

        <tr>
<!-- BEGIN addfav_button -->
             <td align="center" valign="middle" class="navmenu" width="2">
<a href="addfav.php?pid={PID}"> <img src="/_/images/addfav1.gif" border="0" alt="Add image to your favourites"> </a> </td>
<!-- END addfav_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="2">
                        <a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif"  border="0px" align="middle" alt="{ECARD_TITLE}" /></a>                </td>
<!-- END ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="2">
                        <a href="javascript:;" class="navmenu_pic" onClick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0px" align="middle" alt="{PIC_INFO_TITLE}" /></a>                </td>
               

                <td align="center" valign="middle">
                        {PIC_POS}                </td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle"  width="2px">
                        <a href="{REPORT_TGT}"  title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
                </td>
<!-- END report_file_button -->

                <td align="center" valign="middle"  width="2px">
                        <a href="{PREV_TGT}" title="{PREV_TITLE}"><img src="{LOCATION}images/prev.gif"  border="0px" align="middle" alt="{PREV_TITLE}" /></a>
                </td>
                <td align="center" valign="middle"  width="2px">

                        <a href="{THUMB_TGT}" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0px" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle"  width="2">
                        <a href="{NEXT_TGT}"  title="{NEXT_TITLE}"><img src="{LOCATION}images/next.gif"  border="0px" align="middle" alt="{NEXT_TITLE}" /></a></td>
        </tr>


and here is the css for the "navmenu" class.. maybe I need to change something here?

Code Select Expand

.navmenu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        font-weight: bold;
        border-style: none;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 0px;
        margin-bottom: 1px;
        margin-left: 0px;
}

.navmenu a {
        position: relative;
        display: block;
        padding-top: 2px;
        padding-right: 0px;
        padding-bottom: 2px;
        padding-left: 0px;
        text-decoration: none;
}

.navmenu a:hover {
        text-decoration: none;
}


Are there any suggestions/hints/solutions?
Thanks in advance

[Stramm]

the class maintable in the css... change padding-left and padding-right to yoour likings

[arlon]

Yup.. solved!
(this community is what keeps Coppermine perfect!)