Strange gaps in FF (IE works fine)

I'm using tables with CSS to set background images to create a neon frame around individual posts to a message board. In IE, everything looks great, but in FF, I get a very small gap between the top element/image and the two side elements/images. (See the first attachment - the gaps are circled in blue.) Even stranger, this only happens with the top element - not the bottom.

There's a sample page here: http://dhs57.stickpuppy.com/emedley_msgdisplay.php

I've double/triple/googtuple checked the various aspects of this code. The image height is set properly, cellpadding/spacing are set correctly in the table, etc. When I look at it in Firebug, it looks like the top row somehow has a couple of extra pixels of bottom padding, but I don't see anything in my code that would cause that. I have to assume it's a FF bug (unless someone can spot something in my code that I have missed.)

I don't really care what's causing it - I just need to FIX it! I've tried various positioning tricks with negative padding/margins/etc. Nothing seems to work. HELP!!!!

Attached Images

	wtf.jpg (70.7 KB, 19 views)
	padding_added2tr.jpg (55.6 KB, 15 views)

Donny in that second screenshot in the top right hand column I see 0pt when I know you meant 0px. See if that clears up your spacing.

Thanks for the response, Linda.

Nope. Doesn't change a thing. I think "0 pt" is a valid setting and has the same effect as "0 px" but I didn't do that - Firebug did. (It does that. Sticks "0 pt" anywhere that you omit a value and allow the default to be used.)

Well I'm shooting int he dark here because I don't have your graphics and can't see what the design is really doing.

Code: Select all

<td rowspan="4" class="em-neonside"><img src="img/neonframe-pink-side.gif" height="1" width="18"></td>
            <td colspan="2"><p class="em-posttime">On Thursday, April 29, 2007 at 8:18 PM</p>
            <td rowspan="4" class="em-neonside"><img src="img/neonframe-pink-side.gif" height="1" width="18"></td>

Try deleting from this code the portion that say height="1" in the two places.
See if that isn't putting in a space of some sort.

Let me know I'm around awhile and can place somemore.

Also try this

Code: Select all

<td height="18" colspan="4"><img class="em-frametop" src="img/neonframe-pink-top.gif" height="18" width="472"></td>

add the part in red. It maybe a situation where the cellrow does not have a specified height.

Try the following (if you haven't yet):
table, tr, td, img - line-height, padding, margin

ie.: table, tr, td, img{ line-height:1.0em; padding:0; margin:0; }

and what's up with this????
font-size:100.01%;

From http://www.communitymx.com/content/a...F76&print=true

There's a link to the page in my first post.

The part in red was already there. The image height is actually 20, so I fixed that, but it didn't change anything. Then I saw that you had added a height setting to <td> so I added that. (Added it to the preceding <tr> for good measure, too.) None of that helps.

Tried it. Didn't fix it.

That is the actual image height. Those images are used (in the css) as background images with a repeat-y so that they stretch vertically to fill the side cells. After I read what you wrote, it occurred to me that displaying the images in the cells like that was superfluous since I was already using them as the bg images in the css. So I removed those two img tags entirely.

Didn't fix the problem.

Donny why do you always have the hard ones???
I'll have another look tomorrow if no one else comes through for ya!

I dunno. I guess I somehow manage to figure out the easy ones on my own!

Thanks, Linda!

Well, I'm still convinced it's an FF bug (and not something in my code), but I have figured out this spiffy workaround...

Code: Select all

.em-frametop {
    margin-bottom:-2px;
}

Found a solution, instead of a cell with an image, (which you shouldn't be doing anyway), set the image as the background for the cell. Then I'm sure your problems with go away...

You're right! That's a much more elegant solution - and it works without a workaround. Many thanks, Diego!

OH my gosh, I can't believe I didn't think of that. That is how I did tables for years!!! I think since I started handcoding I'm already getting rusty in tables!!