Alignment issue in IE8

I have a list of words and next to that a list of images. The words and the images line up in all browsers except IE as far as I can tell.

What kind of fix do I do to sort out the alignment?

see the skills section here (Eve Hickey’s Online CV)

Perhaps you could try setting an explicit line-height on those lists. E.g.

.grid_3 {line-height: 25px;}

[Thread moved to CSS forum]

Thanks for the idea but unfortunately no change, I made it more specific and still no change i.e;

ul.image_list li img {
line-height: 24px;
}
and nothing changes. made it an id and still nothing.

Any other ideas?

Hmm, we could tinker around a lot, but personally, I’d approach this differently. I would only use one list, and either nest the images within each LI next to the text (probably better for accessibility, since you could them use alt text to indicate the number of stars) or just use right padding and place the stars in there as a background image.

I tried using one list with the images in each <li> next to the text but this, whether the text is left aligned or center aligned, does not achieve the desired result…I might mess around with <span> and position absolute because I don’t want them as a BG image. I want them to display text on hover.

Anyway thanks for sharing your ideas

Because the images are all the same width, I would just have each LI set to text-align: right, have the images last with a left margin on them, and I would think everything should line up nicely. I’ll do some tests, though.

I just did a test with one image and it worked fine:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
* {margin: 0; padding: 0;}
ul {list-style: none; width: 400px;}
li {text-align: right}
li img {vertical-align: middle; margin-left: 10px;}
</style>

</head>

<body>
<ul class="grid_3 alpha right_align">
  <li>XHTML <img src="stars4.png"></li>
  <li>CSS <img src="stars4.png"></li>
  <li>HTML5 <img src="stars4.png"></li>
  <li>CSS3 <img src="stars4.png"></li>
  <li>Design &amp; Composition <img src="stars4.png"></li>
  <li>Computer Skills <img src="stars4.png"></li>
  <li>Dreamweaver <img src="stars4.png"></li>
  <li>Photoshop <img src="stars4.png"></li>
  <li>Flash <img src="stars4.png"></li>
  <li>Fireworks <img src="stars4.png"></li>
  <li>JavaScript/jQuery <img src="stars4.png"></li>
</ul>

</body>

</html>

So, just add in the appropriate images and add alt text.