Announcement Announcement Module
Collapse
No announcement yet.
CSS rollover flicker Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Latest Topics Latest Topics Module
Collapse

  • Yehoshua
    Resume
    Yehoshua
    You guys helped me create my logo, now help me put it into action! Is there a better typeface that would fit the logo and style of the resume apart from Helvetica Neue? Some geometric sans that I don't...
    Today, 07:12 AM
  • Yehoshua
    Reply to Graphic design career
    Yehoshua
    I'm obtaining a design education right now. The most important thing to do in and out of school is to learn. Devour every bit of design information you can, and learn your design history***. Network (go...
    Today, 06:58 AM
  • B
    Reply to Macbook Air 11" or Macbook Air 13"?
    B
    I'd sure not want to do real work on a 11-inch display or, for that matter, a 13-inch display. But what kind of work would you really be doing on it since you have an iMac at home? A small MacBook Air...
    Today, 02:03 AM
  • justcode247
    Graphic design career
    justcode247
    Hi, I am an aspiring graphic designer and would like the advice from creatives in the field. From reading the posts/threads in this forum, I realize it may be difficult for entry-level designers to find...
    Today, 12:29 AM
  • NostalgiaSeeker
    Reply to Critique for my business card
    NostalgiaSeeker
    It was your post, it was green for a while and stopped being green, maybe it was a bug. Does anyone know what it's called when you see a bad design and get a headache just by seeing it? Is there a...
    Today, 12:11 AM

Powered by mediabistro.com
Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS rollover flicker

    hi.

    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 www.meshowventures.com

    #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.

    Comment


    • #3
      ^^What Ckret said.

      You can try to solve it using CSS sprites: http://css-tricks.com/css-sprites/

      Comment


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

        Comment


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

          The alternative is to use Javascript to preload images.

          Comment


          • #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-07-2009, 04:00 AM.

            Comment


            • #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>
              </ul>
              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.

              Comment


              • #8
                tz

                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 page....off the white part.....cant figure out why.
                Its not "Mitch-ed" stupid....its Me-Show.

                Comment


                • #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).

                  Comment

                  Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2015 Mediabistro Inc.
                  Working...
                  X