Ahh CSS, I love to hate you

Most of my development issues are CSS based.
I feel comfortable developing with php and Mysql, but CSS still infuriates me.
Just when i feel i have got the hang of it, it comes back and bites.

I have a couple of CSS books which help, but i learn best by example.
If anyone can recommend some good tutorials i would appreciate it.:D

So. to my problem...

I am putting together a few sample pages, one of which is a rating tool, based on the spry widget.

I have the widget working OK, the rating is stored OK, and multiple votes are prevented.

In FF3 the prompt to click on the vote button once you have clicked on the rating image is where i want it, under the image, but in IE, it appears beside the image.

If anyone can help I would be grateful.

rating.php

Thanks again

I think you need to separate the stars and the vote message with some additional wrapper divs. I think IE is not working since you have all the stars floated, then an error message that is not floated. IE gets easily confused as we know! I would add a wrapper around the stars that is a normal block level div. Then the vote message should go under it as is since it appears to be block level already.

-justin

Hi Justin,

I replaced the 'after rating' message span tags with div's and got it to behave itself.

Thanks for your help with this.

I also made a couple of changes, adding a read only average rating.

A couple of things i notice.

1. Page height in IE(8) is much more than in FF
2. in IE (only), there is a black spot next to the image, don't know what the heck it is

- forget the dot, i know what it is !

i have updated the link

I would try "resetting" the margin/padding on some of your elements to help make the page height more consistent. Something like a <p> tag seems to have different margin/padding if you just leave it as default. It could be an issue like that with some tag just needing some more explicit CSS values.