Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Gaps Between table rows

Posted on 2009-06-28
8
Medium Priority
?
664 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
[X]
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
  • 4
  • 4
8 Comments
 
LVL 10

Expert Comment

by:Espavo
ID: 24730422
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
ID: 24730444
I tried but the result is the same. You may see the screenshot attached.
gap.jpg
0
 
LVL 10

Expert Comment

by:Espavo
ID: 24730720
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
Veeam Task Manager for Hyper-V

Task Manager for Hyper-V provides critical information that allows you to monitor Hyper-V performance by displaying real-time views of CPU and memory at the individual VM-level, so you can quickly identify which VMs are using host resources.

 

Author Comment

by:emresamisuzer
ID: 24731061
Sorry, it didn't work. Actually I have put them to fix the size...
0
 
LVL 10

Expert Comment

by:Espavo
ID: 24731644
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
ID: 24732384
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 2000 total points
ID: 24733775
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
ID: 31597653
Perfect! Thanks a lot, actually I didn't understand what you have changed but it worked flawless.
0

Featured Post

Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

688 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