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

[Joshua Beall]

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

 

[Leif K-Brooks]

I have a table as a navigation bar

Don't do that. http://allmyfaqs.com/faq.pl?Tableless_layouts

 

[Richard]

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.

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.

 

[Steve Pugh]

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>

 

[informant]

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: <[email protected]>
References: <[email protected]>
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