We help IT Professionals succeed at work.

Space between rows in simple HTML table showing up in FireFox

cubfan2372
cubfan2372 asked
on
4,396 Views
Last Modified: 2013-12-07
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

Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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?

Author

Commented:
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.

Author

Commented:
Heh...well, it appears that I can't enter a < b r > normally or EE will start a new line for me.  :)
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.

Author

Commented:
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.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.