 |  |  |  |  |  |  |  |
CSS style in FireFox
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
In my asp page, I have a number of checkboxes and radio buttons. It works fine, but the users want to have a larger checkbox and radio button. So I have a class in the stylesheet called "bigcheck". The style sheet has this class as
.bigcheck { height: 30px; width: 30px; }
The sample code in the ASP page is as below
This works fine with Internet Explorer (i.e. the checkbox and radio buttons are a larger size), however it does not work in FireFox. Can someone please tell me what I am doing wrong?
Thanks
- Artee
.bigcheck { height: 30px; width: 30px; }
The sample code in the ASP page is as below
HTML and CSS Syntax (Toggle Plain Text)
This works fine with Internet Explorer (i.e. the checkbox and radio buttons are a larger size), however it does not work in FireFox. Can someone please tell me what I am doing wrong?
Thanks
- Artee
•
•
Join Date: Feb 2005
Posts: 427
Reputation: 
Solved Threads: 12
Posting Pro in Training
To be honest... I didn't thik it was possible to alter certain form elements.
By applying font-size/line-height, you can alter the size of Text-inupts etc... but things like checkboxes I believe are "standard only" in compliant browsers.
(Will double check and get back to you on that though!)
For the mean time, if you make it a bit more accessible, it means people can click on the label for the checkbox/radio button and get the same result as clicking the "box".
By applying font-size/line-height, you can alter the size of Text-inupts etc... but things like checkboxes I believe are "standard only" in compliant browsers.
(Will double check and get back to you on that though!)
For the mean time, if you make it a bit more accessible, it means people can click on the label for the checkbox/radio button and get the same result as clicking the "box".
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Solved Threads: 12
Posting Pro in Training
Okay... after a quickscout around...
It is not possible (apparently).
That said... you do have alternatives;
If keepig it as Checkbox/Radial is important, then you may need to re-order the form code so that clickig the vlaue label will act the same as clicking the item (being the heckbox/radial).
Following the above, you can apply a visual marker to indicate the active area's, (so for the value label, apply a class and either add a subtle border or apply a background-colour).
An alternative approach isto replace the Checkbox/radial with a dropdown list. For Checkboxes you can apply multi-select, for the Radial a single option only is equal.
Though visually different, these will have exactly the same results.
It is not possible (apparently).
That said... you do have alternatives;
If keepig it as Checkbox/Radial is important, then you may need to re-order the form code so that clickig the vlaue label will act the same as clicking the item (being the heckbox/radial).
Following the above, you can apply a visual marker to indicate the active area's, (so for the value label, apply a class and either add a subtle border or apply a background-colour).
An alternative approach isto replace the Checkbox/radial with a dropdown list. For Checkboxes you can apply multi-select, for the Radial a single option only is equal.
Though visually different, these will have exactly the same results.
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation:
Solved Threads: 164
I have used a button, and changed the contents of the button itself.
You could put a huge checkbox image on a button.
You could put a huge checkbox image on a button.
Last edited by MidiMagic; Aug 16th, 2007 at 2:34 am.
Daylight-saving time uses more gasoline
Thanks for your suggestions Autocrat and Midimagic.
Midimagic,
Do you mean that instead of using checkbox and radio buttons, you create images and use them instead?
- Artee
Midimagic,
Do you mean that instead of using checkbox and radio buttons, you create images and use them instead?
- Artee
•
•
•
•
Originally Posted by MidiMagic 
I have used a button, and changed the contents of the button itself.
You could put a huge checkbox image on a button.
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation:
Solved Threads: 164
I have done it several ways. The easiest is:
Put an image on an input button as a background. Keep a toggle variable on the button, and change the image on the button to match the toggle.
You can remove the border, so it no longer looks like a button.
Put an image on an input button as a background. Keep a toggle variable on the button, and change the image on the button to match the toggle.
You can remove the border, so it no longer looks like a button.
Daylight-saving time uses more gasoline
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Solved Threads: 12
Posting Pro in Training
To be honest, after much looking around, MidiMagic's method is the only way to make it look like a bigger checkbox/radial.
The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.
But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).
I'd go with MidiMagic if I was you
The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.
But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).
I'd go with MidiMagic if I was you
Thanks Midimagic, I shall work on your method
- Artee
- Artee
•
•
•
•
Originally Posted by autocrat
To be honest, after much looking around, MidiMagic's method is the only way to make it look like a bigger checkbox/radial.
The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.
But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).
I'd go with MidiMagic if I was you
 |
Similar Threads
- Can't change CSS style for "onClick" text link (JavaScript / DHTML / AJAX)
- CSS Style : Links (HTML and CSS)
- CSS Tab menu (HTML and CSS)
- Bizarre CSS Behavior in Moz Without Border on Div (HTML and CSS)
- CSS browser compatibility ??? (HTML and CSS)
- CSS compatibility and Menu appearance ??? (HTML and CSS)
- Style properties are ignored by Mozilla browser... (ASP.NET)
Other Threads in the HTML and CSS Forum
- Previous Thread: firefox loves favicon but IE couldn't be bothered
- Next Thread: Opera
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
