SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    Belgium
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Lists, IE6 problem

    Hi,
    When using the code down below in IE6 the list images don't show up. But when you hovered over it once the images will suddenly appear. Everything works fine in Firebird though.
    Another problem is when I use the selected class for the <a> tag the list image won't even show up after you hovered over it. So any ideas how to fix this?
    Btw I did try to set a list image instead of using background, didn't work either.

    Code:
    ul#left_nav { margin: 0; padding: 0; }
    ul#left_nav li { display: block; margin: 0; padding-left: 20px; background: transparent url("/vvb/images/list.gif") no-repeat 7px 7px; list-style-type: disc; }
    ul#left_nav li:hover { background: transparent url("/vvb/images/listhover.gif") no-repeat 7px 7px; list-style-type: disc; }
    ul#left_nav li a { color: #333; font-weight: normal; font-size: 0.9em;}
    ul#left_nav li a:link, ul#left_nav li a:visited { text-decoration: none; }
    ul#left_nav li a:link.selected, ul#left_nav li a:visited.selected { text-decoration: none; font-weight: bold; }
    ul#left_nav li a:hover, ul#left_nav li a:hover.selected, ul#left_nav li a:active { text-decoration: none; color: #fff;}
    Code:
    <div id="left">
     <ul id="left_nav">
      <li><a href="#" title="beschrijving" class="selected">link test</a></li>
      <li><a href="#" title="beschrijving">link test</a></li>
      <li><a href="#" title="beschrijving">link test</a></li>
      <li><a href="#" title="beschrijving">link test</a></li>
      <li><a href="#" title="beschrijving">link test</a></li>
      <li><a href="#" title="beschrijving">link test</a></li>
     </ul>
    </div>
    thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE doen't understand hover on any other element except the a (anchor) element.

    Therefore you need to define your rollovers for these elements and not for the list element. the anchor needs to be set to display block to make the whole area active.

    e.g.
    Code:
    ul#left_nav li a { color: #333; font-weight: normal; font-size: 0.9em;display:block;}
    ul#left_nav li a:link, ul#left_nav li a:visited { text-decoration: none; background: transparent url (/vvb/images/list.gif) no-repeat 7px 7px;}
    ul#left_nav li a:link.selected, ul#left_nav li a:visited.selected { text-decoration: none; font-weight: bold; }
    ul#left_nav li a:hover, ul#left_nav li a:hover.selected, ul#left_nav li a:active { text-decoration: none; color: #fff;background: transparent url (/vvb/images/listhover.gif) no-repeat 7px 7px;}
    You may need to tweak it a bit as I haven't tested with real images so I'm not sure what effect you were looking for.
    Hope that helps.

    Paul

    (BTW A list image is used instead of the bullet and not the background.)

  3. #3
    SitePoint Member
    Join Date
    May 2003
    Location
    Belgium
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but it didn't really fix the problem. The li hover doesn't have to work in IE6. The problem rather is that the normal boxes don't get displayed all the time in IE6. The first link of each list never displays a box, which is quite strange. Well I think it has to do something with hover, because IE6 acts really strange with it.

    If you want to check it out in practice:
    http://www.surfmusic.be/vvb/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I understand you correctly in that you want the little square box to turn yellow on mouseover then the code I gave you above worked firtst time !

    This is the code inserted and the list:hover deleted. I've added some padding to the a element to allow the bg image to show.

    Code:
    div#left ul { position:relative; margin: 0; padding: 0; }
    div#left li a {padding-left:10px; color: #333; font-weight: normal; font-size: 0.9em;background: transparent url(/vvb/images/list.gif) no-repeat -0px 5px }
    div#left li a:link, div#left li a:visited { text-decoration: none; }
    div#left li a:link.selected, div#left li a:visited.selected { text-decoration: none; font-weight: bold; }
    div#left li a:hover, div#left li a:hover.selected, div#left li a:active { color: #fff;background: transparent url(/vvb/images/listhover.gif) no-repeat -0px 5px; }
    div#left li.highlight a { color: #fff; font-weight: normal; }
    div#left li { display: block; margin: 0; padding-left: 20px;  list-style-type: none; }
    I have this working locally and looks much the same as your version did in mozilla.

    The li hover doesn't have to work in IE6.
    It doesn't so no point using it

    Sorry if i've mis-understood the question

    Paul

  5. #5
    SitePoint Member
    Join Date
    May 2003
    Location
    Belgium
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well someone gave me the sollution. The problem was that I had to add position:relative to ul.

    Anyway thanks for your help

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you fixed it

    I guess I wasn't understanding the question properly.

    (didn't you want the yellow box to show in ie ?)

    Paul

  7. #7
    SitePoint Member
    Join Date
    May 2003
    Location
    Belgium
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol, I guess so. Yep, that's not what I wanted, the problem was that the normal box (without hover) wasn't always displayed.
    Anyway, fixed now


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
  •