No announcement yet.

CSS rollover flicker

  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS rollover flicker


    just learning about rollovers using css. seems the first time IE does it i get a flicker...than the rest of the browsing section is fine. was wondering what i can do to fix this. my set up has a header with a background image that than has div for each button. each div has a background image...a pic of a letter that then gets a bit of a glow when its rolled over. here is the css i have. would appreciate some suggetions. site can be viewed at

    #button1 a {
    width: 104px;
    height: 97px;
    float: left;
    padding-left: 86px;
    background-image: url(images/home1.png);
    background-repeat: no-repeat;
    background-position: 85px;

    #button1 a:hover {
    width: 104px;
    height: 97px;
    float: left;
    padding-left: 86px;
    background-image: url(images/home2.png);
    background-repeat: no-repeat;
    background-position: 85px;
    Its not "Mitch-ed" stupid....its Me-Show.

  • #2
    Because the image has to load before it can be shown. Once loaded, it is cached thus no more flicker.
    Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.


    • #3
      ^^What Ckret said.

      You can try to solve it using CSS sprites:


      • #4
        is there a way to do it without sprites?
        Its not "Mitch-ed" stupid....its Me-Show.


        • #5
          Yes. But the way with sprites is better.

          The alternative is to use Javascript to preload images.


          • #6
            Best to use a sprite. javascript would just make the entire thing more complex then it really needs to be.

            You should be using CSS rather then javascript for your navigation menu rollovers. Furthermore, a unordered list is more appropriate then divs to mark-up the nav menu.

            HTML Code:
              <div id="button1"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home2.png',1)"></a></div>
              <div id="button2"><a href="more.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('More','','images/more2.png',1)"></a></div>
              <div id="button3"><a href="view.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('View','','images/view2.png',1)"></a></div>
              <div id="button4"><a href="talk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Talk','','images/talk2.png',1)"></a></div>
            Last edited by tZ; 05-06-2009, 11:00 PM.


            • #7
              The more semantic way to set-up the main nav:

              HTML Code:
              <ul id="nav-main">
              	<li class="home"><a href="index.html" title="home">Home</a></li>
              	<li class="more"><a href="more.html" title="more">More</a></li>
              	<li class="view"><a href="view.html" title="view">View</a></li>
              	<li class="talk"><a href="talk.html" title="talk">Talk</a></li>
              The image rollovers should then be applied using the sprite technique as discussed above. There is no need to use javascript for the rollover effect.


              • #8

                would nav-main hold the background of the tabs? and then each class id would hold the background of the letter....would the li class have a hover class containign the alternate background? will check out sprites more when i get home tongiht?

                is anyone having probs viewing the page. its really gets screwed up in IE6.....all the text gets moved down the the white part.....cant figure out why.
                Its not "Mitch-ed" stupid....its Me-Show.


                • #9
                  No, you create one large image that will be applied as a background to the anchors. Then you change the backgrounds vertical position on the different states (link,visited,active and hover).






                  Incredible Stock

                  Latest Topics


                  • mixlikes
                    Reply to ​What is your favorite forum software?
                    Favorite forum software:
                    1. phpBB
                    2. MyBB
                    3. Vanilla Forum
                    4. XenForo
                    5. Simple Machines Forum
                    Today, 03:43 AM
                  • Caleson
                    Reply to Questions about Business Cards, Self Promotion
                    Actually, I was referring to applying for employment. I'm kind of mixed on whether or not it would be a good idea, but I think overall, if the card is pretty creative, it could serve as a memorable token....
                    Yesterday, 09:59 PM
                  • fredz0003
                    Logo critique for my personal blog
                    Hi, I am new to this forum. A bit about myself I am a programmer, and trying to build a professional looking blog. I've done web dev before, but I've never considered myself the artistic type. I followed...
                    Yesterday, 04:57 PM
                  • B
                    Reply to Any Tech Geeks please help me?!
                    Of the options you mentioned, upgrading the RAM will make the most difference for the cost. Eight megabytes of RAM is almost a bare minimum when working with Adobe's graphics applications -- 16 is even...
                    Yesterday, 04:56 PM
                  • mrturner
                    Any Tech Geeks please help me?!
                    I am currently doing my graphics design work on my laptop which specs are listed below, It really does struggle to handle software like photoshop and illustrator. Do I, upgrade RAM? An 8GB ram stick for...
                    Yesterday, 04:16 PM
                  GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings