Page 1 of 1

Major CSS Bug in Firefox

Posted: Sun Jul 06, 2014 8:12 am
by chris98
I'm working on a rating script and in most major browsers, it appears fine, but in firefox, there is a major bug. I'm not even going to try and describe it, I'll post a screenshot of it so you can see better. This is the first time I've combined images into the same file and find it very confusing, can someone give me a hint as to where this is happening?

Code: Select all

.rating:not(old) {
	display:inline-block;
	position:relative;
	height:25px;
	background:url(images/stars.png) repeat-x 0 0;
	vertical-align:bottom;
}
	.rating:not(old) div {
		float:left;
		position:relative;
	}
	.rating:not(old) input {
		position:relative;
		z-index:1;
		width:25px;
		height:25px;
		margin:0;
		padding:0;
		opacity:0;
		vertical-align:bottom;
	}
	.rating:not(old) label {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:25px;
	}
	.rating:not(old) span {
		display:none;
	}
		.rating:not(old) input:checked+label,.rating:not(old):hover input:checked:hover+label {
			background:url(images/stars.png) repeat-x 0 -25px;
		}
	.rating:not(old):hover input:checked+label {
		background:0 0;
	}
	.rating:not(old):hover input:hover+label {
		background:url(images/stars.png) repeat-x 0 -50px;
	}
.nostar:not(old) {
	display:inline-block;
	position:relative;
	height:25px;
	background:url(images/stars.png) repeat-x 0 0;
	vertical-align:bottom;
}
	.nostar:not(old) div {
		float:left;
		position:relative;
	}
	.nostar:not(old) input {
		position:relative;
		z-index:1;
		width:25px;
		height:25px;
		margin:0;
		padding:0;
		opacity:0;
		vertical-align:bottom;
	}
.star:not(old) {
	display:inline-block;
	position:relative;
	height:25px;
	background:url(images/stars.png) repeat-x 0 -25px;
	vertical-align:bottom;
}
	.star:not(old) div {
		float:left;
		position:relative;
	}
	.star:not(old) input {
		position:relative;
		z-index:1;
		width:25px;
		height:25px;
		margin:0;
		padding:0;
		opacity:0;
		vertical-align:bottom;
	}
HTML

Code: Select all

<table>
	<tr>
		<td>
			<div class="rating">
     <div>
         <div class="star">
             <input type="image" />
         </div>
     </div>
     <div>
         <div class="star">
             <input type="image" />
         </div>
     </div>
     <div>
         <div class="star">
             <input type="image" />
         </div>
     </div>
     <div>
         <div class="nostar">
             <input type="image" />
         </div>
     </div>
     <div>
         <div class="nostar">
             <input type="image" />
         </div>
     </div></div>		</td>
	</tr>
</table> 
Screenshots:

Image

Image

What's making it go so wrong? It's the only browser affected by this issue, so I really can't understand how or why. I know that CSS can behave differently in different browsers, but this isn't something I would have expected from firefox.

Re: Major CSS Bug in Firefox

Posted: Sun Jul 06, 2014 12:58 pm
by Weirdan
Can you post your sprites image (the combined image file)?
Does adding width: 25px; to .rating:not(old) div rule help?

Re: Major CSS Bug in Firefox

Posted: Sun Jul 06, 2014 1:59 pm
by chris98
That hasn't made any difference. Here is the image attached:

Re: Major CSS Bug in Firefox

Posted: Sun Jul 06, 2014 6:20 pm
by Weirdan
Works for me (with the 25px width fix): http://jsfiddle.net/7QqSK/2/

Re: Major CSS Bug in Firefox

Posted: Mon Jul 07, 2014 2:30 am
by chris98
With just the width fix it didn't work, but I've just added height: 25px as well, and that did. However... now I have a new problem: On the clear stars that I use to select the rating, only two out of the five are visible - again, only firefox. I think this time it would be easier to post a link to the file, but I'll also post the relevant code as well. As soon as the height: 25px is removed, then it works fine, but the other stars have those issues.

Code: Select all

<div id="rate">
<a id="rate"></a>
<h2>Rate Article</h2>
<form>
<div class="rating">
  <div>
    <div>
      <div>
        <div>
          <input id="rating1" type="radio" name="rating" value="1" onclick="rate(120, this.value)">
          <label for="rating1"><span>1</span></label>
        </div>
        <input id="rating2" type="radio" name="rating" value="2" onclick="rate(120, this.value)">
        <label for="rating2"><span>2</span></label>
      </div>
      <input id="rating3" type="radio" name="rating" value="3" onclick="rate(120, this.value)">
      <label for="rating3"><span>3</span></label>
    </div>
    <input id="rating4" type="radio" name="rating" value="4" onclick="rate(120, this.value)">
    <label for="rating4"><span>4</span></label>
  </div>
  <input id="rating5" type="radio" name="rating" value="5" onclick="rate(120, this.value)">
  <label for="rating5"><span>5</span></label>
</div>
</form>
EDIT: It's now happening in Internet Explorer as well as firefox, only two stars are visible.

EDIT 2: As soon as I put width:25px, it affects IE & Firefox, displaying only two of the stars you select rather than all five. With height:25px;, nothing happens, it's only with the width. But to solve that other issue, you can only fix it with both.

Re: Major CSS Bug in Firefox

Posted: Mon Jul 07, 2014 6:36 am
by Celauran
In your 'Rate Article' section, the divs are nested instead of being siblings.

Re: Major CSS Bug in Firefox

Posted: Mon Jul 07, 2014 6:42 am
by chris98
That's because otherwise I didn't think it worked, as it certainly didn't appear to (before I made the change above). I changed it to the following, and all is well apart from one thing now: On hover of the ratings when you are about to select one, it only changes the property of the one you are hovering over, not all previous ones to the left as well.

Code: Select all

<form>
<div class="rating">
  <div>
          <input id="rating1" type="radio" name="rating" value="1" onclick="rate(<?php echo $_GET['pageid']; ?>, this.value)">
          <label for="rating1"><span>1</span></label>
        </div>
<div>
        <input id="rating2" type="radio" name="rating" value="2" onclick="rate(<?php echo $_GET['pageid']; ?>, this.value)">
        <label for="rating2"><span>2</span></label>
      </div>
<div>
      <input id="rating3" type="radio" name="rating" value="3" onclick="rate(<?php echo $_GET['pageid']; ?>, this.value)">
      <label for="rating3"><span>3</span></label>
    </div>
<div>
    <input id="rating4" type="radio" name="rating" value="4" onclick="rate(<?php echo $_GET['pageid']; ?>, this.value)">
    <label for="rating4"><span>4</span></label>
  </div>
<div>
  <input id="rating5" type="radio" name="rating" value="5" onclick="rate(<?php echo $_GET['pageid']; ?>, this.value)">
  <label for="rating5"><span>5</span></label>
</div>
</div>
</form>
EDIT: It appears as this in all browsers

Re: Major CSS Bug in Firefox

Posted: Thu Jul 10, 2014 5:24 am
by chris98
How can I overcome this bug now? I've tried changing position:relative to all the other know position types & I've even tried changing the .rating:not(old) div rule to star:not(old) div and it's just not changing anything, at one point I even changed the width:25px to width:100px but even though it helped with the first issue the second still remained. I changed it back to nested because it remains two stars without this, and this was how I found it here: http://code.stephenmorley.org/html-and- ... ng-widget/ The bit that I found works correctly, it's the bit I added which is the .star and .nostar that doesn't - please I'm really stuck with this, what can I do?

Re: Major CSS Bug in Firefox

Posted: Thu Jul 10, 2014 9:32 am
by Weirdan
Post here a link to jsfiddle.net that shows your problem (like I did for width fix above).

Re: Major CSS Bug in Firefox

Posted: Thu Jul 10, 2014 10:25 am
by chris98
Here: http://jsfiddle.net/fT2by/

The first row remains fine now, but the second row (where you select the rating) only shows two stars, and when you hover underneath them they still get selected. As celauran suggested, I changed it to un nested divs, and then it gives this: http://jsfiddle.net/w7YhQ/

Re: Major CSS Bug in Firefox

Posted: Thu Jul 10, 2014 2:18 pm
by mikosiko
commenting the width in this part make it works fine for me... try

Code: Select all

.rating:not(old) div{
  float          : left;
  position       : relative;
  /*width          : 25px;*/
  height         : 25px;
}

Re: Major CSS Bug in Firefox

Posted: Fri Jul 11, 2014 2:49 am
by chris98
That's stopped that bug, but now the old one's back in firefox. And it only works with the first link, so the divs must have to be nested for it to work. I just don't understand what's causing this - nothing is fixing it.

Now what can I try to get rid of this?