Can the padding/margin on radio buttons in IE6/IE7 be reduced to 0-1px

internet explorerinternet-explorer-7padding

In Firefox and IE8 this isn't a problem, but in IE6, and IE7 I can't seem to reduce the padding/margin on radio buttons to anything reasonable (e.g. 0px or 1px).

In the included images, you can see that the red background is huge on IE6/IE7 (even with CSS padding and margin both set to 0px) yet in Firefox/IE8 it is fine.

The reason of course is that the tree I'm rendering looks horrible with the gaps in IE6/IE7.

IE6/IE7

alt text http://img190.imageshack.us/img190/9985/ie7l.png

Firefox/IE8

alt text http://img23.imageshack.us/img23/3411/ie8k.png

Notes: the page runs in standards mode, and the red is just for illustration.

Some sample code (for those that want to hack at it)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IE Radio button padding hell</title>
<style>
  input{
    background-color:red;
    border:0px;
    margin:0px;
    padding:0px;
  }
</style>
</head>
<body>
  <form name="asdf">
    <input type="radio" name="sdfgsd" value=""/>asdf<br/>
    <input type="radio" name="sdfgsd" value=""/>asdf<br/>
    <input type="radio" name="sdfgsd" value=""/>asdf<br/>
    <input type="radio" name="sdfgsd" value=""/>asdf<br/>
  </form>
</body>
</html>

Best Answer

Use height to solve this problem.

I am using this on class on input:

.radiobtn
{
border:0px;
height:14px;
}

on:

<input type="radio" class="radiobtn" name="radio"  value=""/> Yes

It will work fine in I.E 6.0/7.

Related Solutions

Html – word-wrap: break-word with div inside td

Adding overflow:hidden to the div should sort it out. Can't offer an explanation though, sorry!

JQuery clone problem

I could fix it for now. As long as an input field is not attached to the dom you can change the name and the radio buttons work properly again.

// Old Code
 $("div:last").clone(true).children("input").attr("name","newName");

// New Code
 $("div:last").clone(true).children("input").fixCloneBug ("newName");

To lower the execution time only the jQuery Events, the className and the type attribute are copied.

fixCloneBug Method:

(function( $ )
{


    if ( ! $.browser.msie || parseInt( $.browser.version ) > 7 )
        // NO FIX FOR IE 7+ FF WEBKIT
        $.fn.fixCloneBug = function( newName ){ return this.attr( "name", newName ) };
    else
        // FIX IE 5-7
        $.fn.fixCloneBug = function( newName )
        {
            var $cloned = $();

            this.each(function( )
            {
                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Create a new element with className and jQuery events of the buggy element

                    */          

                    var     $elem    = $(this),

                            $newElem = $(document.createElement( $elem.attr('tagName') ));

                            // USE SAME TYPE

                    $newElem.attr('type', $elem.attr('type') );


                            // SET NAME
                    $newElem.attr('name', this.name );
                    $newElem.attr('name', newName );

                            // ADD TO DOM

                    $newElem.insertBefore( $elem );

                            // CLONE EVENTS
                    $newElem.data( "events", $elem.data("events") );

                            // CLASS NAME
                    $newElem.attr('className', this.className );

                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Delete buggy element 

                    */

                    $elem.remove();


                    // Add to result
                    $cloned.push($newElem);
            })

            return $cloned;

        }

}(jQuery));

Maybe you think $newElem.attr('name', this.name ); is useless however it allows me to use a jQuery 1.4 feature:

.fixCloneBug (function(i,oldname){ return oldname+"_new" })

Related Topic