SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Perhaps you could try setting an explicit line-height on those lists. E.g.

    Code:
    .grid_3 {line-height: 25px;}
    [Thread moved to CSS forum]

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I just did a test with one image and it worked fine:

    Code:
    <!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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •