Question

I need to expand and collapse button in my application.

IE and chrome are supported, but mozilla firefox is displaying the image with small blank spaces in the two sides.

Its not set correctly, my code is as below.

<div class="searchdiv">
    <b class="searchlabel">Advanced Search</b>
    <input type="button" class="Expand_button" onclick="javascript: Expand();"/>
</div>

and the css is,

.Expand_button {
    margin-right: 5px;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 5px;    
    background: #fff url('../images/Expand.jpg') no-repeat center ;
    height:1px;
}

Answer 1

First, inline Javascript is bad. That is what’s known as “intrusive Javascript”. Instead, write your Javascript so that it reacts to an action, and keep it in a separate Javascript file (jQuery-flavored to be concise):

$(document).ready(function(){
    $('input.Expand_button').click(function(){
      Expand();
    });
})

You then remove the onclick call in your element, like so:

<input type="button" class="Expand_button" />

That said, are you trying to make the input invisible by setting height: 1px? If so, then that’s your problem. It still exists, and is still visible. Even more, you have padding and margins on it, so of course it’s still going to show up.

What you want is display: none; or visibility: hidden, depending on the exact behavior you’re looking for. display: none; will take the item out of the DOM tree entirely, and other elements will shift accordingly. visibility: hidden; will just make the element invisible, without changing the DOM tree.

If you use a library, such as jQuery, then you’ll be better off using display: none;, because then you can use jQuery’s built-in hide/show functions, which change display accordingly. If you don’t, then you’re writing your own behavior reactions, anyway, so you can use whichever you want.