Image flashes on css rollover

[mbay]

Hello Everyone!

when i view this link:

http://www.michelbayard.bobos.ca/lbp/index.html

it seems that when I go over the "english" or "french" button that for a moment the image flashes. I thought perhaps this was due to pre-loading, so I added a pre-loader, but it doesn't seem the rectify this flashing.

Any advise or help would be greatly appreciated,

mbay

[hemebond]

It's the image loading; not that you can really see the difference between the 2 images.

Some advice - get rid of the rollovers. Make one big image with an image map or positioned links.

[_Aerospace_Eng_]

or combine the original img and the rollover img, to make one big image then a:hover just change the background position.

[mbay]

Hi Hemebond!

Thanks for the advise! Image map or positioned links? Honestly, not too familiiar with those, but I will do some research.

Thanks again!

--

Hi Aerospace!

Thanks for the advise too! Change the background position? Hmm, interesting concept. Won't that cause the image to be heavier if it's bigger? I don't know much about it to comment othersiwe, but I will research it too!

Thanks again!

[_Aerospace_Eng_]

No it would be less size more than likely. It would take care of the flicker. It wouldn't have to make another server called either. For an example of what I'm talking about check out the navigation on this page (http://prdesignz.inraged-inc.com/contest4/index2.html).
The home image is only 3.13kb, this is with both the on and off images combined. Now the individual image is 2.61kb, and if you double that you have a little over 5kb in filesize total.

[mbay]

Hi Aerospace!

So from I what I can see of the example and the attached images, it seems that your just move the image according to the state (e.g. mouseover)? Interesting. But by moving the image, wouldn't the other button show since it is attached and after all the same image?

[_Aerospace_Eng_]

No not if the height of its containing element is just enough to show part of the image in this case half. I don't even use home-off.gif that was just use to compare file size.

[mbay]

Hi Aerospace!

Yes, i presumed the other gif was to show the comparison, which was much grander than the 2 together. I did not that since the element size is half in this case that the other half is not show. This is a good to know. Thanks you very much. I will try this immediately with my example.

Thanks again for all your help and advice!

[webmarkart]

Good suggestion _Aerospace_Eng_ - I was actually experiencing a similar problem but it was a low priority thing for me until I worked out more important things.

I tried out this idea and it worked out great while I ran it locally but as soon as I implemented it to the live application it still has a slight flicker in IE. If I have three tabs and I hover over one they all go blank for a split second. Hmmm I'll have to look into this more.

[_Aerospace_Eng_]

There shouldn't be any flicker unless you are using more than one image for the rollover.

[webmarkart]

Here is the image I'm using: http://tmarkart-sitemgr.apps.nandomedia.com/registration/images/tabs3x.gif

It worked perfectly until I loaded it into the application I'm building. As a standalone html doc it worked great. I'm going to have to dig deeper into the code but I use the same css and everything for the standalone... I don't get it.



/*--------------------- Format Active Tab Navigation ---------------------*/
.taba {background:url(../images/tabs3x.gif) no-repeat; background-position:top center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#ffffff !important; font-weight:bold; text-align:center; padding-right:2px;}
.taba a {display:block; height:22px; color:#ffffff !important; text-decoration:none}
.taba a:hover {color:#ffffff !important; text-decoration:underline;}
/*--------------------- Formats Nonactive Tab Navigation ---------------------*/
.tabn {background:url(../images/tabs3x.gif) no-repeat; background-position:bottom center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#2F553B !important; font-weight:bold; text-align:center; padding-right:2px;}
.tabn a {display:block; height:22px; color:#2F553B !important; text-decoration:underline; text-align:100%;}
.tabn a:hover {color:#2F553B !important; text-decoration:none;}
/*--------------------- Formats Hover Tab Navigation ---------------------*/
.tabhover {background:url(../images/tabs3x.gif) no-repeat; background-position:center center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#ffffff !important; font-weight:bold; text-align:center; padding-right:2px;}
.tabhover a {display:block; height:22px; color:#2F553B !important; text-decoration:underline; text-align:-100%;}
.tabhover a:hover {color:#2F553B !important; text-decoration:none;}





<table cellpadding="0" cellspacing="0" id="tabtable" align="center">
<tr>
<td class="taba">Add New Account</td>
<td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
<td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
<td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
<td><img src="images/white1.gif" alt="" border="0"></td>
</tr>
</table>

[_Aerospace_Eng_]

Ugh CSS all on one line, a little hard to read IMO. You have some excess CSS that you don't need. And the onmouseout and onmouseover, thats not needed either. Quite frankly the menu shouldn't even be inside of a table. You should be using an unordered or ordered list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dli">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tabmenu {
margin:0 auto;
padding:0;
list-style:none;
width:700px; /*make this the width of your menu plus your white1.gif*/
}
#tabmenu li {
float:left;
}
/*--------------------- Format Active Tab Navigation ---------------------*/
#tabmenu .taba a, #tabmenu .taba a:link, #tabmenu .taba a:visited, #tabmenu .taba a:active {
background:url(tabs3x.gif) no-repeat;
width:146px;
height:22px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
color:#ffffff;
font-weight:bold;
text-align:center;
padding-right:2px;
display:block;
text-decoration:none;
}
#tabmenu .taba a:hover {
cursor:default;
}
/*--------------------- Formats Nonactive Tab Navigation ---------------------*/
#tabmenu li a, #tabmenu li a:link {
background:url(tabs3x.gif) bottom no-repeat;
width:146px;
height:22px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
color:#2F553B;
text-decoration:underline;
font-weight:bold;
text-align:center;
padding-right:2px;
display:block;
}
#tabmenu li a:hover {
background-position:center;
color:#2F553B;
text-decoration:none;
}
</style>
<title></title>
</head>
<body>
<ul id="tabmenu">
<li class="taba"><a href="#">Add New Account</a></li>
<li><a href="account_search.html">Search Accounts</a></li>
<li><a href="account_search.html">Search Accounts</a></li>
<li><a href="account_search.html">Search Accounts</a></li>
<li><img src="images/white1.gif" alt="" border="0"></li>
</ul>
</body>
</html>

[webmarkart]

sorry for the css on one line but that's how I prefer it - Thanks for taking the time to look at this for me. As far as being within a table I would love to get them out but there is existing code I have to consider. I'll see if I can possibly do a global change if this works well.


Two questions question with your example...

1.The tabs are generated manually so I will not necessarily know the width. The white1.gif was a shim to take up whatever remaining space was needed to fill the table width. Do I have to set the width?

2. I noticed when I tried to make the tabs a block element even with my table structure the text gets pushed to the top. I've tried everything I can to get it to valign middle again but it doesn't budge. Any suggestions?

[_Aerospace_Eng_]

Well then do you even need the white gif? If you don't know the width of the links then your background image may not be seen to its fullest. They are a set width just because the full background images need to show. Add padding-top to the links and adjust the height, so for example if you added a 5px top padding your new height for the links would be 17px

[webmarkart]

I suppose we could do come backend processing to calculate the width but no link will exceed the 146px of the tabs - I just don't know how many tabs there will be.

I must not be doing something correctly - when I add padding-top:5px; the whole tab expands and I see part of the other tabs states.

I tried pasting in exactly what you posted and it really screws up the pg layout for me. Things start overlapping and it just looks bad...

see for yourself:

Original code with tables (http://tmarkart-sitemgr.nandomedia.com/pubsys/html/ideas/insite/account_add.html)

your code with following content (http://tmarkart-sitemgr.nandomedia.com/pubsys/html/ideas/insite/test.html)

[_Aerospace_Eng_]

I told you specifically if you added padding-top you would NEED to adjust the height so you adding 5px to the top NOW your new height would be 17px. Okay then don't set a width to the ul, and I guess don't even use a ul if it breaks on your layout.

[webmarkart]

I understand now - sorry I initially misunderstood. Although I cannot get away from tables with my current project I will definitely try to incorporate this into future projects.

I really like the idea of all of the mouseover states for an image to be a single image. Thanks for the help and the great idea!

[webmarkart]

Just as a followup - I found this article which gives another reason for the IE6 flicker

http://dean.edwards.name/my/flicker.html