Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 16608

Aug 15th, 2007

CSS style in FireFox

Expand Post »

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

HTML and CSS Syntax (Toggle Plain Text)
     <td class="TBorder" onClick="chk1();">     <INPUT class="bigcheck" id=HS11 type=checkbox value=1 name=HS11> </INPUT> </td>
 
      <td> <INPUT class="bigcheck" id=HSR1 type=radio value=0 name=HSR1 > <br>0 </td>
     <td class="TBorder" onClick="chk1();">     <INPUT class="bigcheck" id=HS11 type=checkbox value=1 name=HS11> </INPUT> </td>
 
      <td> <INPUT class="bigcheck" id=HSR1 type=radio value=0 name=HSR1 > <br>0 </td>

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

Similar Threads

Can't change CSS style for "onClick" text link in JavaScript / DHTML / AJAX
CSS Style : Links in HTML and CSS
CSS Tab menu in HTML and CSS
Bizarre CSS Behavior in Moz Without Border on Div in HTML and CSS
CSS browser compatibility ??? in HTML and CSS

artee

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Dec 2006

Permalink

Aug 15th, 2007

Re: CSS style in FireFox

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".

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Aug 15th, 2007

Re: CSS style in FireFox

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.

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Aug 16th, 2007

Re: CSS style in FireFox

I have used a button, and changed the contents of the button itself.

You could put a huge checkbox image on a button.

Last edited by MidiMagic; Aug 16th, 2007 at 2:34 am.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 16th, 2007

Re: CSS style in FireFox

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

Click to Expand / Collapse Quote 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.

artee

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Dec 2006

Permalink

Aug 16th, 2007

Re: CSS style in FireFox

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 16th, 2007

Re: CSS style in FireFox

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

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Aug 17th, 2007

Re: CSS style in FireFox

Thanks Midimagic, I shall work on your method
- Artee

Click to Expand / Collapse Quote 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

artee

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Dec 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: firefox loves favicon but IE couldn't be bothered

Next Thread in HTML and CSS Forum Timeline: Opera

DaniWeb Message

Cancel Changes

User Name
Password