I really don't understand the need to float each star left and wrap them in a div with the inevitably required clear-block class. Both times we've tried to use this widget in a complex theme it has caused a ridiculous amount of pain. Sure we could probably override everything and change a whole heap of CSS, but surely it would be better to ship this module with a more simple, clean starting point?

Am I missing something re all the floating going on here?

Comments

chadchandler’s picture

chadchandler commented

I'll take a stab. The stars inside the div do need to be floated left so they sit side by side. Don't forget how many requests have been made for "3 stars" or "10 stars". If this were truly just a 5 star module, then the individual star floating would not be needed.

Basically, in order to cater to the masses (which is what open source does), this is the best solution.

You can of course do overrides if you like, and probably should.

quicksketch’s picture

quicksketch
he/him
commented

The floating is definitely necessary. Because the stars need to have background images adjusted on rollovers, they need to be display: block elements with height and widths set. The links can't be left in their 'inline' default display because the background images (stars) couldn't properly be rendered in the browser (you get cutoffs and a lot of other weirdness). While the clear-block class might not have been entirely necessary, it's now been there for a long time and I don't think we could possibly pull it out without breaking hundreds or thousands of sites that use Fivestar.

I did however remove some CSS from most pages by breaking out the admin CSS into fivestar-admin.css, so this slightly reduces code loaded on every page and makes it so that you could theoretically removed fivestar.css entirely and write your own, but I wouldn't really recommend doing so as it provides a good starting point to minimize CSS needed in your own theme.

quicksketch’s picture

quicksketch
he/him
commented
Title: theming issues » Excessive floating in Fivestar CSS?
Status: Active » Closed (fixed)

Updating title for posterity. Please reopen if you have any further questions on this topic.