CSS rollover flicker

[calebm12]

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 (http://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;
}

[CkretAjint]

Because the image has to load before it can be shown. Once loaded, it is cached thus no more flicker.

[hewligan]

^^What Ckret said.

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

[calebm12]

is there a way to do it without sprites?

[hewligan]

Yes. But the way with sprites is better.

The alternative is to use Javascript to preload images.

[tZ]

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.

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

[tZ]

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


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

[calebm12]

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.

[tZ]

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