View Full Version : Background positioning on Safari + IE - a:hover position

04-12-2009, 06:18 PM
Here's the code:

<style type="text/css">
@import url('http://manga2.vandeft.com/template/default/style.css');
<div id="toolbox">
<h2>Tool Box</h2>
<form method="post">

<label id="score"><a href="javascript:void(0);">Rating: <strong> 1</strong>/5 (1 vote)</a></label>
<label class="ratingblock">
<ul id="rate_ul_1" class="unit-rating" style="width:80px;">
<li id="scorelen" class="current-rating" style="width:16px;">1/5</li>
<li><a href="javascript: void(0);" title="1 out of 5" class="r1-unit rater" rel="nofollow">1</a></li>
<li><a href="javascript: void(0);" title="2 out of 5" class="r2-unit rater" rel="nofollow">2</a></li>
<li><a href="javascript: void(0);" title="3 out of 5" class="r3-unit rater" rel="nofollow">3</a></li>
<li><a href="javascript: void(0);" title="4 out of 5" class="r4-unit rater" rel="nofollow">4</a></li>
<li><a href="javascript: void(0);" title="5 out of 5" class="r5-unit rater" rel="nofollow">5</a></li>

<br class="spacer" />
<br class="spacer" />

So on Firefox (3.08) and Opera (9.64), I can view the star images pretty well; there's no error.

For Internet Explorer (8) and Safari (4 public beta), the star images are cut off. Plus, for Safari, the a:hover star images are pushed lower and hovering over them doesn't show stars 2+.

What's wrong and how do I fix it?

04-13-2009, 06:17 AM
Well if you could post the entire could I may be able to help more, however.. in your head(I'm not sure if you have this or not..) you need to put

<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;}

Hope this helps, if not can you post the link where I can see the issue?

04-14-2009, 05:16 AM
Compare it from Firefox to IE/Safari.

Adding that bit of CSS didn't help.

04-14-2009, 06:43 PM
Have a try by adding font-size:0; to your .unit-rating li a