Images adding unwanted spacing to the bottom of a line

[Geoff Hague]

(posted to both alt.html and c.i.w.a.s. as I'm not sure what, exactly, is at
fault here)

I'm doing a site re-design:
http://www.captainsoftheworld.com/cotw/index.html
http://www.captainsoftheworld.com/cotw/cotw.css
(the original version can be found at the root of this domain, though I
don't suppose that matters much).

My question involves the little star-rating graphics in the Movie Reviews
box on the right-hand side. You'll notice that the presence of these images
add a pixel or two of extra spacing to the bottom of each line that they're
on (notice how all other listings in the right-hand boxes, without the
star-rating images, do not have this extra height).

Any ideas how I can fix that? I'm certain it's not got anything to do with
the height of the images themselves, and I've also been unable to fix is by
zero-ing the padding or magins of the images.

Thanks!
~Geoff

 

[Neal]

the presence of these images
add a pixel or two of extra spacing to the bottom of each line

Try changing the font-size. See how it changes.

In IE, images don't scale with the text. This is unavoidable.

In CSS, you could set the height of the image to 1em or so, maybe 0.9em,
and that will prevent the lines from getting more spaced out.

 

[Mark Parnell]

In CSS, you could set the height of the image to 1em or so, maybe 0.9em,
and that will prevent the lines from getting more spaced out.

But will probably mean the image will look dodgy.

 

[Gus Richter]

(posted to both alt.html and c.i.w.a.s. as I'm not sure what, exactly, is at
fault here)

I'm doing a site re-design:
http://www.captainsoftheworld.com/cotw/index.html
http://www.captainsoftheworld.com/cotw/cotw.css
(the original version can be found at the root of this domain, though I
don't suppose that matters much).

My question involves the little star-rating graphics in the Movie Reviews
box on the right-hand side. You'll notice that the presence of these images
add a pixel or two of extra spacing to the bottom of each line that they're
on (notice how all other listings in the right-hand boxes, without the
star-rating images, do not have this extra height).

Any ideas how I can fix that? I'm certain it's not got anything to do with
the height of the images themselves, and I've also been unable to fix is by
zero-ing the padding or magins of the images.

Thanks!
~Geoff

Try changing the images' vertical alignment with:
baseline - bottom of the img is on the baseline
bottom - bottom of the img is a couple of pixels below the baseline
middle - centers the img over the ascender to the descender
You will probably go with bottom instead of your present middle.

 

[Neal]

But will probably mean the image will look dodgy.

Well, guess what. Images inline with text are an issue with IE.

His page looked fine in Opera and Firefox. Too bad IE again drops the
ball. They're the new Red Sox.

(thank goodness we have a new Red Sox in the WS, despite errors)