5 Star Content Rating System

Topics: ASP.NET 2.0, Controls, Themes
May 19, 2012 at 9:01 PM

I have set up blogengine using the Alltuts theme and I am having a problem with the 5 star rating system.  The 5th star and the first letter of text are occupying the same space.  

http://www.cybercorpsoftware.com/Blog/Default.aspx

This line to include the rating system

@Html.Raw(Model.Rating) 

This in the style sheet

.ratingcontainer ul li{ margin-left:60px; float: right;  display: block; width:220px; margin-top:-14px;}

 

May 19, 2012 at 10:23 PM
Edited May 19, 2012 at 10:26 PM

I see that you are working on this now, it's a moving target.

Change
.rating p{display:inline;position:relative;top:14px;left:55px}

to

.rating p{display:inline;position:relative;top:14px;left:75px}


That will work for the way you have it positioned at the moment.

May 19, 2012 at 10:51 PM

I can move the rating container around on the page but no matter where I put it the 5th star always covers the first letter.  I have loaded other theme's and they work perfect so I think it has to be an issue with this theme's CSS file but I am having a hard time finding it.  This should be fairly straight forward so I might just have to use a different theme. 

May 19, 2012 at 11:16 PM
Edited May 19, 2012 at 11:24 PM

It is an issue with the CSS, the change I suggested above works.

For what you have now though, this is better.

.star-rating {position: relative;width: 125px;height: 25px;overflow: hidden;list-style: none;margin: 0;padding: 0;background-position: left top;left: -15px }

Find .star-rating in your stylesheet and add ;left: -15px to the end as shown above.

May 19, 2012 at 11:46 PM
Edited May 19, 2012 at 11:53 PM

I have tried everything I can think of using the information provided.  I am confused where you are getting the .rating and .star-rating from.  I did not find those two styles names in the directions and they were not in the css file that I got with the theme.  I got the .ratingcontainer from the source view, it is the style be applied to the div tag around the 5star.  

This is what I have tried

/* 5 Star Rating */

.rating p{display:inline;position:relative;top:14px;left:75px}

.star-rating{    position: relative;    width: 125px;    height: 25px;    overflow: hidden;    list-style: none;    margin: 0;    padding: 0;    background-position: left top ;    left: -15px}

I tried each of those individually and together.  I also tried 

.ratingcontainer{         position: relative;    width: 125px;    height: 25px;    overflow: hidden;    list-style: none;    margin: 0;    padding: 0;    background-position: left top ;    left: -15px    }

and

.ratingcontainer{         position: relative;    width: 125px;    height: 25px;    overflow: hidden;    list-style: none;    margin: 0;    padding: 0;    background-position: left top ;    left: -15px; display:inline; position:relative; top:14px; left:75px    }

 

Here is the current css file.

