Solved

Gaps Between table rows

Posted on 2009-06-28
8
644 Views
Last Modified: 2013-11-26
I  am writing a web page but having problems with the table rows. The table should look like a tabbed display, so it has 2 rows. The top row has the buttons and the second row has the inner pane.

My problem is the two rows have a gap between them that I cannot fill. I have tried border collapse but it didn't solve my problem. The top row image height is 33px.
</table>

                <table id="tbl_tab" cellpadding="0" cellspacing="0">

            <tr style="height: 33px;">

                <td style="width: 166px; height: 33px;">

                <img src="images/tab/for_sale.png" />

                </td>

                <td style="width: 16px;">

                <img src="images/tab/for_sale_end.png" />

                </td>

                <td style="width: 166px;;">

                <img src="images/tab/wanted_d.png" />

                </td>

                <td style="width: 31px;">

                <img src="images/tab/wanted_d_end.png" />

                </td>

                <td style="width: 100%;">

                </td>

            </tr>

            <tr>

                <td  colspan="5" style="background-position: top; background-repeat: repeat-x; background-image: url('images/tab/top_back.jpg');">

                &nbsp;</td>

            </tr>

        </table>

Open in new window

0
Comment
Question by:emresamisuzer
  • 4
  • 4
8 Comments
 
LVL 10

Expert Comment

by:Espavo
Comment Utility
The only thing that I can see here that may be causing a space is the &nbsp; in the 2nd row...
(When I need to control row height / width, I often do it with a blank.gif...)

           <tr>

                <td  colspan="5" style="background-position: top; background-repeat: repeat-x; background-image: url('images/tab/top_back.jpg');"><img src="images/blank.gif" height="1" width="0" border="0" alt="blank"></td>

            </tr>

Open in new window

blank.gif
0
 

Author Comment

by:emresamisuzer
Comment Utility
I tried but the result is the same. You may see the screenshot attached.
gap.jpg
0
 
LVL 10

Expert Comment

by:Espavo
Comment Utility
Try removing the "height: 33px" from the <tr> and <td>... so that the row / cell will grow to the size that it needs to...
0
 

Author Comment

by:emresamisuzer
Comment Utility
Sorry, it didn't work. Actually I have put them to fix the size...
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 10

Expert Comment

by:Espavo
Comment Utility
From your "Original" code it seems as though you have a <table> in another <table>...
Could you please drop ALL the HTML here so that I can get a bigger picture of the layout...
(I suspect the problem lies elsewhere on your page...)
0
 

Author Comment

by:emresamisuzer
Comment Utility
Here it is. Also it uses a css file:

body
{
      padding: 0px;
      font-family: 'Trebuchet MS';
      margin: 0px;
      font-size: 12px;
}
img
{
      border-style: none;
      padding: 0px;
      margin: 0px;
}      
#div_main
{
      width: 100%;
}
#tbl_main
{
      width: 100%;
      background-image: url('images/top_back.png');
      background-repeat: repeat-x;
}
#tbl_tab
{
      width: 100%;
}
#td_logo
{
      width: 102px;
      height: 86px;
      padding-left: 5px;
      padding-top: 5px;
}
.btn
{
      width: 48px;
      vertical-align: middle;
      text-align: center;
}
.header1
{
      font-size: 18px;
      color: #ff4a15;
}

* EDIT by modus_in_rebus (2009/08/07) * removed sensitive data
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>-</title>

    <link href="Global.css" rel="stylesheet" type="text/css" />

    <script src="Global.js" type="text/javascript"></script>
 

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div id="div_main">

        <table id="tbl_main" cellpadding="0" cellspacing="0">

            <tr class="btn">

                <td id="td_logo">

                    <img src="images/logo.png" alt="Company Logo" />

                </td>

                <td style="text-align: right; float: right;" align="right">

                    <table>

                        <tr>

                            <td class="btn">

                                <asp:ImageButton ID="btn_homepage" runat="server" ImageUrl="images/menubtn/btn_homepage.png"

                                    onmouseover="btn_mo('btn_homepage',true);" 

                                    onmouseout="btn_mo('btn_homepage',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_search" runat="server" ImageUrl="images/menubtn/btn_search.png"

                                    onmouseover="btn_mo('btn_search',true);" 

                                    onmouseout="btn_mo('btn_search',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_add" runat="server" ImageUrl="images/menubtn/btn_add.png"

                                    onmouseover="btn_mo('btn_add',true);" 

                                    onmouseout="btn_mo('btn_add',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_mymachines" runat="server" ImageUrl="images/menubtn/btn_mymachines.png"

                                    onmouseover="btn_mo('btn_mymachines',true);" 

                                    onmouseout="btn_mo('btn_mymachines',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_preferences" runat="server" ImageUrl="images/menubtn/btn_preferences.png"

                                    onmouseover="btn_mo('btn_preferences',true);" 

                                    onmouseout="btn_mo('btn_preferences',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_join" runat="server" ImageUrl="images/menubtn/btn_join.png"

                                    onmouseover="btn_mo('btn_join',true);" 

                                    onmouseout="btn_mo('btn_join',false);" CausesValidation="False" />

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

        <table id="tbl_tab" cellpadding="0" cellspacing="0">

            <tr>

                <td style="width: 166px;">

                    <img id="tb1" src="images/tab/for_sale.png" alt="For Sale" style="cursor: pointer" onclick="forsale();" />

                </td>

                <td style="width: 16px;">

                    <img id="tb2" src="images/tab/for_sale_end.png" />

                </td>

                <td style="width: 166px;">

                    <img id="tb3" src="images/tab/wanted_d.png" alt="Wanted" style="cursor: pointer" onclick="wanted();" />

                </td>

                <td style="width: 31px;">

                    <img id="tb4" src="images/tab/wanted_d_end.png" />

                </td>

                <td style="width: 100%;">

                </td>

            </tr>

            <tr>

                <td colspan="5" style="background-position: top; background-repeat: repeat-x; background-image: url('images/tab/top_back.jpg');">

                </td>

            </tr>

            <tr>

                <td colspan="5">

                <div id="div_forsale" style="width: 100%">1</div>

                <div id="div_wanted" style="display: none;">2</div>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

Open in new window

0
 
LVL 10

Accepted Solution

by:
Espavo earned 500 total points
Comment Utility
Please try this:
  1. There seemed to be some "white space" in the <td>'s that was causing the gap...
     
     and
     
  2. I've pulled the images into a table on their own, so that you don't have to worry about the 5th <td> being 100% wide (which it obviously can't be)
Gayo


* EDIT by modus_in_rebus (2009/08/07) * removed sensitive data
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>-</title>

    <link href="Global.css" rel="stylesheet" type="text/css" />

    <script src="Global.js" type="text/javascript"></script>

 

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div id="div_main">

        <table id="tbl_main" cellpadding="0" cellspacing="0">

            <tr class="btn">

                <td id="td_logo">

                    <img src="images/logo.png" alt="Company Logo" />

                </td>

                <td style="text-align: right; float: right;" align="right">

                    <table>

                        <tr>

                            <td class="btn">

                                <asp:ImageButton ID="btn_homepage" runat="server" ImageUrl="images/menubtn/btn_homepage.png"

                                    onmouseover="btn_mo('btn_homepage',true);" 

                                    onmouseout="btn_mo('btn_homepage',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_search" runat="server" ImageUrl="images/menubtn/btn_search.png"

                                    onmouseover="btn_mo('btn_search',true);" 

                                    onmouseout="btn_mo('btn_search',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_add" runat="server" ImageUrl="images/menubtn/btn_add.png"

                                    onmouseover="btn_mo('btn_add',true);" 

                                    onmouseout="btn_mo('btn_add',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_mymachines" runat="server" ImageUrl="images/menubtn/btn_mymachines.png"

                                    onmouseover="btn_mo('btn_mymachines',true);" 

                                    onmouseout="btn_mo('btn_mymachines',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_preferences" runat="server" ImageUrl="images/menubtn/btn_preferences.png"

                                    onmouseover="btn_mo('btn_preferences',true);" 

                                    onmouseout="btn_mo('btn_preferences',false);" CausesValidation="False" />

                            </td>

                            <td class="btn">

                                <asp:ImageButton ID="btn_join" runat="server" ImageUrl="images/menubtn/btn_join.png"

                                    onmouseover="btn_mo('btn_join',true);" 

                                    onmouseout="btn_mo('btn_join',false);" CausesValidation="False" />

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

        <table id="tbl_tab" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">

            <tr>

              <td align="left">

               <table id="tbl_tab1" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">

                    <tr>

		                <td style="width: 166px;"><img id="tb1" src="images/tab/for_sale.png" alt="For Sale" style="cursor: pointer" onclick="forsale();" /></td>

		                <td style="width: 16px;"><img id="tb2" src="images/tab/for_sale_end.png" /></td>

		                <td style="width: 166px;"><img id="tb3" src="images/tab/wanted_d.png" alt="Wanted" style="cursor: pointer" onclick="wanted();" /></td>

		                <td style="width: 31px;"><img id="tb4" src="images/tab/wanted_d_end.png" /></td>

                    </tr>

                </table>

              </td>

            </tr>

            <tr>

                <td style="background-position: top; background-repeat: repeat-x; background-image: url('images/tab/top_back.jpg');">

                </td>

            </tr>

            <tr>

                <td>

                <div id="div_forsale" style="width: 100%">1</div>

                <div id="div_wanted" style="display: none;">2</div>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

Open in new window

0
 

Author Closing Comment

by:emresamisuzer
Comment Utility
Perfect! Thanks a lot, actually I didn't understand what you have changed but it worked flawless.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now