Wierd spacing at the bottom of images

[redelite]

Hey guys. I just recently completed my portfolio/services layout and I have an awkward problem that only seems to be happening in Firefox.

If you look under the "Recent Work" section you will see 3 images. Wrapped around these images are anchor tags (hence why the border is there). But if you look closely you can see a ~4 pixel spacing between the bottom of the image and the anchor tag border.

Anyone know why this would be occurring? :hang:

http://www.perfecdev.com/test_grid/

Thanks ahead! :beer:

[mpelland]

not too sure where it is coming from, but if you set the height of the sample div to 148 it fixes it. right now it is reading at 153px

[redelite]

Well yeah, I could do that but I shouldn't have to. If I did, it would have to be 150px, because the images inside the "sample" anchors are 146px tall and the anchors have 2px of border all the way around.

I'm just trying to figure out why this is happening only in Firefox.

[bigmtnskier]

It has to do with the browser handling line heights nastily... give this a shot:

.recent_container .sample { line-height: 0%; }

By the way, I totally love your IE-specific stylesheet! :genius:

[redelite]

Nice man! That's a pretty ugly bug.

:lol: ..and thanks, that always makes me fuzzy inside when that sheet is empty. :D

Cheers man! :beer:

[sidhu]

Check line height 1.5 or 2.5 somting make it 0


Hey guys. I just recently completed my portfolio/services layout and I have an awkward problem that only seems to be happening in Firefox.

If you look under the "Recent Work" section you will see 3 images. Wrapped around these images are anchor tags (hence why the border is there). But if you look closely you can see a ~4 pixel spacing between the bottom of the image and the anchor tag border.

Anyone know why this would be occurring? :hang:

http://www.perfecdev.com/test_grid/

Thanks ahead! :beer:

[bigmtnskier]

Hey sidhu, reading the rest of the thread before responding might be a good idea sometimes :P

[simplistik]

I usually use the container > image solution similar to what is posted above. But another solution and more graceful is:


img { vertical-align: bottom; }