Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2010-11-16
6
655 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:ZekeLA
6 Comments
 
LVL 6

Expert Comment

by:TheQuietShadow
ID: 34147727
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.
0
 
LVL 7

Accepted Solution

by:
armchang earned 500 total points
ID: 34147901
Hi,

Somehow, images are not very well formed in IE that's why you need to put in a little bit of CSS height/width sizing into the <img> tags. Below is the new source where it reforms your display correctly in IE:

(Replace line 39-54 in your code above with this)

<tr>
<td nowrap colspan="1" valign="top" width="50">
<img src="../images/art_tabend_left.gif" width="50" height="25" style="height:100%;">
</td>
<td nowrap colspan="5" valign="top" width="665" style="background-color: #015881;
padding: 0px; margin: 0px; height:100%; border-spacing:0px;">
<span class="txt-headerlink" style="height:10px;">
   <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" style="height:100%;">
</td>
</tr>

Open in new window

0
 
LVL 6

Expert Comment

by:TheQuietShadow
ID: 34147995
I agree, Internet Explorer does a very bad job of placing and sizing images, try specifying you image sizes explicitly.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34150057
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.
0
 
LVL 2

Expert Comment

by:Schells_Web_Design
ID: 34151411
                    <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>
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 34156624
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.
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question