| Subject: |
Images in a table in FireFox/Safari with gap at bottom |
| Updated: |
Apr-5-2005 |
| Rating: |
Not Rated |
| By: |
Rocky Moore - Member #: 1 |
| Location: |
Klamath Falls, Oregon USA |
| Website: |
www.RockyMoore.com |
| Category: |
Computers > Programming > General Web Development |
I ran into a problem with FireFox where it would not display images properly in a table. The image would float to the top of a cell and always have several pixels add to the botom regardless of the cell height specified.
After a bit of digging, I found this was a problem when I used a "strict" document type and not when in "transitional". I still wanted to use "strict" (even though the actual content did was not 100% strict compliant) as it forced Internet Explorer to handle some other issues of compatibility I had, so that was not an option.
After yet even more research, I found that it appears FireFox and Safari both default image vertical alignment to "baseline" in "strict" mode. By simply setting:
img
{
vertical-align: top;
}
This solved the problem for my site.
[Submit DIGG for this tip]
-----------
Note: Use the tips posted on this site at your own risk.
The tips are posted by the public and as such may or may not be valid.