Major CSS Bug in Firefox

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Major CSS Bug in Firefox

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Major CSS Bug in Firefox

Post by Weirdan »

Can you post your sprites image (the combined image file)?
Does adding width: 25px; to .rating:not(old) div rule help?
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post by chris98 »

That hasn't made any difference. Here is the image attached:
Attachments
stars (1).png
stars (1).png (2.61 KiB) Viewed 10661 times
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Major CSS Bug in Firefox

Post by Weirdan »

Works for me (with the 25px width fix): http://jsfiddle.net/7QqSK/2/
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post 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.
Last edited by chris98 on Tue Jul 08, 2014 2:45 am, edited 1 time in total.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Major CSS Bug in Firefox

Post by Celauran »

In your 'Rate Article' section, the divs are nested instead of being siblings.
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post 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
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post 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?
Last edited by chris98 on Thu Jul 10, 2014 10:27 am, edited 1 time in total.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Major CSS Bug in Firefox

Post by Weirdan »

Post here a link to jsfiddle.net that shows your problem (like I did for width fix above).
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post 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/
mikosiko
Forum Regular
Posts: 757
Joined: Wed Jan 13, 2010 7:22 pm

Re: Major CSS Bug in Firefox

Post 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;
}
User avatar
chris98
Forum Contributor
Posts: 103
Joined: Tue Jun 11, 2013 10:47 am
Location: England, United Kingdom

Re: Major CSS Bug in Firefox

Post 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?
Post Reply