Avatar of ZekeLA
ZekeLAFlag for United States of America asked on

IE Table Cell with text too tall when next to image cells

I have a table with a row containing my horizontal navigation links. There are three table cells. The left and right ones contain images and the center one contains the text links. In Firefox and Chrome, the images fill the table cells exactly and the row meets the next row without any gaps. But in IE, the center text section becomes taller than the desired 25 pixels and causes gaps below each of the images, ruining the look.

Below is my markup and I've attached the two images and a screenshot showing the right (FF) and wrong (IE) versions.

Please tell me how I can fix this so the gap is gone. I'm working within an existing website so I can't get rid of the table layout. Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Company Profile</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
      .txt-headerlink A:link {TEXT-DECORATION: none; color: #93CAD9; 
            font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold;}
      .txt-headerlink A:visited {TEXT-DECORATION: none; color: #93CAD9; 
            font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold;}
      .txt-headerlink A:hover {TEXT-DECORATION: underline; color: #cc3300; 
            font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold;}
      .txt-headerlink A:active {TEXT-DECORATION: underline; color: #ffcc00; 
            font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold;}

      .txt-linkseparateltblue {
         font-family: Arial, Helvetica, sans-serif; 
         font-size: 11px; 
         font-weight: bold; 
         color: #93CAD9; 
      }
   </style>
</head>
<body id="ctl00_MainBody" bgcolor="#ffffff" leftmargin="0" topmargin="0">
   <form name="aspnetForm" method="post" action="AboutUs.aspx" id="aspnetForm">
      <table id="Table1" border="0" cellpadding="0" cellspacing="0" width="770" align="center">
         <tr id="HeaderTopTR">
            <td colspan="4" bgcolor="#ffffff">
               <table id="tblHeaderTop" border="0" cellpadding="0" cellspacing="0" width="770" bgcolor="#ffffff">
                  <tr>
                     <td width="50"></td>
                     <td width="265"></td>
                     <td width="30"></td>
                     <td width="214"></td>
                     <td width="35"></td>
                     <td width="121"></td>
                     <td width="55"></td>
                  </tr>
                  <tr>
                     <td nowrap colspan="1" valign="top" width="50">
                        <img src="../images/art_tabend_left.gif" width="50" height="25" />
                     </td>
                     <td nowrap colspan="5" valign="top" width="665" style="background-color: #015881;
                        padding: 0px; margin: 0px;">
                        <span class="txt-headerlink" >
                           <a href="../Default.aspx" id="A2">Home</a><span 
                              class="txt-linkseparateltblue">&nbsp;|&nbsp;</span><a 
                           href="Login.aspx" id="A9">Login</a> 
                        </span>
                     </td>
                     <td nowrap colspan="1" valign="top" width="55">
                        <img src="../images/art_tabend_right.gif" width="35" height="25" />
                     </td>
                  </tr>
               </table>

            </td>
         </tr>
      </table>
      <table id="Table2" border="0" cellpadding="0" cellspacing="0" width="770" 
         align="center" style="background-color:#C0C0C0;">
         <tr>
            <td>&nbsp;</td>
         </tr>
      </table>         
   </form>
</body>
</html>

Open in new window


art-tabeend-left.gif -- image width=50 -- image height=25art-tabeend-right.gif -- image width=30 -- image height=25
IE Gap problem
CSSHTMLWeb Browsers

Avatar of undefined
Last Comment
ZekeLA

8/22/2022 - Mon
TheQuietShadow

I would suggest using a stylesheet for IE and another for everything else. When I did mine, this site helped me out.

http://www.thesitewizard.com/css/excludecss.shtml

It explains how to make IE ignore the stylesheet for firefox and vice versa.
ASKER CERTIFIED SOLUTION
Armand G

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
TheQuietShadow

I agree, Internet Explorer does a very bad job of placing and sizing images, try specifying you image sizes explicitly.
scrathcyboy

At least try some CSS on the Images --

IMG { padding:0px; margin:0px }  --
or just specify padding-top padding-bottom margin-top margin-bottom if you want the left and right to stay
Also, IE places a border space around images (even if you don't see it, it is allowed for).  SO also in CSS
border:0px.  Basically set everything you can to 0 around the images, see if that helps.

If not, try cropping white space in an image editor.  If still no go, consider making the TD a bit higher.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Schells_Web_Design

                    <td nowrap colspan="5" valign="top" width="665" style="background-color: #015881;
                        padding: 0px; margin: 0px;">
                        <span class="txt-headerlink" >
                           <a href="../Default.aspx" id="A2">Home</a><span
                              class="txt-linkseparateltblue">&nbsp;|&nbsp;</span><a
                           href="Login.aspx" id="A9">Login</a>
                        </span>
                     </td>

I find sometimes eliminating spaces in the code helps with IE.  You can replace lines 43-50 above with this:

                     <td nowrap colspan="5" valign="top" width="665" style="background-color: #015881;
                        padding: 0px; margin: 0px;"><span class="txt-headerlink" ><a href="../Default.aspx" id="A2">Home</a><span class="txt-linkseparateltblue">&nbsp;|&nbsp;</span><a
                           href="Login.aspx" id="A9">Login</a></span></td>
ASKER
ZekeLA

I only found armchang's solution to work. Adding the height:100% worked. I'm actually using IE7 so I don't know if the other solutions would work in IE8.

I actually went with a different solution from armchang's I figured out in parallel. I converted the table cells with image elements to cells with background images. I also needed to add a height attribute to the table row for the background images to work. In the future, I'll try armchang's solution first since it's a simpler solution. Thanks.