Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Using images instead of text in menu tabs?

Is there anyway to use images in the menu tabs instead of text? (Discussions, Categories, Search, etc...) I want the menu to look 100% identical across all browsers / os's - and to match up with the rest of my site. Preferably with use of 3 different gif's for each menu item (1 each for TabOn, TabOff and TabOff:hover cheers


  • edited November 2005
    something like this maybe?

    .TabOn { text-indent: -2000em; background: #fff (whatever.gif) no-repeat top center; }

    changing it for the hover and off states will give the effect you want.
  • Another solution is to use text for your menu tabs in the rest of your site ;-) This is more easily accessible to a lot of people (disabled people but not only).
  • That's what I was thinking Stuart, but wouldn't having the text indented 2000 em to the left screw with the horizontal width and spacing between the tabs? True Felipe, but as a designer, sometimes I put more priority on the text appearing exactly as I want it, not something close to it! They are all labelled and alt tagged properly though ;)
  • Sorry, ignore that snippet above, that was senseless drivel. The solution you want has been well documented, and beautifully implemented at Bryan Veloso's Avalonstar: the sprites approach should work for you just fine.
  • thanks stuart. I actually just tried what you wrote above and it didn't do anything. I'll give the avalonstar sprites approach a go tomorrow. just one quick question though. how would I specify different images for each tab? in the global.css, there's just the TabOn, TabOff and TabOff:hover tags which effect all of them. As you can see below. I can't see anyway to specify which background specifically, say, the seach tab has for instance. extract from global.css: /* TabOn/TabOff: The tabs in the main menu, which can appear different if they are identified as the current tab (TabOn). */ .TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover, .TabOff, .TabOff:link, .TabOff:visited, .TabOff:hover { position: relative; padding: 0px; padding-top: 2px; padding-bottom: 2px; font-size: 13px; font-weight: bold; text-transform : uppercase; text-align: center; text-decoration: none; } .TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover { color: #E9004A; } .TabOff, .TabOff:link, .TabOff:visited { color: #7C7C7C; } .TabOff:hover { color: #343434; }
  • They all have unique classes too, check out this firefox screenshot:
  • KrakKrak New
    edited November 2005
    Why would

    .TabOn { background: url("bg.gif"); }
    not work?
  • Well, for one, if he wants to hide the text...
  • Hmm... ok according to that image, (and when I view source from a browser), yes, there appears to be unique classes for each menu tab - but trying to control them from global.css doesn't seem to do anything. Typing this in below is just ignored completely. and just defaults back to whatever .TabOn is (or if I remove that, what ever the page settings are) .TabOn DiscussionsTab { display:block; width:93px; height:20px; padding: 0px; padding-top: 2px; padding-bottom: 2px; text-indent: -2000em; background-image: url(../../images/menu_discussions_on.gif); }
  • edited November 2005
    remove .Tabon and just have .DiscussionsTab Or try something like .TabOn > .DiscussionsTab - which should apply styling only to the discussions tab which is adjacent to the main .TabOn styling, maybe, who knows, it's late, I'm a little bit drunk.
  • still doesn't seem to have any effect plus the text-indent is ignored when display:inline oh, well, I think I'll just go back to text menus then. thanks for your help stuart
  • edited November 2005
    i managed to do it on my css design. i'll check out how i achieved it and post it up for you.


    ok here's the css...

    /* list items code*/ #MenuForum { list-style: none; width:990px; background: url(bg_nav.gif) no-repeat; height:40px; padding:20px 0 0 281px; } #MenuForum li { float:left; } /*tab styles*/ /*-----------------------------------------------------------------------------------------*/ .TabOn, .TabOn:link, .TabOn:visited, .TabOn:hover, .TabOff, .TabOff:link, .TabOff:visited, .TabOff:hover { text-decoration: none; text-indent: -4000px; height:17px; display:block; } /*image for each tab*/ .DiscussionsTab{ background:url(nav_discussions.gif) no-repeat; width:99px; } .CategoriesTab{ background:url(nav_categories.gif) no-repeat; width:91px; margin-left:11px; } .SearchTab{ background:url(nav_search.gif) no-repeat; width:63px; margin-left:11px; } .SettingsTab{ background:url(nav_settings.gif) no-repeat; width:73px; margin-left:11px; } .AccountTab{ background:url(nav_account.gif) no-repeat; width:70px; } /*tab on*/ /*-----------------------------------------------------------------------------------------*/ .TabOn, .TabOff:hover{ background-position: 0 -17px; }

    there is extra code in there that you wont need but it should be easy to adjust to your needs.

    note that you must have both link states in the same image. for example:


    and then I have restricted the height to show only one half on the image at any one time. on hover you move the background image position to reveal the other part of the image. thus your roll over, very fast as well because it doesn't need to load a second image on roll over.

    to make the text not show i have used text-indent: -4000px; this works because i've used float:left; rather than display:inline; - display inline doesn't work well in older browsers so i always stay clear of it anyway.

    now unfortuntely in old versions of ie on mac, and possibly win i can't remember, using text-indent will also move the background image off of the screen. unfortunatley there's not much that can be done here without altering the html...

    if i was to write the html for the nav i would stick a span inside the a tag and then use display:none; on the span with the background image still on the a tag. but it's up to you whether you want to change the html before the templating system is out or whether you're not fussed about the older browsers.

    hope that helps.

    you can see the style here
  • nathan the problem with your css not working is because you are telling it you want to style elements with a class of DiscussionsTab whose parent is TabOn. In the html these classes are listed as TabOn DiscussionsTab which means the element has a class of both Tab On and DiscussionsTab -- they don't have a parent/child relationship. you just want to style DiscussionsTab on its own. Did that make sense? Does anyone else have the problem where they can clearly see where things are going wrong but when you try to explain it it just comes out as gobbledegook?
  • edited November 2005
    I can't think of a way to style an element with both DiscussionTab and TabOn, but not each individually.

    There are some days I just want to smack the w3 consortium upside the head.

    EDIT: Apparently, it would just be .DiscussionTab.TabOn{}.

    You have been spared. This time.
  • edited November 2005
    hmmm. don't think that's going to work....
  • edited November 2005
    oh, whoops, sorry i thought you had a space between the two selectors.
  • edited November 2005
    Nope, sorry should have specified that. It really is a crappy little hack intended to cover up how weak the css selector syntax is, but it's there.
  • aw, don't be mean to the poor css spec :P
  • Why not?
  • because deep down it's a person too
This discussion has been closed.