cufon styling
- Started
- Last post
- 22 Responses
- Moo
Has anyone had a problem when applying cufon tool to a list menu (nav)??
I'm currently trying to apply it to an id #leftMenu ul li a but it doesn't seem to change anything
Any ideas peps?
Cheers
m00
- shitehawke0
Try these:
Cufon.replace('#leftMenu ul li',{hover:true, hoverables:{a:true} });and in your css try this:
#leftMenu ul li a {
zoom: 1;}
- oh bless him.dropdown
- just for you doubleDshitehawke
- *high five.dropdown
- Moo0
cheers shitehawke tried that but not work
here is what the script looks like
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/Avenir_35_300.font.js" type="text/javascript"></script>
<script src="scripts/Avenir_45_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('#leftMenu ul li',{hover:true, hoverables:{a:true} });
Cufon.replace('h4', { fontFamily: 'Avenir 45' });
</script>
- shitehawke0
Moo can I see your CSS?
- shitehawke0
Hang on, try this:
Cufon.replace('#leftMenu ul li a', {hover: true, fontFamily: 'Avenir 45' });
- shitehawke0
Moo, did you have any joy getting it to work?
- Moo0
css code
#leftMenu ul{
list-style: none;
}#leftMenu ul li{
background-image: url(../images/custom/left_tab_bk...
background-repeat: no-repeat;
background-position: left top;
padding: 16px 10px 0 22px;
margin: 0;
height: inherit;
text-decoration: none;
font-size: 19px;
color: #d2d2d2;
width: 192px;
}#leftMenu ul li a {
text-decoration: none;
margin-bottom: 21px;
color: #f4f4f4;
}Will give the new cufon code a go cheers shitehawke
- Moo0
no still not working
- shitehawke0
Moo, not sure why thats not working, heres a quick test I set up, have a goo at it and it might shed some light on your problem.
- Moo0
just had a look and it doesn't seem to have worked on your example either
- shitehawke0
Hmm, just checked it out too. Its workign fine for me, os x ff3. and IE8 on vista, but not FF or IE 6/7.
Well now thats a curious little bugger. What platform you on?
- XP/FF3 works, XP/IE8 works except underlineneverblink
- XP/Safari doesn't workneverblink
- testing it on IE6+ and ffoxMoo
- Hue0
<h1>Some Text here which should be in Flama Bold in black</h2>
unmatched tag, anything to do with this?- yeah thats my sloppy 'slap something together' coding.shitehawke
- Moo0
just had a look in serfi and it seem to work but no in anything else
- shitehawke0
Well that was a dilly of a pickle.
I put jquery in there too and wrapped the cufon call inside a doc ready function and it seems to display fine on IE 6/7/8 & FF3 on vista and FF3 and safari on OSX.
Maybe the cufon call just can't handle the reference of a div in there too or perhaps it needs another global div reference.
Same link, just updated. This any good moo?
- kult0
Works fine for me on Firefox in Vista.
- Moo0
your example seems to be working now in ie7
- shitehawke0
Yeah did a bit of reseach and it appears to need the framework (such as jquery or mootools etc) to get it to select div type content as opposed to formatting tags such as h1, p, etc.
Tried using just li, such as:
Cufon.replace('li', {hover: true, fontFamily: 'Avenir 45' });
and it seems to work fine, but when you reference such an item in a specific div it throws a wobbly in IE.
- Moo0
hahaha im going mad now i have it working its changing all of the list menu and becuase the menu is generated from the database it a little hard to code seperate areas thanks for the help shitehawke
- shitehawke0
Urk! Well just stick with it chief, I just spent the morning trying to get several png-transparency fixes to work in IE only to realise I hadn't put the proper url into the replacement code. bastard!
- Moo0
im currently doing the same have you been able to fix that as well?? trying to get a png background image to work in ie6 but i've had no success with it
- shitehawke0
hahaha, yeah I got it working fine. I used this chap here: http://www.twinhelix.com/css/iep…
After looking at a few others this was what I eventually got working, however I reckon that was due to my url bumbling.
If you do use that one, when chaning this line of code in the .HTC file:
var blankImg = '/images/blank.gif';just be aware that the url is how it relates to the html page calling the file. I was putting this into a CMS and getting stupid results, because I was putting the wrong url in there. I had "pics/blank.gif" thinking that would work but when looking at how the rest of the images were getting rendered it should have been "/themes/theme-name/pics/blank.g...
This one line fucked up my head for about 2 hours.