Buttons not working in firefox?

antid2 2012-08-21 01:33:10 UTC #1

This post is to help someone i know out, they made these beautiful buttons,checkboxes etc for their site, but it's showing up really weird in firefox, and i think he's drawing a blank on how to fix that? Any ideas?
here are the buttons

http://www.gabrielecirulli.com/stuff/buttontest/

Lats 2012-08-21 03:25:25 UTC #2

They look quite weird to me in IE and FF, but look good in Chrome.

Some errors...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gabrielecirulli.com%2Fstuff%2Fbuttontest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

PaulOB 2012-08-21 14:00:04 UTC #3

Hi,

You can't get rid of all the default styling for the checkboxes and radio boxes yet afaik.

Instead you could link the label to the form control and style that instead. Clicking the label will have the same effect as clicking the form element which you just hide off screen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>UI Elements Prototype</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
	background-color: #3e4146;
	margin: 50px;
	margin-top: 30px;
	font-family: 'PT Sans', Helvetica, Arial;
	font-size: 13px;
	color: #c1c6cb;
	text-shadow: 0px -1px 0px black;
}
.separator {
	display: block;
	margin: 10px 0;
	margin-top: 20px;
	clear:both;
}
.hiddenloader {
	position: absolute;
	left: -9999px;
}
/* NORMAL BUTTON */
.btn {
	cursor: pointer;
	width: 120px;
	height: 32px;
	background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_09.png);
	-webkit-transition: all 50ms ease;
	margin :0;
	padding:0;
	border:none;
	overflow:hidden;
	text-transform:capitalize;
	text-indent:-999em
}
.btn:hover { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_18.png); }
.btn:active { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_26.png); }
/* SWITCHBUTTON */
.check {
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	height:32px;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-transition: all 50ms ease;
float:left;
}
/* 1PX LINE (BORDER/SHADOW) BETWEEN SWITCHBUTTON ITEMS (BE CAREFUL ABOUT THIS) */
#form label:after{
	height: 32px;
	content:" ";
	float:left;
	width: 1px;
	background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_04.png)
}
/* OFF */
.check.top + label {
	background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_03.png);
	width: 42px;
}
.check.new + label {
	background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_05.png);
	width: 44px;
}
.check.random + label {
	background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_07.png);
	width: 64px;
}
.check + label {
	width:64px;
	height:32px;
	float:left;
}
.check { }
/* OFF HOVER */
		.check.top:hover + label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_13.png); }
.check.new:hover + label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_15.png); }
.check.random:hover + label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_17.png); }
/* OFF ACTIVE */
		.check.top:active +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_21.png); }
.check.new:active +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_23.png); }
.check.random:active + label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_25.png); }
/* ON */
		.check.top:checked +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_21.png); }
.check.new:checked +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_23.png); }
.check.random:checked +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_25.png); }
/* ON HOVER */
		.check.top:checked:hover +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_29.png); }
.check.new:checked:hover +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_31.png); }
.check.random:checked:hover +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_33.png); }
/* ON ACTIVE */
		.check.top:checked:active +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_21.png); }
.check.new:checked:active +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_23.png); }
.check.random:checked:active +label { background: url(http://www.gabrielecirulli.com/stuff/buttontest/detail_ui_25.png); }
.check {
	position:absolute;
	left:-999em
}
#form br {
	clear:both;
	width:100%
}
</style>
</head>
<body id="test">
<h1>UI Elements Prototype</h1>
<form  id="form" name="form1" method="post" action="">
		<fieldset>
				<legend>UI Elements Prototype</legend>
				<div class="separator">Button:</div>
				<input class="btn" type="submit" name="submit" id="submit" value="Submit the Video">
				<div class="separator">Mutually exclusive switchbutton:</div>
				<input type="radio" class="check top" name="swbtn1" checked="checked" id="r1">
				<label for="r1">&nbsp;</label>
				<input type="radio" class="check new" name="swbtn1"  id="r2">
				<label for="r2">&nbsp;</label>
				<input type="radio" class="check random" name="swbtn1" id="r3">
				<label for="r3">&nbsp;</label>
				<div class="separator">Multi-selection switchbutton:</div>
				<input type="checkbox" class="check top" id="r4">
				<label for="r4">&nbsp;</label>
				<input type="checkbox" class="check new"  id="r5">
				<label for="r5">&nbsp;</label>
				<input type="checkbox" class="check random"  id="r6">
				<label for="r6">&nbsp;</label>
				<br>
		</fieldset>
</form>
</body>
</html>

You could add real text to the label element for accessibility but just hide it on screen.

system 2014-10-08 02:49:27 UTC #4

ThemesPodcastArticlesPremium