PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 29, 2020 2:23 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 12 posts ] 
Author Message
 Post subject: Major CSS Bug in Firefox
PostPosted: Sun Jul 06, 2014 8:12 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom
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?

Syntax: [ Download ] [ Hide ]
.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
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Sun Jul 06, 2014 12:58 pm 
Offline
Moderator
User avatar

Joined: Mon Nov 03, 2003 7:13 pm
Posts: 5978
Location: Odessa, Ukraine
Can you post your sprites image (the combined image file)?
Does adding width: 25px; to .rating:not(old) div rule help?


Top
 Profile  
 
PostPosted: Sun Jul 06, 2014 1:59 pm 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom
That hasn't made any difference. Here is the image attached:


Attachments:
stars (1).png
stars (1).png [ 2.62 KiB | Viewed 9227 times ]
Top
 Profile  
 
PostPosted: Sun Jul 06, 2014 6:20 pm 
Offline
Moderator
User avatar

Joined: Mon Nov 03, 2003 7:13 pm
Posts: 5978
Location: Odessa, Ukraine
Works for me (with the 25px width fix): http://jsfiddle.net/7QqSK/2/


Top
 Profile  
 
PostPosted: Mon Jul 07, 2014 2:30 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom


Last edited by chris98 on Tue Jul 08, 2014 2:45 am, edited 1 time in total.

Top
 Profile  
 
PostPosted: Mon Jul 07, 2014 6:36 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
In your 'Rate Article' section, the divs are nested instead of being siblings.


Top
 Profile  
 
PostPosted: Mon Jul 07, 2014 6:42 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom


Top
 Profile  
 
PostPosted: Thu Jul 10, 2014 5:24 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom
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.

Top
 Profile  
 
PostPosted: Thu Jul 10, 2014 9:32 am 
Offline
Moderator
User avatar

Joined: Mon Nov 03, 2003 7:13 pm
Posts: 5978
Location: Odessa, Ukraine
Post here a link to jsfiddle.net that shows your problem (like I did for width fix above).


Top
 Profile  
 
PostPosted: Thu Jul 10, 2014 10:25 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom
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/


Top
 Profile  
 
PostPosted: Thu Jul 10, 2014 2:18 pm 
Offline
Forum Regular

Joined: Wed Jan 13, 2010 8:22 pm
Posts: 757
commenting the width in this part make it works fine for me... try

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


Top
 Profile  
 
PostPosted: Fri Jul 11, 2014 2:49 am 
Offline
Forum Contributor
User avatar

Joined: Tue Jun 11, 2013 10:47 am
Posts: 103
Location: England, United Kingdom
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?


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 12 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 9 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group