2

I am currently working on a appointment scheduling system which is having a section for reviews left for practices. I am using Jquery Rate plugin to populate the stars on the basis of feedback submitted by users. I have tried every single thing possible to align the stars with text and image. Please see the attached screenshot:

enter image description here

I am trying to have the stars under "Waiting Time" aligned with my image. The image is added to this page like this:

<%= image_tag("review_img_03.png",style:"margin:0px 4px 0px 4px;vertical-align:text-top") %>

Can somebody point me to the right direction how should I go about achieving this ? I have tried every single thing in CSS to accomplish this but none of them are working.

Any help would be highly appreciated.

Smoke
  • 1,052
  • 1
  • 10
  • 24
  • @Adrift: Mate I guess you misunderstood my question. I am not having any CSS for this. This is a simple raw implementation of jquery raty plugin and I want to customize it to appear right under "Waiting Time" instead of appearing below the image. Hope it makes sense now ? – Smoke Apr 03 '13 at 18:00

2 Answers2

2

Had the same problem my friend, found a fix. Do note, this is more of a hack than a fix, if you have a website that allows for dynamic text size (or if the user changes text size on the browser), then it may come out skewed.

On the actual jRate div (or whatever you have), use the vertical-align property to adjust it slightly. For my purpose:

#jRate {
      vertical-align: -3px;
}

Works like a charm.

Support in all browsers.

Kyle Hawk
  • 429
  • 4
  • 16
0

Have you tried using absolute positioning?

Style = "position:absolute; top:-5px;left:15px;"

Just adjust the top, and left values to get the star where you want.

If you make the position absolute, the parent element must have position = relative. Other wise the stars will align to the body of the page.

  • After adding position relative to the parent element and adding your code to the raty div the stars completely disappeared from the page. – Smoke Apr 03 '13 at 18:06
  • Can you add the surrounding code? And also a link to the plugin? –  Apr 03 '13 at 18:11