take a look at this:
http://www.blairdee.info/vcard/index.html#
if you look at the colored boxes at the bottom ov the navigation on the left side you will see that when you roll over one of them a black border appears. the problem is that there appears to be a few pixels of padding below each image and the bottom border - i cant seem to figure out why. can someone please help?
It’s just the space left under images, you can get rid of it by setting vertical-align:bottom; or one of hte other fixes shown here
Ryan, i noticed you haven’t got a fix for opera. Ever tried to setting the line-height to 0 on the parent element?
You can get rid of the problem as well by putting the border on the -
The selector was empty when I took a look at your page. You can make the border any color that you prefer.
#nav li #colors img {
border:1px solid #ffffff; }
If you are referring to the font-size:0; trick (which I did a horrible example up there) no I haven’t even dabbled in it. I think the float/display/vertical-align are more then enough options. I never felt a need to delve further.
I just came across the font-size trick a while back and thought to include it just to be thourough.
I came upon the line-heigth trick that should work but never tested it. Supposedly it works for Opera.
Yes it does work :). However this way isn’t really suitable because there will most likely be text…but there are some cases where there isn’t.
I personaly will stick with the other 3 cases because it only involves 1 property and not 2
It all depends on the situation: setting the display property to block for instance may cause problems of it own as each block element wants a line all to itself.
Floating on the other hand:the text aligns to the top of the float element. If this is what you want, you’re all set. If not, the inline vertical-align is needed. Second, you will likely want the floated image to be contained by its parent. In this case, you’ll need to set the parent to {overflow: hidden;}.
So, enough choices to pick, depending the situation 
Yes I know :). THat’s why I never felt the need to dabble with an Opera fix for the font-size chocie.
I’m not sure i follow you: the font-size is a way to make it work but doesn’t work for Opera. The line height is a way to make it work and works also for Opera. That was the point i was trying to get across
I understand. But my point is, there are so many different fixes to choose from, why try and find a workaround for the font-size trick in Opera? 2 properties using that way, 1 property using 1 of the other 3 ways.
Didn’t seem worth it :).
Well i really must be slow today… i still don’t get it: font-size works across browsers minus opera. Line-height works across browsers included opera (although i haven’t tested). So i’m not understanding the 2 properties instead of 1. Unlees line-height indeed is just for Opera (gonna test it later tonight).
ThaT’s my point.
vertical-align:bottom . 1 property and BOOM. All browsers kill the space.
font-size:0;…not the best because what if we have text? Also Opera doesn’t work with it. So we need to find another fix…line-height:0;! 2 properties instead of one.
I don’t see the need for 2 properties wehn either vertical-align/float/display can kill the space, and at least 1 can fufill your requrements of what you need