IE6, IE7, FF2 CSS improvements

Jul 1, 2011 at 8:05 PM
Edited Jul 1, 2011 at 8:09 PM

When rateit is inside a container with "text-align: right", things break in IE6 due to the lack of support for inline-block. The following changes fix the issue.

These three browsers don't exactly like inline-block so much. The following rules should be added after "div.rateit div.rateit-range {...}":

* html div.rateit, * html div.rateit div.rateit-range { display:inline; }  /* for IE 6 */*
+ html div.rateit, * + html div.rateit div.rateit-range { display:inline; }  /* for IE 7 */

For FF2, you can add "display: -moz-inline-box" above "display: inline-block":

div.rateit
{
display: -moz-inline-box;
display: inline-block;
position: relative;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}

div.rateit div.rateit-range
{
position: relative;
display: -moz-inline-box;
display: inline-block;
background: url(star.gif);
height: 16px;
}

Thanks for the awesome stuff! 

Coordinator
Jul 1, 2011 at 9:48 PM
Thank you for your contribution, just what was missing. I'll add it to RateIt in the coming days.

Gidon

On 1 ביול 2011, at 22:05, "troymccabe" <notifications@codeplex.com> wrote:

From: troymccabe

When rateit is inside a container with the text-align specified to the right, things break in IE6 due to the lack of support for inline-block. The following changes fix the issue.

These three browsers don't exactly like inline-block so much. The following rules should be added after "div.rateit div.rateit-range {...}":

* html div.rateit, * html div.rateit div.rateit-range { display:inline; } /* for IE 6 */*
+ html div.rateit, * + html div.rateit div.rateit-range { display:inline; } /* for IE 7 */

For FF2, you can add "display: -moz-inline-box" above "display: inline-block":

div.rateit
{
display: -moz-inline-box;
display: inline-block;
position: relative;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}

div.rateit div.rateit-range
{
position: relative;
display: -moz-inline-box;
display: inline-block;
background: url(star.gif);
height: 16px;
}

Thanks for the awesome stuff!