Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of ZekeLA
ZekeLAFlag for United States of America asked on
CSSHTMLWeb Browsers
6 Comments1 Solution733 ViewsLast Modified:
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>

art-tabeend-left.gif -- image width=50 -- image height=25art-tabeend-right.gif -- image width=30 -- image height=25
IE Gap problem
ASKER CERTIFIED SOLUTION
Avatar of Armand G
Armand GFlag of New Zealand imageSenior Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 6 Comments.
See Answers