SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with a CSS rollover Please Help.

    Having a little trouble with a dis-jointed CSS rollover.
    The link:
    http://www.pressdat.com/mtw2/Mercs/M...ossbowmen.html

    I'm using <a href="#"></a> for the rollover with a <span>.
    Everything works just fine as long as none of the links are actually clicked, which is bound to happen. If they are clicked, it breaks. It's like the background image gets stuck in the "rollover" state at background-position: 0 0.

    my css:
    Code:
    #navlist {
    padding: 0 1px 1px;
    margin-left: 0;
    font: bold 12px Verdana, sans-serif;
    height: 300px;
    float: left;
    position: relative;
    top: 0px;
    left: -5px;
    width: 160px;
     }
    
    
    
    #navlist li {
    list-style: none;
    margin: 3px 0 0 10px;
    display: block;
    position: relative;
    top: 0px;
    left: 3px;
    width: 156px;
    text-align: center;
    font-style: italic;
    }
    
    #navlist li a {
    font: bold 1.2em/1.6em Arial, Helvetica, sans-serif;
    background: #fff;
    text-decoration: underline;
     }
    
    #navlist li a:link { color: #000; }
    #navlist li a:visited { color: #000; }
    #navlist li a:hover,
    #navlist li a:active,
    #navlist li a:focus {
    	color: #ff0000;
    	visibility: visible; }
    
    #navlist li a span {
    visibility:hidden;
    display:block;
    position: absolute;
    color:#000;
    width: 411px;
    height: 250px;
    }
    
    
    
    #defaultImage {
    visibility:visible;
    display:block;
    position: absolute;
    margin: 0 0 0 200px;
    width: 411px;
    height: 250px;
    background-image:url(../Mercs/images/regions/base.jpg) ;
    }
    
    
    
    #navlist li a:hover span,
    #navlist li a:active span,
    #navlist li a:focus span {
    	visibility:visible;
        background-image:url(../Mercs/images/regions/rollover_16_BIG.png) ;
        top: -20px; left: 191px;
    	display: block;
    	}
    
    
    
    #navlist li a:hover span#scot { background-position: 0 0; ; }
    #navlist li a:hover span#ire  { background-position: 0 -250px;   }
    #navlist li a:hover span#wales { background-position: 0 -500px;   }
    #navlist li a:hover span#n_germany { background-position: 0 -750px; }
    #navlist li a:hover span#s_germany { background-position: 0 -1000px; }
    #navlist li a:hover span#n_italy { background-position: 0 -1250px;  }
    #navlist li a:hover span#e_balkans { background-position: -411px -250px; }
    #navlist li a:hover span#e_greece { background-position: -411px -500px; }
    #navlist li a:hover span#anatolia { background-position: -411px -750px; }

    My HTML for the effected part:
    Code:
    <div id="defaultImage">
    <img src="http://www.sitepoint.com/forums/images/regions/base.jpg"></div>
    
    
    <ul id="navlist">
    <li class="reg_head">Available in:</li>
    <li><a href="#">Scotland <span id="scot"></span></a>
    <br />
    <a href="#">Ireland <span id="ire"></span> </a>
    <br />
    <a href="#">Wales <span id="wales"></span></a>
    <br />
    <a href="#">Northern Germany <span id="n_germany"></span></a>
    <br />
    <a href="#">Southern Germany <span id="s_germany"></span></a>
    <br />
    <a href="#">Eastern Balkans <span id="e_balkans"></span></a>
    <br />
    <a href="#"><span id="wales"></span></a>
    </li>
    </ul>
    <br clear="all" />
    What can I do to prevent this?

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

    You're setting the active and focus states which means that while the link is clicked or has focus then the rollover remians visible.

    Code:
    #navlist li a:active, #navlist li a:focus
    Just remove those and leave the hover effect if that's all you want.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    You're setting the active and focus states which means that while the link is clicked or has focus then the rollover remians visible.

    Code:
    #navlist li a:active, #navlist li a:focus
    Just remove those and leave the hover effect if that's all you want.
    Paul, I tried that.
    I changed

    Code:
    navlist li a:link { color: #000; }
    #navlist li a:visited { color: #000; }
    #navlist li a:hover,
    #navlist li a:active,
    #navlist li a:focus {
    	color: #ff0000;
    	visibility: visible; }
    To

    Code:
    navlist li a:link { color: #000; }
    #navlist li a:visited { color: #000; }
    #navlist li a:hover {
    	color: #ff0000;
    	visibility: visible; }

    and it didn't make a difference.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and it didn't make a difference.
    Wait one...............................

    I removed the :active and :focus from the span as well and that seems to have fixed it.

    Thanks so much!!!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm still seeing the code in your live page so I can't check.

    Code:
    #navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span{
        background-image: url("../Mercs/images/regions/rollover_16_BIG.png");
        display: block;
        left: 191px;
        top: -20px;
        visibility: visible;
    
    
    }
    Remove that code and I'll check if there is some other issue.

    Or is it a specific browser you are having problems with?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes sorry, I meant the span in my first post

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just beware that doing so can screw some keyboard navigators from being able to use your links...

    Of course if people are clicking on the links then it should be taking you somewhere, in which case does it matter if the state stays on? (shakes head, goes to look at page in question) -- ok, you don't have those anchors actually going anywhere -- once you make them go someplace, that would be a non-issue... of course if they aren't going anyplace, why are you using anchors?

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Just beware that doing so can screw some keyboard navigators from being able to use your links...

    Of course if people are clicking on the links then it should be taking you somewhere, in which case does it matter if the state stays on? (shakes head, goes to look at page in question) -- ok, you don't have those anchors actually going anywhere -- once you make them go someplace, that would be a non-issue... of course if they aren't going anyplace, why are you using anchors?
    Well, in this case, when the state stayed "on" the rollover image was screwed. It continued to highlight Scotland.
    As far as using anchors....... are there other ways to do css rollovers? I'm just a novice and every tutorial I pulled up showed using anchors to achieve a rollover.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Phil from Loreau View Post
    Well, in this case, when the state stayed "on" the rollover image was screwed. It continued to highlight Scotland.
    As far as using anchors....... are there other ways to do css rollovers? I'm just a novice and every tutorial I pulled up showed using anchors to achieve a rollover.

    Yes you have to use anchors if you want to support IE6 as it only understand hover on anchors. You could use any element for more modern browsers.

    The set up is a little confusing as you have a list of underlined text which looks as though it should be links but in fact is just text. Usually with a disjointed rollover like that you would have a destination to go to such as the area you highlighted on the map. However, you are just using it for a visual display. I don't think its a big issue but maybe don't underline the text on the side so people don't think its a link.

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul.
    That probably would look better.
    Thanks.


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
  •