Strange gaps in FF (IE works fine)

[Donny Bahama]

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!!!!

[Lchad]

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.

[Donny Bahama]

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.)

[Lchad]

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.

[Lchad]

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.

[spinal007]

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; }

[spinal007]

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

[Donny Bahama]

Originally Posted by spinal007

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

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

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.

[Donny Bahama]

Originally Posted by Lchad

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.

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

[Donny Bahama]

Originally Posted by Lchad

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.

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.

[Donny Bahama]

Originally Posted by spinal007

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; }

Tried it. Didn't fix it.

[Donny Bahama]

Originally Posted by Lchad

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.

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.

[Lchad]

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

[Donny Bahama]

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

Thanks, Linda!

[Donny Bahama]

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;
}

[spinal007]

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

[Donny Bahama]

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

[Lchad]

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!!

[spinal007]

Hey, nice one... Now it works and downgrades beautifully!
Rule of thumb: If you want to use an image for presentation purposes, always make it the background of an element.