Looks more like a CSS issue. Something in your theme is likely floating the <a> tag to the right or causing it to not float at all. The javascript looks fine, as the partial star is properly 25%, the CSS positioning is just off.

Correct. I realize this. I just don't know where to start in the css. Could you take a look at it? Would I find the "float:" or fix the "float:" issue in the widgets/ folder of the module or would this be something I would have to apply from the theme css -- obviously I could use either one -- but where to begin... that is the question.... I need some sort of a try from someone. I have tried sever different moves or tweaks on the code (css) and have not gotten far at all. Here's the css for the widget in case you care to give it a shot -- I would appreciate it if you did, I can't seem to get it working...

(I need something to work with even if it's a mistake...)

» Respectfully, GreenLED
» Stable Files . net

Does it work if you use the provided stars? Example, the default red stars?

The problem isn't with the CSS included with the module, it's some CSS in your theme or another module that's causing the weirdness. Also, if you're overriding the CSS in your theme anyway (it looks like you are to make those blue stars), you'd be better off using the "default" set of stars that adds the least amount of CSS to the page. Any widget set besides the default adds a good chunk of unnecessary CSS if you're going to be setting it in the theme anyway.

Well -- I have to insist on using those stars because the whole point of having all of these wonderful tools is that you can customize them. So, here's my question to you... That css is based on the craft widget, which had all different stars originally. All I did was change the css and have only one type of star (per state, hover, off, on, etc). So, Let's say that someone had ONE star (a 32 x 96 png) and they wanted to use that ... what widget would be best to replace only the image with... in other words ... what would be the best way to rebuild or build a widget based on a custom star... because seriously no one wants to just have the "default" or provided widgets -- at least I don't believe advanced developers do. So, what would you say would be the best route to do this? -- or could you look at my css in my site to find out which setting would fix it for a fee or something. This is something I cannot be without or compromise on. I have to have this working with that star image. What's your thoughts on this? Thanks in advance.

P.S. I would be and WILL write an extremely well documented tutorial or guide which you can use in your module explaining how to do what I've just asked in exchange for the help if you'd like. I would be more than happy to do that and that would be something you could add into your module that would make it more valuable and well worth downloading and using -- (tolls eyes) as if it isn't already . . . by far one of my favorite modules, because of the widgets functionality and simplicity.

» Respectfully, GreenLED
» Stable Files . net

Hope to hear back from you soon. I'm in a bit of a rush to get that done. Listen though -- I'm not rushing you here, lol ... Just informing you. Later.

» Respectfully, GreenLED
» Stable Files . net

Again, see post 3.

I like the "minimal" widget to start with. It's extremely simple and shows you exactly what you need to over-ride to make a complete star set. I put together "craft" as a sort of proof-of-concept of how you can have different icons for each star, and how you can have it display differently when using 5 or some other number of stars. Compare your CSS above with this much simpler file:

All that you need to tell Fivestar is the size of your stars (width and height), the background image, and then offsets for each state. However, this doesn't have much to do with the original issue, which is something is floating the partial star in your theme to the right. Again, it's something in your theme or in another module that's causing this behavior, not CSS provided by Fivestar (or the modified CSS you've made for your widget).

Ok, so can't I just insert a "float: left;" bit into my modified css then? Isn't that the answer? But where to insert it -- ?

» Respectfully, GreenLED
» Stable Files . net

Bingo!

You guys where on the right track --- but it was NOT anything to do with float. Well, sort of -- it was a "text-align: center;" attribute I had placed on the whole div containing the widget which was "floating" the star in the wrong place. I have changed it from the whole widget to the following for others reference . . .

The thing that is weird about this "glitch" is that it does NOT appear in Firefox. Firefox displays everything perfectly -- that is weird. Anyways -- problem solved! Thanks a million guys. I think I'd still like to create a document on how to create custom widgets -- it really is rather important to people I think. After-all, you don't want your widget looking like the default all the time -- that takes no work. Well, I like things CUSTOM I guess.

» Respectfully, GreenLED
» Stable Files . net

GreenLED, I'd encourage you to update the existing documentation for creating a set under http://drupal.org/handbook/modules/fivestar. The current docs mostly deal with creating the images, and not so much with the CSS.

If you'd like to edit the page directly, file an issue at the Docs Team queue: http://drupal.org/project/issues/documentation. And just say you want to update the Fivestar docs and ask nicely :)

Automatically closed -- issue fixed for two weeks with no activity.