SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing padding around [input type=checkbox]

    Could anyone advise on how to remove padding around checkbox in IE? I am not refrring to the padding "style", but rather the blank space around checkbox (which IE considers to be part of the input-object, even though the actual checkbox is very small).

    Thanks in advance...

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hmm,

    I'll put this up for anyone else to comment on.

    Code:
    * { margin: 0; padding: 0; }
    #box { border: 1px solid black; float: left; }
    Code:
    <div id="box"><input type=checkbox /></div>
    My guess is you wouldn't be able to change it - A lot like Safari's form elements. You have little control over the way browsers display these elements.

    ...

  3. #3
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye, unfortunately I don't think you can remove it. You could possibly replace the checkbox it with some clever JS, but that seems like an awful lot of effort.

    Besides, that padding is a good thing: It gives people a bigger target area to aim at with their mouse.
    Olly Hodgson
    thinkdrastic.net

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you were to add this to the CSS above then that'll fix the problem

    Code:
    body {
    	font-size: 65%;
    }
    Basically, your base font size needs to be smaller than height of the checkbox otherwise it will allow enough spacing which will look in appearance like padding.

    You could apply this fontsize to the #box style alone if you wish although your global font size will probably take care of this in most cases.

    Hope that hopes solve the problem?

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That doesn't work for me csswiz. Not in IE6.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gnarly
    Besides, that padding is a good thing: It gives people a bigger target area to aim at with their mouse.
    Even with padding, the target area of a checkbox is very small (especially on a high-resolution monitor). Which is why it is extra important to use the LABEL element type correctly with checkboxes and radio buttons. That makes the whole label text clickable; a major improvment from trying to hit the tiny square or circle.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    That doesn't work for me csswiz. Not in IE6.
    Oh yeah, that's strange... I've not actually come across that before but does look like there is a default margin that you can't remove. I've tried specifying height's and paddings explicitly to containers of the input and it's container but no luck.

    Atleast if you use a font-size that is smaller than the checkbox you can get a certain level of consistency, but as for removing margins completely in all browsers, I'd be interested to hear if there is a solution.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Even with padding, the target area of a checkbox is very small (especially on a high-resolution monitor). Which is why it is extra important to use the LABEL element type correctly with checkboxes and radio buttons. That makes the whole label text clickable; a major improvment from trying to hit the tiny square or circle.
    Yeah, small things may look nice, but if they are hard for the user to click with his/her mouse, what's the point? Usability should come before beautification.

    Here's some information on how to make forms easier to use:
    Simple Tricks for More Usable Forms: Labels
    Accessible HTML/XHTML Forms
    Creating Accessible Forms
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Code CSS:
    input.checkbox {
    	height: 13px;
    	width: 13px
    }
    Code HTML4Strict:
    <input type="checkbox" class="checkbox" />


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
  •