Figuring out the CSS selector to use for sIFR menu (newbie, sorry)

Question

I'm pretty new to sIFR and though I've used it successfully for simple applications like headings, I'm trying to use two different fonts simultaneously - one for a heading and one for a menu. The heading works fine, but I'm stuck with the menu. I'm using the Tofurious Wordpress theme. This is the section of the theme's stylesheet that governs the menu font and link styles:

/*MENU COLORS****************/
#menu {
 background:#bc7d90;
}

#menu li a {
 font:11px Arial, Helvetica, sans-serif; /*MENU FONT STYLES*/
 text-transform: uppercase;
 color:#fff; /*MENU FONT COLOR*/
}

#menu li a:hover {
 color:#ecd1d9; /*MENU FONT COLOR WHEN HOVERING*/
} 

Based on my assumptions, I entered #menu li a as the Item To Replace on the sIFR settings page, and then used this code:

.sIFR-root { font-size:15px; font-weight:normal; color:#fff; }
a { text-decoration:none; color:#fff; }
a:hover { color:#fff; }

It sort of works - that is, the font appears - but not with any of the styles specified above, and it appears on the blog in an unexpected way. You can see the example at this address: www.laurenparkinson.com/blog

Also, the actual sub-menu items are not appearing at all.

Can anybody help me figure out the best way to fix this? Thank you.

Answer 1

You'll do yourself a big favor by ditching sIFR completely for @font-face which is now supported in all major browsers including IE since version 4 (more compatibility information: http://webfonts.info/wiki/index.php?title=@font-face_browser_support).

@font-face {
 font-family: myFont1;
 src: url('myFont1.eot'); /*For IE*/
 src: local('myFont1'), url('myFont1.ttf') format('truetype');
}
@font-face {
 font-family: myFont2;
 src: url('myFont2.eot'); /*For IE*/
 src: local('myFont2'), url('myFont2.ttf') format('truetype');
}

#header{
 font-family: myFont1, Georgia, Times New Roman, Serif;
}

#menu {
 font-family: myFont2, Verdana, Arial, Sans-serif;
}

Just make sure your fonts are licensed for embedding.

Online eot converter: http://www.kirsle.net/wizards/ttf2eot.cgi