Is there any way to get rid of the excess space I am seeing in table cells?

Discussion in 'HTML' started by Joshua Beall, Oct 30, 2003.

  1. Joshua Beall

    Joshua Beall Guest

    Hi All,

    Here is my problem: I have a table as a navigation bar, and while everything
    looks quite fine in Mozilla 1.3, in IE6 I have some extra space in between
    each element.

    My menu it configured something like this:

    <table cellpadding="0" cellspacing="0">
    <tr><td><a href="/index.php">Homepage</a></td></tr>
    <tr><td><img src="menu_separator.png"/></td></tr>
    <tr><td><a href="/otherPage.php">Other Page</a></td></tr>
    </table>

    Thus, each entry is supposed to have the menu_separator image between it,
    with an equal amount of space above and below the line. However, in IE6,
    the image is offset towards the bottom of the cell, even when
    valign="middle" or even "top"

    Here is an example page. BTW, I apologize for the appearance of the HTML -
    it was originally generated piecemeal from a PHP script.

    http://www.joshuabeall.com/pages/sample.htm

    Here is a screenshot of what it looks like in Mozilla, and how I want it to
    appear: http://joshuabeall.com/media/images/mozillamenu.png

    Can anyone help?

    Sincerely,
    -Josh
    Joshua Beall, Oct 30, 2003
    #1
    1. Advertising

  2. Leif K-Brooks, Oct 30, 2003
    #2
    1. Advertising

  3. Joshua Beall

    Richard Guest

    Joshua Beall wrote:

    > Hi All,


    > Here is my problem: I have a table as a navigation bar, and while
    > everything
    > looks quite fine in Mozilla 1.3, in IE6 I have some extra space in
    > between
    > each element.


    > My menu it configured something like this:


    > <table cellpadding="0" cellspacing="0">
    > <tr><td><a href="/index.php">Homepage</a></td></tr>
    > <tr><td><img src="menu_separator.png"/></td></tr>
    > <tr><td><a href="/otherPage.php">Other Page</a></td></tr>
    > </table>


    > Thus, each entry is supposed to have the menu_separator image between
    > it,
    > with an equal amount of space above and below the line. However, in
    > IE6,
    > the image is offset towards the bottom of the cell, even when
    > valign="middle" or even "top"


    > Here is an example page. BTW, I apologize for the appearance of the
    > HTML -
    > it was originally generated piecemeal from a PHP script.


    > http://www.joshuabeall.com/pages/sample.htm


    > Here is a screenshot of what it looks like in Mozilla, and how I want
    > it to
    > appear: http://joshuabeall.com/media/images/mozillamenu.png


    > Can anyone help?


    > Sincerely,
    > -Josh



    div.menulist{ position:absolute; width:100px; height:40px; line-height:30px;
    }
    add in other goodies as desired.

    <div class="menulist" style="left:20px; top:20px;">item 1</div>
    <div class="menulist" style="left:20px; top:60px;">item 2</div>
    <div class="menulist" style="left:20px; top:100px;">item 3</div>

    Add the dividing line if desired appropriately. To get the desired border
    effect, create another div as a container for all of the actual menu items
    then give it a "border:dashed grey" attribute.
    If you do that, the "left" attribute should be 0 or it will move the inner
    div over by 20 px as shown above.
    Just an idea.
    Richard, Oct 30, 2003
    #3
  4. Joshua Beall

    Steve Pugh Guest

    "Joshua Beall" <> wrote:

    >Here is my problem: I have a table as a navigation bar, and while everything
    >looks quite fine in Mozilla 1.3, in IE6 I have some extra space in between
    >each element.
    >
    >My menu it configured something like this:
    >
    ><table cellpadding="0" cellspacing="0">
    > <tr><td><a href="/index.php">Homepage</a></td></tr>
    > <tr><td><img src="menu_separator.png"/></td></tr>
    > <tr><td><a href="/otherPage.php">Other Page</a></td></tr>
    ></table>


    No it's not.

    Your menu is actually composed of code like this:

    <tr><td valign="middle" align="center">
    Home and<br/>Latest News
    </tr></td>
    <tr><td valign="middle" align="center">
    <img src="/media/images/layout/menu_separator.png"
    height="1" width="80"/>
    </tr></td>

    First, notice the incorrect nesting? You have the </tr> before the
    </td>

    Secondly, why are you using XHTML syntax in an HTML document?

    Thirdly, the extra space is caused by the extra space. Close up the
    gaps between the tags so that it does resemble the snippet you posted.
    That will remove the extra space.

    >Here is an example page. BTW, I apologize for the appearance of the HTML -
    >it was originally generated piecemeal from a PHP script.
    >
    >http://www.joshuabeall.com/pages/sample.htm


    If the PHP script is generating broken code then fix the PHP script.

    However, this looks like a list to me. So use list markup and
    appropriate CSS. For example:

    ..menu {
    border-width: medium;
    border-style: dotted;
    border-color: #E0E0E0;
    padding-left: 0;
    margin-left: 0;
    list-style-type: none;
    }
    ..menu li {
    margin: 0 5px;
    padding: 5px 0;
    background-image:
    url(/media/images/layout/menu_separator.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    text-align: center;
    }
    ..menu li.last {
    background-image: none;
    }

    <ul class="menu" >
    <li>Home and Latest News</li>
    <li>Blog</li>
    <li>Essays</li>
    <li>Pictures</li>
    <li>Downloads</li>
    <li class="last">Guestbook</li>
    </ul>



    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Oct 30, 2003
    #4
  5. Joshua Beall

    informant Guest

    Re: Is there any way to get rid of the BULLIS giving bad advice?

    "Richard" <anom@anom> wrote in message news:...
    > Joshua Beall wrote:
    >
    > > Hi All,

    >
    > > Here is my problem: I have a table as a navigation bar, and while
    > > everything
    > > looks quite fine in Mozilla 1.3, in IE6 I have some extra space in
    > > between
    > > each element.

    >
    > > My menu it configured something like this:

    >
    > > <table cellpadding="0" cellspacing="0">
    > > <tr><td><a href="/index.php">Homepage</a></td></tr>
    > > <tr><td><img src="menu_separator.png"/></td></tr>
    > > <tr><td><a href="/otherPage.php">Other Page</a></td></tr>
    > > </table>

    >
    > > Thus, each entry is supposed to have the menu_separator image between
    > > it,
    > > with an equal amount of space above and below the line. However, in
    > > IE6,
    > > the image is offset towards the bottom of the cell, even when
    > > valign="middle" or even "top"

    >
    > > Here is an example page. BTW, I apologize for the appearance of the
    > > HTML -
    > > it was originally generated piecemeal from a PHP script.

    >
    > > http://www.joshuabeall.com/pages/sample.htm

    >
    > > Here is a screenshot of what it looks like in Mozilla, and how I want
    > > it to
    > > appear: http://joshuabeall.com/media/images/mozillamenu.png

    >
    > > Can anyone help?

    >
    > > Sincerely,
    > > -Josh

    >
    >
    > div.menulist{ position:absolute; width:100px; <SLAP>


    What websites do *you* have to show for your expertise, Bullis?

    > Just an idea.


    --
    Photos of Bullis
    http://www.lart.com/stupidrichard/
    http://convict.iwarp.com/bullis-single.jpg
    Richard Bullis FAQ 5.0
    http://www.lart.com/rtsfaq/


    Path:
    sn-us!sn-xit-04!sn-xit-01!sn-xit-08!supernews.com!pln-w!spln!dex!extra.newsg
    uy.com!newsp.newsguy.com!enews1
    From: "Richard" <anom@anom>
    Newsgroups: alt.html
    Subject: Re: Is there any way to get rid of the excess space I am seeing in
    table cells?
    Date: Thu, 30 Oct 2003 00:00:08 -0600
    Organization: http://extra.newsguy.com
    Lines: 57
    Message-ID: <>
    References: <dJ_nb.5659$>
    NNTP-Posting-Host: p-393.newsdawg.com
    X-Priority: 3
    X-MSMail-Priority: Normal
    X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
    X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
    X-No-Archive: yes
    FL-Build: Fidolook 2002 (SL) 6.0.2600.78 - 24/10/2002 21:18:29
    Xref: sn-us alt.html:436164
    informant, Oct 30, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Y2xpY2tvbg==?=

    Removing excess white space

    =?Utf-8?B?Y2xpY2tvbg==?=, Apr 6, 2006, in forum: ASP .Net
    Replies:
    5
    Views:
    17,791
    visserj
    Feb 3, 2011
  2. Eric Lilja
    Replies:
    6
    Views:
    320
    David Hilsee
    Mar 13, 2005
  3. Howard
    Replies:
    26
    Views:
    709
    Bushido Hacks
    Apr 29, 2005
  4. Getting rid of excess #includes

    , Sep 29, 2005, in forum: C Programming
    Replies:
    1
    Views:
    269
    Jack Klein
    Sep 30, 2005
  5. F.F.
    Replies:
    3
    Views:
    318
    Tim Rentsch
    Sep 22, 2013
Loading...

Share This Page