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.
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>
Web BrowsersHTML
Last Comment
scrathcyboy
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
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.
ASKER
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.
When I add it to all of them, it actually displays like I entered a "
" between each of them.
ASKER
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.
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.
ASKER
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!!
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.
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?