Forum Moderators: open
Whatever, in Opera8.5 I get the same with the complete address included, but in Firefox I get nothing.
I am using roll-over images only in my navbar. I also tried adding the alt= attribute next to title=, but that didn't work either. I don't think I can add an alt= to the background image in CSS, which is how all the images are called.
It would be nice if a tooltip would pop up in FF. Any suggestions?
Thanks,
Grump
CSS
#navbar_t{
margin: 20px 0;
padding: 0;
list-style: none;}
#navbar_t li{
float: left;}
#navbar_t li.tile{
background-color: transparent;
width: 25px;
height: 30px;}
#navbar_t li.home{
background:url(images/nav/btn_home_f2.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.about{
background:url(images/nav/btn_about_f2.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.projects{
background:url(images/nav/btn_projects_f2.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.guides{
background:url(images/nav/btn_guides_f2.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.resources{
background:url(images/nav/btn_resources_f2.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t a{
display: block;
width: 90px;
height: 30px;}
#navbar_t li.home a{
background:url(images/nav/btn_home.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.about a{
background: url(images/nav/btn_about.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.projects a{
background:url(images/nav/btn_projects.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.guides a{
background:url(images/nav/btn_guides.gif) no-repeat left top;
width: 90px;
height: 30px;}
#navbar_t li.resources a{
background:url(images/nav/btn_resources.gif) no-repeat left top;
width: 90px;
height: 30px;}
ul#navbar_t a:hover{
background: transparent;}
ul#navbar_t a:focus{
background: transparent;}
XHTML:
<div id="topnav">
<ul id="navbar_t">
<li class="home"><a title="Home Page" href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="about"><a title="About Me" href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="projects"><a title="Current Projects" href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="guides"><a title="How-To Guides" href="#"></a></li>
<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
<li class="resources"><a title="Links to..." href="#"></a></li>
</ul>
</div>
I have also tried placing a title= inside the opening div tag <div class="home" title="Home">, but that didn't work either.
Grump
The navbar buttons consist of 2 images per button, one is the on-state, the other is off, or normal. I use all of them as background images and stack one on top of the other so that everything is preloaded when the page loads. Now when you pass the cursor over the button, the off-state becomes transparent and there is the on-state button. The onload= function of the <body> just doesn't do its job well enough.
How can I do this similarly and still have valid code? The button images also have graphical text that can't be reproduced with standard CSS/XHTML. Is there a solution to this?
Grump
How can I do this similarly and still have valid code? The button images also have graphical text that can't be reproduced with standard CSS/XHTML. Is there a solution to this?
Instead of using two links, just combine both images into one and use it as the background of a single link. You can then use the :hover pseudoclass to change the position of the background image.
For more information, Google css + sprite + mouseover [google.ca].
-B
