Avatar of cubfan2372
 asked on

Space between rows in simple HTML table showing up in FireFox

I have done a bunch of research on this and it appears that the problem of seeing a space between rows in a table is common in FireFox.  I had 3 spaces appearing at one time and was able to successfully fix two of them with the style="display:block;" style, but I can't get the last one fixed.

I have three rows with images in them.  The first row has one image that is 800 pixels wide (as wide as the table it's in).  The third row also has one image that is 800 pixels wide.  Those two were easy to fix.  The second row, however, has 10 images side by side in it that make up 800 pixels all together.  I tried to put the display:block style in all 10 images, but it went crazy on me and threw everything out of whack.
I also tried to insert a <br> in between the second and third line within the same cell to see if that helped and it still wouldn't work.  That's where it boggled my beginner brain.

The code is simple and is attached below.  
<tr><td width="800" valign="top" colspan="3"><map name="FPMap1"><area href="index.asp" shape="polygon" coords="36, 10, 4, 61, 28, 97, 25, 123, 18, 148, 24, 178, 44, 206, 83, 219, 122, 214, 151, 224, 161, 207, 221, 180, 241, 149, 238, 112, 222, 86, 206, 64, 206, 34, 212, 14, 188, 0, 96, 1, 74, 13, 54, 13"></map><img border="0" src="site_proof66_01_top.jpg" width="800" height="229" usemap="#FPMap1" style="display:block;"></td></tr>
<tr><td height="24" colspan="3"><a href="index.asp?link=about"><img border="0" src="header_bottom_about.jpg" width="104" height="24"></a><a href="index.asp?link=contact"><img border="0" src="header_bottom_contact.jpg" width="103" height="24"></a><a href="display.asp?t=whiskey" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, whiskey, '150px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_whiskey.jpg" width="86" height="24"></a><a href="display.asp?t=rum" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, rum, '120px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_rum.jpg" width="52" height="24"></a><a href="display.asp?t=teq" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, tequila, '140px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_tequila.jpg" width="77" height="24"></a><a href="display.asp?t=vod" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, vodka, '120px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_vodka.jpg" width="68" height="24"></a><a href="display.asp?t=liq" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, liqueur, '130px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_liqueur.jpg" width="83" height="24"></a><a href="display.asp?t=gin" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, gin, '120px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_gin.jpg" width="45" height="24"></a><a href="display.asp?t=exo" onMouseover="return clickreturnvalue(),dropdownmenu(this, event, exotics, '120px')" onMouseout="delayhidemenu()"><img border="0" src="header_bottom_exotics.jpg" width="72" height="24"></a><a href=""><img border="0" src="header_bottom_red.jpg" width="110" height="24" /></a><!-- end menu link code --><br><img border="0" src="header_abs_bottom.jpg" width="800" height="20" style="display:block;"></td></tr>

Open in new window

Web BrowsersHTML

Avatar of undefined
Last Comment

8/22/2022 - Mon

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.

Just tried it, but still have the horizontal space in FF.  From what I can understand, FF leaves a little room at the bottom of each cell/row in the table for "g" or "y" or any character that is displayed under the normal "bottom".  I'm guessing that's why "display:block;" works on my two images that are the width of the table.  But, why wouldn't "display:block;" work on the row with multiple images that make up the width of the table?  When I add it to all of them, it actually displays like I entered a
 between each of them.

Is there something I can do to add code to detect if the user is viewing the page using FF and set that particular portion of the page up differently?

The last sentence in the first paragraph should be...
When I add it to all of them, it actually displays like I entered a "
" between each of them.


Heh...well, it appears that I can't enter a < b r > normally or EE will start a new line for me.  :)
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes

Yes this new input box has serious problems that are hard for me to handle.

Are you sure you don't have a FORM involved in the table, or a DIV or something else?  Setting the body and table to all zero's as shown above should remove ALL spaces completely.  If other elements, CSS style them for no margins too, especially forms.

If this is FF3 only, then it is likely a bug.  All browsers should respect the ability to set all form elements to absolutely zero padding, spacing and margins.  If not, it is a FLAW in the browser, because some page layouts cannot work unless you can do this.

There is DIV tag in there, but I fixed it by turning my 10 multiple images into an image map and setting up the hover drop downs from there.  It's working without the space now.

However, I have a similar problem without images on a different page and your suggestions fixed that problem, so thank you very much for your assistance!!

glad to help.  Remember to do this for DIVs, Images, Forms and Tables, especially to reign in IE's built in obsession with padding all these elements, which is completely uncalled for.
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.