Question

I have a border around my toggle images and I can’t figure out for the life of my why – this is with a custom options panel based on http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/

See the attached image:

In my functions, how it is being created with markup

<div class="rm_section">
<div class="rm_title">
<h3><img class="inactive" alt="">
<?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div class="clearfix"></div></div>
<div class="rm_options">

MY CSS

.rm_wrap{
    width:740px;
}

.rm_section{

}

.rm_opts label{
    font-size:12px;
    font-weight:700;
    width:200px;
    display:block;
    float:left; 
    color:#444
}
.rm_input {
    padding:30px 15px;
    border-bottom:1px solid #ddd;
    border-top:1px solid #fff;
    margin:8px 0 0;
    background:#f9f9f9;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
}
.rm_opts small{
    display:block;
    float:right;
    width:200px;
    color:#999
}
.rm_opts input[type="text"], .rm_opts select{
    width:280px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1em;
    background:#f3f3f3;
}
.rm_input input:focus, .rm_input textarea:focus{
        background:#fff;
}
.rm_input textarea{
    width:280px;
    height:175px;
    font-size:12px;
    padding:4px;
    color:#333;
    line-height:1.5em;
    background:#f3f3f3;
}
.rm_title h3 {
    cursor:pointer;
    font-size:1.2em;
    margin:17px 0 0;
    color:#333;
    float:left;
    width:80%;
    font-weight:normal;
    padding:0 4px;
}
.rm_title{
    cursor:pointer;
    border-bottom:1px solid #ddd;
    background:#eee;
    -webkit-box-shadow: inset 0px 0px 7px #DDD;
    -moz-box-shadow: inset 0px 0px 7px #DDD;
    box-shadow: inset 0px 0px 7px #DDD;
    padding:0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px
    }

.rm_title h3 img.inactive{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat 0 0;
    float:left;
    border:none!important
}

.rm_title h3 img.active{
    margin:-7px 10px 0 5px;
    width:32px;
    height:32px;    
    background:url('images/pointer.png') no-repeat  0 -32px;
    float:left;
    border:none!important
}

.rm_title h3:hover img{
    border:none
}

.rm_title span.submit{
    display:block;
    float:right;
    margin:0;
    padding:0;
    width:15%;
    padding:14px 0;
}

.clearfix{
    clear:both;
}

.rm_table th, .rm_table td{
    border:1px solid #bbb;
    padding:10px;
    text-align:center;
}

.rm_table th, .rm_table td.feature{
    border-color:#888;
    }

jQuery

jQuery(document).ready(function(){
        jQuery('.rm_options').slideUp();

        jQuery('.rm_section h3').click(function(){
            if(jQuery(this).parent().next('.rm_options').css('display')==='none')
                {   jQuery(this).removeClass('inactive').addClass('active').children('img').removeClass('inactive').addClass('active');

                }
            else
                {   jQuery(this).removeClass('active').addClass('inactive').children('img').removeClass('active').addClass('inactive');
                }

            jQuery(this).parent().next('.rm_options').slideToggle('slow');
        });
});

Answer 1

Typically, you won’t want borders around your images, so try setting the border width for images explicitly like this:

img { border:0px; }

In cases where you do want a border around your images, just override the above.

EDIT

I see that you have some classes for images specified already in your stylesheet. Instead of setting the border-style to none, try setting the border width to 0. I would also add a space before using !important