Images adding unwanted spacing to the bottom of a line

(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

re: Images adding unwanted spacing to the bottom of a line

On Mon, 25 Oct 2004 03:39:37 GMT, Geoff Hague <ghagueREMOVE2REPLY@shaw.ca>
wrote:
[color=blue]
> the presence of these images
> add a pixel or two of extra spacing to the bottom of each line[/color]

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.

re: Images adding unwanted spacing to the bottom of a line

Geoff Hague wrote:[color=blue]
> (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
>[/color]

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.

--
Gus

re: Images adding unwanted spacing to the bottom of a line

On Sun, 24 Oct 2004 23:51:44 -0400, Neal <neal413@yahoo.com> declared in
alt.html,comp.infosystems.www.authoring.stylesheets:
[color=blue]
> 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.[/color]

But will probably mean the image will look dodgy.

--
Mark Parnell
http://www.clarkecomputers.com.au
"Never drink rum&coke whilst reading usenet" - rf 2004

re: Images adding unwanted spacing to the bottom of a line

On Mon, 25 Oct 2004 14:37:00 +1000, Mark Parnell wrote:[color=blue]
> On Sun, 24 Oct 2004 23:51:44 -0400, Neal wrote:[color=green]
>> In CSS, you could set the height of the image to 1em or so[/color]
> But will probably mean the image will look dodgy.[/color]

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)

re: Images adding unwanted spacing to the bottom of a line

Geoff Hague napisa³(a):[color=blue]
> (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:[/color]
[...][color=blue]
> 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.[/color]

I've got an idea, it's not just how to fix the extra space, but I think you may
like it.
http://www.csslayouts.net/pcwww/star_rating.html

the difference is:
- only one single star image
- background-image instead of <img src...
- alternate text for css-disabled browsers

I think it could be done better (semantically) but it is an idea to play with,
not ready-made solution ;)

tested in FireFox, Opera, Konqueror
[color=blue]
> Thanks!
> ~Geoff[/color]



--
pawel[kropka]knapik[at]gmail[kropka]com