Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS woes in IE -- yes again

    One is my fault for sure, the other maybe not.
    http://67-42-48-70.eugn.qwest.net/se...layseries2.php

    That's my site. If it's down, it basically some links that when hovered, display an image. The css is below.

    Code:
    .seriesbox
    {
    
    
    height: auto;
    width: auto;
    
    }
    
    
    .flashybox
    {
    
    /*float: left;*/
    display: block;
    height: auto;
    width: auto;
    
    }
    
    
    
    .flashybox a span
    {
    
    display: none;
    float: left;
    color: yellow;
    }
    
    .flashybox a:hover span
    {
    display: inline;
    float: none;
    color: blue;
    }
    It works well in FF etc etc. But not IE6.
    Also there's a weird purple line at the bottom of the image. Like this


    Here is the relevant HTML for the rollover issue.

    Code:
    <div class="flashybox">
    
    <b>G</b><br/><a href="addcharacter.php?series=Gankutsuou&addnewcharacter=false">Gankutsuou<br/>
    <span><img src="pictures/gankutsuou.jpg" ></span></a>
    <br/></div>
    Any ideas on what I could do?

    Note
    Normally I would give a link to the actual site and not my local webserver, but my hosting company is having trouble with my site atm. <_<
    Last edited by bobber205; 12-28-2007 at 04:10 AM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by bobber205 View Post
    http://67-42-48-70.eugn.qwest.net/se...layseries2.php

    That's my site. If it's down, it basically some links that when hovered, display an image.
    I navigated to your site, and it looks like you have changed your CSS a bit compared to what you have posted above. This is from your current CSS:
    Code:
    .flashybox a img
    {
    display: none;
    float: left;
    }
    
    .flashybox a:hover img 
    {
    display: inline;
    float: none;
    text-decoration: none;
    border: 0px;
    }
    IE6 bug
    There is a bug in IE6 for selectors like .flashybox a:hover img. They seem to be completely ignored unless you at the same time specify styles for the .flashybox a:hover selector which involve a background-position (even without background-image) or a change in background-color.

    The solution
    If you for example add this to your CSS then it should work in IE6 too:
    Code:
    .flashybox a:hover {
      background-position: 0 0;
    }
    Related sources:
    1. http://www.satzansatz.de/cssd/pseudocss.html#hoverdesc
    2. http://friendlybit.com/css/ie6-bug-i...tor-hover-bug/


  •  

    Posting Permissions

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