iframe#conash3D0{    display:none !important;    }/*Theme Name: AllTutsAuthor: Site5.comAuthor URI: http://gk.site5.com/t/237Description: Check <a href="http://wordpress.site5.net/alltuts/doc/">AllTuts Documentation</a> in case you need directions</a>.*/
/* -------------------------------BODY STYLES----------------------------------*/
* {  margin: 0;  padding: 0;}
body {  color: #333;  background:#f0f0f0 url(images/bk_body.png) repeat-x;  font-family:Arial, Helvetica, sans-serif;  font-size:13px;  line-height:135%;}
/*----------------------------------------------------BASIC HTML ELEMENTS STYLES------------------------------------------------------*/
a { color:#1FA2E1; text-decoration:none;}
a:hover {  text-decoration: underline;}
a:focus { outline:none;}
h1 { font-size:26px; letter-spacing:-1px; font-weight:normal; padding:10px 0 12px; line-height:100%; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
h1.home { color:#1FA2E1; font-size:30px;}
h1 a { color:#333; text-decoration:none;}
h1 a:hover { color:#1FA2E1; text-decoration:none;}
h2,h3 { font-size:22px; font-weight:normal; font-style:italic; letter-spacing:-1px; padding:5px 0;} 
h3{ font-size:17px; font-weight:bold;}

ul { list-style:none;}
p { margin:10px 0;}
/* -------------------------------LAYOUT STRUCTURE----------------------------------*/
#wrapper { width:960px; margin:0 auto;}#header { position:relative; height:185px; background:url(images/bk_header.jpg) 0 51px no-repeat;}
#content { padding:25px 0;}
#content #colLeft { float:left; width:670px; margin-right:10px;
}
#content #colRight { float:left; width:280px; }
#footer { background:#000 url(images/bk_footer.jpg) 0 0 repeat-x; padding-top:20px; padding-bottom:25px; margin-top:5px; min-width:960px;}
#footerInner { width:960px; margin:0 auto; color:#797979;}
#copyright { border-top:1px solid #1E1E1E; background:#111; min-width:960px;}
#copyrightInner{    width: 960px;    margin: 0 auto;    font-size: 11px;    color: #515151;    padding: 25px 0 15px 0;    position: relative;}

/* -------------------------------HEADER ELEMENTS----------------------------------*/
/* TopMenu */
.ddsmoothmenu { position:absolute; left:0; top:6px; border-right:1px solid #2F2F2F;}
.ddsmoothmenu ul li { float:left;}
.ddsmoothmenu ul li a{ display:block; color:#ccc; text-decoration:none; border-left:1px solid #2F2F2F; height:42px; line-height:42px; text-transform:uppercase; font-size:11px; padding:0 12px;}
.ddsmoothmenu ul li a:hover { color:#FFFFFF; background:url(images/bk_top_hover.png) 50% 0 no-repeat;}
/* TopMenuRight */
#topMenuRight { position:absolute; right:0; top:6px;}
#topMenuRight ul li { float:left;}
#topMenuRight ul li a{ display:block; color:#ccc; text-decoration:none; height:42px; line-height:42px; font-size:11px; padding:0 8px; background:url(images/list_red_bullet.png) 1px 50% no-repeat;}
#topMenuRight ul li a:hover { color:#FFFFFF;}
/* Logo */
#logo { position:absolute; left:0; top:76px;}#logo h1{    font-size:42px;    font-weight:bold;    margin-left:10px;}#logo img { border:none;}
#logo span { display:block; padding-left:5px; padding-top:5px; text-transform:uppercase; color:#999999; font-size:12px; margin-top:-20px; margin-left:5px;}
/* Social Links */
#socialLinks { position:absolute; right:0; top:105px; background:url(images/bk_social_links.png) 0 50% no-repeat; padding-left:155px; height:42px;}
#socialLinks .linkedin, #socialLinks .facebook, #socialLinks .twitter, #socialLinks .rss { display:block; width:32px; height:32px; float:left; margin-left:5px; text-indent:-9999px;}
#socialLinks .linkedin:hover, #socialLinks .facebook:hover, #socialLinks .twitter:hover, #socialLinks .rss:hover { margin-bottom:2px;}
#socialLinks .linkedin { background:url(images/ico_linkedin.png) 0 0 no-repeat;}
#socialLinks .facebook { background:url(images/ico_facebook.png) 0 0 no-repeat;}
#socialLinks .twitter { background:url(images/ico_twitter.png) 0 0 no-repeat;}
#socialLinks .rss { background:url(images/ico_rss.png) 0 0 no-repeat;}
/*----------------------------FOOTER ELEMENTS------------------------------*/
#footer h2 { font-weight:bold; color:#ccc; font-size:18px;}
#footerInner { overflow:hidden; padding-bottom:10px;}
#footerInner .boxFooter { float:left; width:290px; padding-right:30px;}
#footerInner .last { padding-right:0;}
#footerInner h2 { font-size:20px; border-bottom:1px solid #292929; padding:7px 0; margin-bottom:7px;}
#footerInner .boxFooter ul li { padding:5px 6px 5px 18px; border-bottom:1px solid #292929; background:url(images/star.png) 0 8px no-repeat; color:#986123; font-size:10px; font-style:italic;}
#footerInner .boxFooter ul li br { line-height:5px;}
#footerInner .boxFooter ul li a { text-decoration:none; color:#515151; font-size:13px; font-style:normal;}
#footerInner .boxFooter ul li a:hover { color:#ccc;}
#site5bottom { position:absolute; right:5px; top:13px;}
#site5bottom img { border:none;}

/*----------------------------LEFTCOL ELEMENTS------------------------------*/
.postBox { margin-bottom:0px;    /*background: url("images/bk_box_mid.png") repeat-y scroll 0 0 transparent;*/}
.postBoxTop { height:5px; width:668px; background:url(images/bk_box_top.png) 0 0 no-repeat;
}
.postBoxBottom { height:5px; width:668px; background:url(images/bk_box_bottom.png) 0 0 no-repeat; position:relative;}
.postBox .postBoxMid { padding:0 5px; background: url("images/bk_box_mid.png") repeat-y scroll 0 0 transparent;}
.postBox #contact, .postBox #page, .postBox #archive { padding:20px 40px; background: url("images/bk_box_mid.png") repeat-y scroll 0 0 transparent;}
.postBox .postBoxMid p{ line-height:145%;}
.postBox .postBoxMid img { border:none;}

.postBox .postBoxMidInner { padding:20px 40px; position:relative;}
.postBox .first { background:url(images/bk_box_mid_inner.jpg) 0 0 no-repeat;}
.postBoxMid .category { background:url(images/star.png) 0 50% no-repeat; padding:0 0 0 20px; text-transform:uppercase; font-size:11px; line-height:100%; color:#ccc; font-weight:bold; }
.postBox .postBoxMid .date { background:url(images/bk_date.png) 0 0 no-repeat; width:62px; height:89px; left:-34px; top:13px; text-align:center; position:absolute; font-size:11px; color:#C5ECFC; padding-top:17px;}
.postBox .postBoxMid .date span.day { font-size:24px; font-weight:bold; text-shadow:1px 1px #157EC4; color:#fff;}
.postBox .postBoxMid .textPreview { float:left; width:350px; margin-top:15px;
}
.postBox .postBoxMid .textPreview p{ margin-top:0; }
.postBox .postBoxMid .postThumb{ float:left; margin:15px 25px 25px 0; width:201px; overflow:hidden;}
.postBox .postBoxMid .postThumb img{ border:none; background:#F0F0F0; padding:10px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.postBox .postBoxMid .postMeta { border-top:1px solid #E2E2E2; padding-top:20px; margin-top:25px; clear:left; overflow:hidden;}
.postBox .postBoxMid .postMeta .more-link { display:block; background:url(images/ico_readmore.png) 0 0 no-repeat; padding:3px 0; padding-left:35px; font-size:14px; font-weight:bold; float:left; }
.postBox .postBoxMid .postMeta .metaRight { float:right;}
.postBox .postBoxMid .commentImage { vertical-align:middle; margin-left:20px;}
.postBox .postBoxMid .postMetaSingle { border-bottom:1px solid #E2E2E2; padding:5px 0 15px; margin-bottom:20px;}
.postBox .postBoxMid .postMetaSingle img, .postBox .postBoxMid .metaRight img { vertical-align:middle;}
.postBox .postBoxMid .postCredentials, .postBox #relatedPosts { background:#F8F8F8; border-top:3px solid #E2E2E2; border-bottom:3px solid #E2E2E2; padding:20px 40px 15px; margin-right:2px; overflow:hidden; text-shadow:1px 1px #fff;}
.postBox .postBoxMid .postCredentials p { font-size:12px; color:#666; margin:0.6em 0;
}
.postBox .postBoxMid .postCredentials img { float:left; margin-right:10px; padding:4px; background:#fff; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.postBox .postBoxMid .postCredentials #authorDetails { clear:both; padding-top:15px; overflow:hidden; border-top:1px solid #ddd;}
.postBox .postBoxMid .postCredentials #authorDetails img { margin-bottom:15px;}
/* POST SOCIAL SHARE */
.postBox .postBoxMid .postCredentials .social { margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid #ddd;}
.postBox .postBoxMid .postCredentials .social a:hover img { margin-top:-4px; }
.postBox .postBoxMid .postCredentials .social img { border:none; vertical-align:middle; float:none; background:none; padding:0; margin-right:5px;}
.postBox .postBoxMid .postCredentials .social strong { padding-right:20px; }
.postBox .postBoxMid .postTags { font-size:13px;  background:url(images/ico_tag.png) 0 50% no-repeat; padding-left:24px; margin:25px 0 0;}

/* ----------------------------------5 Star Rating  - This section applies----------------------------------------- */

/*.ratingcontainer{         margin-left:60px;     float: right;      display: inline;     position: relative;    width:220px;     margin-top:-14px;        position: relative;    width: 125px;    height: 25px;    overflow: hidden;    list-style: none;    margin: 0;    padding: 0;    background-position: left top ;    left: -15px    }    */

.rating p{display:inline;position:relative;top:14px;left:75px}

.star-rating{    position: relative;    width: 125px;    height: 25px;    overflow: hidden;    list-style: none;    margin: 0;    padding: 0;    background-position: left top ;    left: -15px}


/* RELATED POSTS */
#content #colLeft .postBox #relatedPosts { margin-left:4px;}
#content #colLeft .relatedPosts li { display:block; border-top:1px solid #ddd; padding:15px 0; width:275px; float:left; margin-left:25px; font-weight:bold; background:none;}
#content #colLeft .relatedPosts li img { float:left; padding:5px; background:url(images/bk_thumbs.jpg) 0 0 no-repeat; margin:0 10px 0 0;}
#content #colLeft .relatedPosts li span { font-size:11px; color:#999;}
#archive-title { font-size:14px; padding:3px 0 15px;}
blockquote { border-left:1px dashed #aaa; padding-left:20px; margin:20px 0 15px 20px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; background:url(images/bk_blockquote.jpg) 90% 0 no-repeat;}
#content #colLeft ul li, #content #colLeft ol li  { padding:5px 0 5px 15px; background:url(images/bullet_list.png) 0 9px no-repeat;}
#content #colLeft ul { margin:0 0 15px 15px;}
#content #colLeft ol li { background:none; padding-left:0;}
#content #colLeft ol { margin:0 0 15px 35px;}

/* --------------------------------RIGHTCOL ELEMENTS-----------------------------------*/
.rightBox { margin-bottom:10px;}
.rightBoxTop { height:5px; width:280px; background:url(images/bk_box_top_right.png) 0 0 no-repeat;
}
.rightBoxBottom { height:5px; width:280px; background:url(images/bk_box_bottom_right.png) 0 0 no-repeat;}
.rightBox .rightBoxMid { padding:50px 20px 15px; background:url(images/bk_box_mid_right.png) 0 0 repeat-y; position:relative;}
.rightBox .rightBoxMidSearch { padding:6px 10px 5px; background:url(images/bk_box_mid_right.png) 0 0 repeat-y; overflow:hidden;}
.rightBox .rightBoxMid h2 { font-size:14px; font-weight:bold; letter-spacing:0; color:#fff; text-transform:uppercase; display:block; background:url(images/bk_h2_right.png) 0 0 no-repeat; width:284px; height:43px; position:absolute; top:6px; left:-2px; padding:10px 15px 0 20px;}
.rightBox .rightBoxMid ul li{ padding:5px 0; border-bottom:1px solid #E2E2D8;}.widget a{    margin-top:10px;}#footerInner .widget .recentcomments ul{    margin-bottom:10px;}/* Latest Tweet */
#twitter { margin-left:4px;}
#twitter #twitter_update_list { background:url(images/bk_twitter_box_top.png) 0 0 no-repeat; padding:3px 15px 0; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; font-style:italic; line-height:125%; color:#666;}
#twitter #twitter_update_list li{ list-style-type:none; padding-top:10px;}
#twitter #bottom { height:36px; background:url(images/bk_twitter_box_bottom.png) 0 0 no-repeat; padding-left:63px; padding-top:45px; font-weight:bold;}
/* ADS */
.rightBox .rightBoxMidAds{ padding:6px 0; background:url(images/bk_box_mid_right.png) 0 0 repeat-y; position:relative;}
.rightBox .rightBoxMidAds div div { margin:0 0 6px 5px; float:left;}
.rightBox .rightBoxMidAds div div a img { border:1px solid #D8D8D8; }
.rightBox .rightBoxMidAds a.advertise { display:block; padding:0 10px 6px 15px; clear:both; font-weight:bold;}
/* COMMENTS-----------------------------------*/
h3#comment{ display:block; padding:20px 40px; position:relative; font-size:22px; font-weight:normal; background:#ffffff; margin-left:5px; margin-right:5px;}h3#addcomment{    display:block; padding:20px 40px; position:relative; font-size:22px; font-weight:normal; background:#ffffff;}h2.h2comments a.addComment { display:block; width:151px; height:30px; background:url(images/but_addcomment.png) 0 0 no-repeat; text-transform:uppercase; color:#fff; text-align:center; float:right; font-size:12px; margin-top:-7px; padding-top:8px; font-weight:bold;}
h2.h2comments a.addComment:hover { text-decoration:none;}
h3#commentsForm { margin:0; padding-top:0;}
#contact, #archive, #page, .searchpage.post, .post.error404, .post{    list-style: none;    list-style-position: outside;    display: block;    margin: 0;    padding: 20px 40px 20px 40px;    position: relative;
}#content #colLeft #commentlist{    list-style: none;    list-style-position: outside;    display: block;    padding: 0px 40px 10px 40px;    position: relative;    background: #ffffff;    margin-left:5px; margin-right:5px; border-bottom: 3px solid #e2e2e2;}
#content #colLeft #comment-form{    list-style: none;    list-style-position: outside;    display: block;    margin: 0;    position: relative;    background: #ffffff;    margin-left:5px; margin-right:5px;}#comment-form ul#commentMenu{    margin-bottom:0px;}.comment{    padding-top:15px;    padding-bottom:0;    /*border-bottom:1px solid #e5e8ea;*/    border-top:3px solid #e5e8ea;    padding-left:15px;}
.comment.self{    background-color: #d9ffd9;     background: -webkit-gradient(linear, left top, left bottom, from(#d9ffd9), to(#ffffff));     filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#d9ffd9', gradientType='0');     background:-moz-linear-gradient(top, #d9ffd9, #FFFFFF);     background:-ms-linear-gradient(top, #d9ffd9, #FFFFFF);     background:-webkit-linear-gradient(top, #d9ffd9, #FFFFFF);     background:-o-linear-gradient(top, #d9ffd9, #FFFFFF);}
.comment .comment-content{ background:none; padding:0 0 0 40px;}
.comment .photo { background: none repeat scroll 0 0 #FFFFFF; padding:1px; border:4px solid #eee; position:absolute;}.comment .comment-meta, .comment .text  { margin-left:20px; }.comment .comment-meta span { font-size:11px; color:#999;}.comment-meta { font-size:16px;}.comment .comment-replies{ overflow:hidden; padding-bottom:0; border-bottom: 0px;}.comment-content .reply-to { position:absolute; width:46px; height:21px; /*background:url(images/bk_link_reply.png) 0 0 no-repeat;*/ text-align:center; font-size:10px; text-indent:-9999px; float:right; right:45px; color:#000000;}
.comment-content .reply-to a{    display:block; width:46px; height:21px;}/*

#content #colLeft ul.commentlist .reply a { color:#FFF; display:block; width:46px; height:21px;}



#content #colLeft div#commentlist li .children li .photo { top:15px;}
#content #colLeft ul.commentlist li .children li .reply { top:15px;}*/


/* --------------------------------FORMS-----------------------------------*/#searchbox #searchfield { border:1px dashed #CDCDCD; border-right:none; width:169px; background:none; padding:8px 10px 7px; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color:#666666; font-style:italic; float:left; margin-top:1px;}
#searchbox #searchbutton { width:70px; height:39px; background:url(images/bk_but_search.jpg) 0 0 no-repeat; border:none; padding:0; margin-top:-2px; font-size:0px; -moz-border-radius:0px; -webkit-border-radius:0px; -khtml-border-radius: 0px; border-radius:0px;}
/* COMMENTS F0RM */#comment-form{}.commentForm p{    padding: 0px 40px 0px 40px;    font-size: 13px;    font-weight: normal;    display: block;}.commentForm #commentPreview p{    padding:0;}.commentForm #commentPreview{    margin-bottom:10px;    border-bottom:solid 3px #e2e2e2;}.commentForm #commentCompose, .commentForm #commentPreview{    margin-left:40px;    margin-right:40px;}#comment-form ul#commentMenu{    margin-left:55px;}.commentForm label { display:block; padding:5px 0;}
.commentForm input, .commentForm textarea { border:1px solid #ddd; padding:8px; margin-bottom:10px;   -moz-border-radius:4px;   -webkit-border-radius:4px;}.commentForm input{ width:300px; }
.commentForm input:focus, .commentForm textarea:focus { border:1px solid #0099FF;}
.commentForm input#submit{ border:none; width:151px; height:30px; margin-top:10px; cursor:pointer; background:url(images/but_addcomment.png) 0 0 no-repeat; color:#FFF; font-weight:bold; font-size:12px; padding:0;}

/* Contact Form */
#contact label { display:block; padding:5px 0;}
#contact input, #contact textarea { border:1px solid #ddd; padding:8px; width:300px; margin-bottom:10px;   -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}
#contact textarea { width:560px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#contact input.submit{ border:none; width:151px; height:30px; margin-top:10px; cursor:pointer; background:url(images/but_addcomment.png) 0 0 no-repeat; color:#FFF; font-weight:bold; font-size:12px; padding:0;}
.errormsg, .successmsg{ background:#FEF4F1; border:1px solid #F7A68A; color:#DA4310; padding:10px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}
.successmsg { background:#F5FAF1; border:1px solid #C2E1AA; color:#8FA943;-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}
/* -------------------------------CLEARING----------------------------------*/
.clearfix:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;  overflow: hidden;  float: none;}
.clearfix {   display: block;  }

/* Hide from IE-mac \*/* html .clearfix { float: left; height: 1%; }/* End hide from IE-mac */
/* -------------------------------BE Specific styles----------------------------------*/.widget .rightBoxMid ul li a img{    display:none;} .tagcloud ul{    padding-top: 10px !important;}.tagcloud li, .widget tagcloud .content ul li{    border-bottom-color:  !important;    border-bottom-width: medium !important;    border-bottom-style: none !important;    display: inline;}.tagcloud a.smallest{    font-size:100%;}.tagcloud a.small{    font-size:115%;}.tagcloud a.medium{    font-size:130%;}.tagcloud a.big{    font-size:145%;}.tagcloud a.biggest{    font-size:160%;}.categorylist ul#categorylist li  a img{    display:inline;    border:0px;    margin-right:10px;    vertical-align:middle;}ul.recentPosts li span{    display:none;}#content #colLeft div ul#PostPager{    text-align:center;    padding-top:10px;    padding-right:0px;    padding-bottom:0px;    padding-left:0px;    display:block;    margin:0;}#content #colLeft div ul#PostPager li{    list-style-type: none;    list-style-image: none;    list-style-position: inside;    background-image: none;    padding: 4px 8px;    margin: 0 5px 0 0;}#content #colLeft div ul#PostPager li.PagerLink, #content #colLeft div ul#PostPager li.PagerLinkDisabled{    background: url(images/bk_pagenavi.jpg) repeat-x 100%;    border: 1px solid #ddd;}#content #colLeft div ul#PostPager li a{    text-align: center;    color: #666;    text-decoration: none;}#content #colLeft div ul#PostPager li.PagerLinkCurrent{    background-color:rgb(24,174,245);    border:#0a95d8;    font-weight:bold;}#monthList li{    border:0px;}#monthList li ul{    margin-left:15px;}.postBox #relatedPosts {    margin-left:4px; background:#F8F8F8; border-top:3px solid #E2E2E2; border-bottom:3px solid #E2E2E2; padding:20px 40px 15px; margin-right:6px; overflow:hidden; text-shadow:1px 1px #fff;}.postBox #relatedPosts p{  font-size:22px; font-weight:normal; font-style:italic; letter-spacing:-1px; padding:5px 0;}.postBox #relatedPosts div{    margin-left:-25px;}.postBox #relatedPosts div a{ display:block; border-top:1px solid #ddd; padding:15px 0; width:275px; float:left; margin-left:25px; font-weight:bold; background:none;}.postBox #relatedPosts div span{display:none;}.postBox #comment-form{    position: relative;}#comment-form .commentForm input, #comment-form .commentForm select{ width:300px; margin-bottom:10px; border:1px solid #ddd; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}
#comment-form .commentForm input:focus, #comment-form .commentForm textarea:focus { border:1px solid #0099FF;}
#comment-form .commentForm textarea { width:95%; margin-bottom:10px; border:1px solid #ddd; padding:8px; -moz-border-radius:5px;  -webkit-border-radius:5px;  -khtml-border-radius: 5px;  border-radius:5px;}
.comment-content #comment-form{    background:none;}
#comment-form .commentForm input[type='button']{ border:none; width:151px; height:30px; margin-top:10px; cursor:pointer; background:url(images/but_addcomment.png) 0 0 no-repeat; color:#FFF; font-weight:bold; font-size:12px; padding:0;}#comment-form .commentForm ul#commentMenu{    list-style-type: none;    list-style-image: none;    list-style-position: inside;}#comment-form .commentForm ul#commentMenu li{    background-color: #D8D8D8;    border-color: #C2C2C2;    border-style: solid;    border-width: 1px;    cursor: pointer;    float: left;    list-style: none outside none;    margin: 0 5px 0 0;    padding: 3px 8px;    position: relative;    top: 2px;    margin-bottom: 1px;    background-image:none;    -moz-border-top-left-radius:5px;    -moz-border-top-right-radius:5px;     -webkit-border-top-right-radius:5px; -khtml-border-top-right-radius: 5px;      -webkit-border-top-left-radius:5px; -khtml-border-top-left-radius: 5px;      border-top-left-radius:5px;     border-top-right-radius:5px;}
#comment-form .commentForm ul#commentMenu li.selected{    background-color: white;    border-bottom: 1px solid white;    background-image:none;}
#comment-form .commentForm .bbcode{    float: right;    font-size: 10px;    padding: 0px 18px 5px 0;    position: relative;    margin-right:80px;}.bbcode a{    background-color: #FFFFFF;    border: 1px solid #CCCCCC;    padding: 5px;    margin-left:5px;    -moz-border-radius:5px;     -webkit-border-radius:5px; -khtml-border-radius: 5px;      border-radius:5px;}#comment-form .commentForm .bbcodeNoLivePreview { top: 0;}
#commentPreview{ display:none; clear:both; min-height: 170px;}.rightBoxMid .delete{    color:rgb(24, 174, 245);    display:block;    float:right;    top:15px;    right:10px;    font-weight:bold;    position:absolute;    z-index:2;}.rightBoxMid .edit{    color:rgb(24, 174, 245);    display:block;    float:right;    top:15px;    right:25px;    position:absolute;    z-index:2;}.rightBoxMid .move{    color:rgb(24, 174, 245);    display:block;    float:right;    top:15px;    right:55px;    position:absolute;    z-index:2;}#footerInner .widget .delete{    color:rgb(24, 174, 245);    float:right;    top:5px;    right:10px;    font-weight:bold;    position:relative;    z-index:2;}#footerInner .widget .edit{    color:rgb(24, 174, 245);    float:right;    top:5px;    right:20px;    position:relative;    z-index:2;}#footerInner .widget .move{    color:rgb(24, 174, 245);    float:right;    top:5px;    right:35px;    position:relative;    z-index:2;}.widget.blogroll .rightBox .rightBoxMid a img{    border:0px;}.widget.blogroll .rightBox .rightBoxMid a img{    border:0px;}
#archive h2{        font-size: 15px !important;    margin: 0 0 10px !important;    font-weight:bold;}#archive h2 a img{    display:inline;    margin-right:5px;    border:0px;}#archive table{    width:99%;    border-collapse:collapse;    margin-bottom:20px;}#archive table th{    border-bottom: 1px solid #000;}#archive td.date, #archive td.comments{    width: 90px;    text-align:center;    font-size:12px;}#archive td.title{    font-size:12px;}#archive ul{    margin-top:15px;    margin-bottom:30px;    margin-left:20px;}/*---------------------------- Month list----------------------------*/
#monthList li{ font-weight: normal;}
#monthList .year{ cursor: pointer; font-weight: bold;}
#monthList .year li{ margin-left: 5px;}
#monthList ul{ display: none;}
#monthList .open{ display: block;}#footerInner .widget h4{    font-size:20px; border-bottom:1px solid #292929; padding:7px 0; margin-bottom:7px;
}#footerInner .widget ul li { padding:5px 6px 5px 6px; border-bottom:1px solid #292929; /*background:url(images/star.png) 0 8px no-repeat;*/ color:#986123; font-size:10px; font-style:italic;}#footerInner .widget ul li a { text-decoration:none; color:#515151; font-size:13px; font-style:normal;}
#footerInner .widget ul li a:hover { color:#ccc;}#footerInner .widget { float:left; width:290px; padding-right:30px;}#footerInner .widget.blogroll a img, #footerInner .widget.recentcomments a img { border:none;}.widget.blogroll .content a img,#footerInner .widget ul.xoxo li a img{ display:none;}.widget.blogroll ul.xoxo li ul{    display:none;}
#recaptcha_placeholder{    margin-bottom:20px;}.snap_preview p{    margin-bottom:0px;}.searchresult, .searchresult a, .searchresult .url, .searchresult .type{    display:block;}.searchresult{    padding-bottom:5px;    margin-bottom:20px;    border-bottom: 2px solid #e5e8ea;}.searchresult .url{    color:Green;}.searchresult a{    font-size:16px;}.searchresult .text, .searchresult .type, .searchresult .url{    font-size:12px;}#searchpage{    margin-bottom:40px;}#searchpage #q { border:1px dashed #CDCDCD; border-right:none; width:300px; background:none; padding:8px 10px 7px; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color:#666666; font-style:italic; float:left; margin-top:1px;}#searchpage input[type='button'] { width:70px; height:39px; background:url(images/bk_but_search.jpg) 0 0 no-repeat; border:none; padding:0; margin-top:-2px; font-size:0px;}select.widgetselector, #moveWidgetToContainer select{ width:200px; margin-bottom:10px; border:1px solid #ddd; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}#colRight input[type='button'], #footerInner input[type='button']{    border:1px solid #ddd; padding:8px; width:40px;   -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}#newsletterform input{ width:220px; margin-bottom:10px; border:1px solid #ddd; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius: 5px; border-radius:5px;}#newsletterform input[type='submit']{    width:100px;}.post.error404 hr{    height:2px;    background-color:#e5e8ea;    color:#e5e8ea;    margin-top:20px;    margin-bottom:20px;    border:0px;}#moveWidgetToContainer input[type='button']{    width:50px;    margin-left:10px;}

May 20, 2012 at 12:41 AM

Yes, CSS can be a little frustrating at times.

When I bring your site up in a browser, Chrome for example, I can inspect the elements and manipulate them (right click - Inspect element).

So that lets me make changes to the CSS, and I can see the effects immediately.

The styling for all the star ratings can be found in the folder "Styles" in the site root and its in the file "Global.css".

You can override these styles in your style sheet by adding rules with the same name.

For example, the .rating p rule for property left found in Global.css can be overridden

.rating p{ display: inline; position: relative; top: 14px; left: 55px;} in Global

by adding the following to the theme stylesheet .rating p{ left: 75px; }

Which means you can leave Global alone and tweak on a theme by theme basis.

May 20, 2012 at 1:20 AM

Getting late in this part of the world, so I'm off before the missus busts my chops.

You'll probably get this sorted, but if any probs, position the ratings where you want them and I'll post the fix tomorrow.

May 20, 2012 at 5:43 AM
Edited May 20, 2012 at 5:44 AM

Thanks for all the help.  I got it mostly where I wanted it.  Seems to be working fine in Chrome but Internet Explorer is still showing some wierd blue dots above the stars.  I will work on more tomorrow.  Here is what I did

 

/* 5 Star Rating */
.ratingcontainer
{ 
    float: right;  
    width:220px;  
   
}
.rating{
	margin-bottom: 10px;
}
.rating p{
	display: inline;
	position: relative;
	top: 14px;
	left: 65px;
}
.star-rating {
	position: relative;
	width: 50px;
	height: 10px;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	background-position: left top;
}
.star-rating li {
	display: inline;
}
.star-rating a, .star-rating .current-rating {
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -1000em;
	height: 25px;
	line-height: 25px;
	outline: none;
	overflow: hidden;
	border: none;
}
.star-rating a:hover, .star-rating a:active, .star-rating a:focus {
	background-position: left bottom;
}
.star-rating a.one-star {
	width: 20%;
	z-index: 6;
}
.star-rating a.two-stars {
	width: 40%;
	z-index: 5;
}
.star-rating a.three-stars {
	width: 60%;
	z-index: 4;
}
.star-rating a.four-stars {
	width: 80%;
	z-index: 3;
}
.star-rating a.five-stars {
	width: 100%;
	z-index: 2;
    padding-right:4px;
}
.star-rating .current-rating {
	z-index: 1;
	background-position: left center;
}
/* smaller star */
.small-star {
	width: 50px;
	height: 10px;
}
.small-star, .small-star a:hover, .small-star a:active, .small-star a:focus, .small-star .current-rating {
	background-image: url(../../pics/star_small.gif);
	line-height: 10px;
	height: 10px;
}
May 20, 2012 at 10:33 AM

Glad you're getting there.

The blue dots you see are fragments of blue arrows peeking through from behind the stars.

They come from this rule:

#content #colLeft ul li, #content #colLeft ol li  { padding:5px 0 5px 15px; background:url(images/bullet_list.png) 0 9px no-repeat;}

You should be able to get rid of them by making the following rule more specific and clearing the background;

.star-rating li {display: inline;}

Would become

#content #colLeft ul.star-rating li {display: inline; background: none;}

May 20, 2012 at 5:29 PM

That worked perfect.  Thank you for all the help.  Great job!