Question

I’ve been struggling with this issue for a few hours. I have a table row which has three anchors wrapped around images as buttons. In most browsers its okay but in Firefox and IE there is a gap between the table row with the ‘A’ tags and the next table row down. In Firefox this seems to be caused by the anchors because when I take the anchors out the problem disappears. In IE the issue appears to be different and I have not isolated it any further yet. At this stage I would be very grateful if someone has a clue about how to solve it in Firefox. Here is the code section for the table rows affected:

<tr class="topcontrols" height="55">
    <td class="topcontrols"  style="width:13px;" height="55" width="13">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/lt_frame_corner.gif" width="13" height="55" hspace="0" vspace="0" border="0"/>
    </td>
    <td style="width:56px;" height="55" width="56" class="frametop">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="56" height="55" hspace="0" vspace="0"  border="0"/>
    </td>
    <td class="topcontrols"  style="width:160px;" width="160" height="55">
        <a class="topcontrols"  class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal">
            <?php if($this->countModules('novazeal-home')) { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_active.gif" width="160" height="55" border="0" />
            <?php } else { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_home_inactive.gif" width="160" height="55" border="0"  />
            <?php } ?>
        </a>
    </td>
    <td class="servicestab" height="55" width="163">
        <div class="servicesdropmenu"></div>
        <a class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal/services">
            <?php if($this->countModules('novazeal-services')) { ?>
                <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_active.gif" width="163" height="55" border="0"  />
            <?php } else { ?>
                <img class="servicestab" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_services_inactive.gif" width="163" height="55" border="0"  />
            <?php } ?>
        </a>
    </td>
    <td class="topcontrols"  style="width:161px;" height="55" width="161">
        <a class="topcontrols"  href="<?php echo $this->baseurl ?>/index.php/novazeal/contact">
            <?php if($this->countModules('novazeal-contact')) { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_active.gif" width="161" height="55" border="0" />
            <?php } else { ?>
                <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/button_contact_inactive.gif" width="161" height="55" border="0" />
            <?php } ?>
        </a>
     </td>
    <td class="frametop"  style="width:256px;" height="55" width="256">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/frame_top.gif" width="256" height="55" border="0" style="width:256px"/>
    </td>
    <td class="topcontrols"  style="width:14px;" height="55" width="14">
        <img class="topcontrols"  src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/rt_frame_corner.gif" width="14" height="55" border="0" />
    </td>
</tr>
<tr style="height:100%;">
    <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/left_frame_edge.gif);">
    </td>
    <td colspan="5" BGCOLOR="#ffffee" class="contentarea">
        <jdoc:include type="component" />
    </td>
  <td class="frameedges" bgcolor="#131243" style="background-image: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/right_frame_edge.gif);">
  </td>
</tr>

and here is the CSS for the used in these rows:

.contentarea {
    background-color: #ffffff;
    min-height:100%; 
    height:100%; 
    overflow:hidden;
    position:relative; 
    vertical-align: top;
}

.frametop {
    background:url(../images/frame_top.gif);
    max-height:55px; 
    height:55px; 
    overflow:hidden;

}

.topcontrols {
    position: relative;
    max-height:55px; 
    height:55px; 
    overflow:hidden;
}

.servicestab {
    position: relative;
    max-height:55px; 
    height:55px; 
    overflow:hidden;
    width:163px;

}

.servicesdropmenu {
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color:rgba(100,100,255,0.0); 
    height:14px; 
    width:158px; 
    position:absolute; 
    z-index: 100;
    top:38px; 
    left:3px;
}

.servicestab:hover .servicesdropmenu {
    height:100px;
    background-color:rgba(100,100,255,0.92);
}

Thanks in advance for any thoughts that may lead to a solution.

Terry Rozmus.

Answer 1

Using tables for layout is a bad practice. Try using div’s with css instead.
It is way better and once you get the hang of it easier and way more configurable.

1. Tables are usually more bytes of markup. (Longer to download, and
   more bytes of traffic for the host.)
2. Tables usually prevent incremental rendering. (Takes longer for the
   user to see anything on the page.)
3. Tables may require you to chop single, logical images into multiple
   ones. (This makes redesigns total hell, and also increases page load
   time [more http requests and more total bytes].)
4. Tables break text copying on some browsers.(That’s annoying to the user.)
5. Tables prevent certain layouts from working within them (like
   height:100% for child elements of ). (They limit what you can
   actually do in terms of layout.)
6. Once you know CSS, table-based layouts usually take more time to
   implement. (A little effort up-front learning CSS pays off heavily
   in the end.)
7. Tables are semantically incorrect markup for layout. (They describe
   the presentation, not the content.)
8. Tables make life hell for those using screen readers. (Not only do
   you get the other benefits of CSS, you’re also helping out the
   blind/partially-sighted. This is a Good Thing.)
9. Tables lock you into the current design and make redesigns MUCH
   harder than semantic HTML+CSS