Board Thread:Support Requests - Getting Technical/@comment-9927972-20140722144934/@comment-452-20140724192750

That ended up taking a little longer than anticipated, but this will now work in firefox as well as chrome.

Instead of  Use  There's a space instead of the underscore before "rin". So, .ogg_custom is one class and .rin is another class - this lets us use .ogg_custom for all the common styles.

Change MediaWiki:Ogg-more to &amp;nbsp; (Because firefox doesn't let you replace text with an image like chrome does)

This completely replaces the current version /* Customized .OGG Players Start */
 * CSS

.ogg_custom div { display: inline; }

.ogg_custom, .ogg_custom:hover { opacity: 0.6; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; }

.ogg_custom:hover { opacity: 1; }

.ogg_custom button>img, .ogg_custom .image img { display: none; }

.ogg_custom button { border: none !important; } .ogg-player-options+a:after { content: "More..."; /* This restores the default "more..." text for unstyled ogg players. */ } .ogg_custom .image, .ogg_custom .ogg-player-options+a:after { content:""; height: 50px; vertical-align: bottom; background-size: 100%; display: inline-block; }

.ogg_custom audio { border-radius:4px } .ogg_custom>.ogg_player>div>button:after { content: url("http://img2.wikia.nocookie.net/__cb20140723123943/free-anime/images/9/90/Play.png") !important; } /* .OGG Player - Rin */

.ogg_custom.rin .ogg_player button, .ogg_custom.rin audio { background: #d80001; } .ogg_custom.rin audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { /* The reason this is separate is due to firefox */ background: #d80001; } .ogg_custom.rin .image, .ogg_custom.rin .ogg-player-options+a:after { background-image: url("http://images2.wikia.nocookie.net/free-anime/images/3/3d/Rin_ogg2.png"); width: 50px; /* The height is set elsewhere at 50px, but we have to set the width for each image. */ }

/* .OGG Player - Haruka */

.ogg_custom.haruka .ogg_player button, .ogg_custom.haruka audio { background: #99DAEC; } .ogg_custom.haruka audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background: #99DAEC; } .ogg_custom.haruka .image, .ogg_custom.haruka .ogg-player-options+a:after { background-image: url("http://images2.wikia.nocookie.net/free-anime/images/e/e6/Haruka_ogg.png"); width: 51px; }

/* .OGG Player - Makoto */

.ogg_custom.makoto .ogg_player button, .ogg_custom.makoto audio { background: #9ac86b; } .ogg_custom.makoto audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background: #9ac86b; } .ogg_custom.makoto .image, .ogg_custom.makoto .ogg-player-options+a:after { background-image: url("http://images3.wikia.nocookie.net/free-anime/images/f/fc/Makoto_ogg.png"); width: 51px; }

/* .OGG Player - Nagisa */

.ogg_custom.nagisa .ogg_player button, .ogg_custom.nagisa audio { background: #FABE1F; } .ogg_custom.nagisa audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background: #FABE1F; } .ogg_custom.nagisa .image, .ogg_custom.nagisa .ogg-player-options+a:after { background-image: url("http://images2.wikia.nocookie.net/free-anime/images/7/72/Nagisa_ogg.png"); width: 42px; }

/* .OGG Player - Rei */

.ogg_custom.rei .ogg_player button, .ogg_custom.rei audio { background: #9a359f; } .ogg_custom.rei audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background: #9a359f; } .ogg_custom.rei .image, .ogg_custom.rei .ogg-player-options+a:after { background-image: url("http://images3.wikia.nocookie.net/free-anime/images/b/b6/Rei_ogg.png"); width: 39px; }

/* .OGG Player - Haru & Rin */

.ogg_custom.harurin .ogg_player button, .ogg_custom.harurin audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #d80001)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #d80001)); background-image: -moz-linear-gradient(top, #99DAEC 25%, #d80001 75%); background-image: -o-linear-gradient(top, #99DAEC 25%, #d80001 75%); background-image: -ms-linear-gradient(top, #99DAEC 25%, #d80001 75%); } .ogg_custom.harurin audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #d80001)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #d80001)); background-image: -moz-linear-gradient(top, #99DAEC 25%, #d80001 75%); background-image: -o-linear-gradient(top, #99DAEC 25%, #d80001 75%); background-image: -ms-linear-gradient(top, #99DAEC 25%, #d80001 75%); } .ogg_custom.harurin .image, .ogg_custom.harurin .ogg-player-options+a:after { background-image: url("http://images4.wikia.nocookie.net/free-anime/images/d/d2/Harurin_ogg.png"); width: 76px; }

/* .OGG Player - Haru & Makoto */

.ogg_custom.makoharu .ogg_player button, .ogg_custom.makoharu audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #9ac86b)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #9ac86b)); background-image: -moz-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); background-image: -o-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); background-image: -ms-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); } .ogg_custom.makoharu audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #9ac86b)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #99DAEC), color-stop(75%, #9ac86b)); background-image: -moz-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); background-image: -o-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); background-image: -ms-linear-gradient(top, #99DAEC 25%, #9ac86b 75%); } .ogg_custom.makoharu .image, .ogg_custom.makoharu .ogg-player-options+a:after { background-image: url("http://images3.wikia.nocookie.net/free-anime/images/d/de/Harumako_ogg.png"); width: 100px; }

/* .OGG Player - Nagisa & Rei */

.ogg_custom.reigisa .ogg_player button, .ogg_custom.reigisa audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FABE1F), color-stop(75%, #9a359f)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FABE1F), color-stop(75%, #9a359f)); background-image: -moz-linear-gradient(top, #FABE1F 25%, #9a359f 75%); background-image: -o-linear-gradient(top, #FABE1F 25%, #9a359f 75%); background-image: -ms-linear-gradient(top, #FABE1F 25%, #9a359f 75%); } .ogg_custom.reigisa audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FABE1F), color-stop(75%, #9a359f)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #FABE1F), color-stop(75%, #9a359f)); background-image: -moz-linear-gradient(top, #FABE1F 25%, #9a359f 75%); background-image: -o-linear-gradient(top, #FABE1F 25%, #9a359f 75%); background-image: -ms-linear-gradient(top, #FABE1F 25%, #9a359f 75%); } .ogg_custom.reigisa .image, .ogg_custom.reigisa .ogg-player-options+a:after { background-image: url("http://images3.wikia.nocookie.net/free-anime/images/2/25/Reigisa_ogg.png"); width: 77px; }

/* .OGG Player - Rin & Rei */

.ogg_custom.rinrei .ogg_player button, .ogg_custom.rinrei audio { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #d80001), color-stop(75%, #9a359f)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #d80001), color-stop(75%, #9a359f)); background-image: -moz-linear-gradient(top, #d80001 25%, #9a359f 75%); background-image: -o-linear-gradient(top, #d80001 25%, #9a359f 75%); background-image: -ms-linear-gradient(top, #d80001 25%, #9a359f 75%); } .ogg_custom.rinrei audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #d80001), color-stop(75%, #9a359f)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #d80001), color-stop(75%, #9a359f)); background-image: -moz-linear-gradient(top, #d80001 25%, #9a359f 75%); background-image: -o-linear-gradient(top, #d80001 25%, #9a359f 75%); background-image: -ms-linear-gradient(top, #d80001 25%, #9a359f 75%); } .ogg_custom.rinrei .image, .ogg_custom.rinrei .ogg-player-options+a:after { background-image: url("http://images1.wikia.nocookie.net/free-anime/images/a/a0/Rinrei_ogg.png"); width: 86px; }

/* Customized .OGG Players End */

This will make the options panel pop up on hover. div.ogg_player .ogg-player-options { background: white !important; } .ogg_player>div+div:hover div:first-child { display: inline-block !important; position: absolute; z-index: 2; }
 * Bonus optional style