SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2007
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Buttons not working in firefox?

    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/

  2. #2
    SitePoint Wizard Lats's Avatar
    Join Date
    Jun 2003
    Location
    Melbourne, AU
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but_ch.jpgbut_ff.jpgbut_ie8.jpg
    They look quite weird to me in IE and FF, but look good in Chrome.

    Some errors...

    http://validator.w3.org/check?uri=ht...Inline&group=0
    Lats...

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •