Hide a submit button in IE7 with CSS

Question

I have a submit button with a markup like this:

<li class="button"><div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" /></div></li>

I want to hide it so it's not visible.

I did this:

.button, input.input-submit {
    height: 0;
    line-height: 0;
    border: 0;
}

And that works in Firefox and IE8. But in IE7 there is still a space taken by the button even though it's not visible (so there is like a 20px gap).

What to do?

Answer 1

.button, input.input-submit {
    display:none;
}

Answer 2

You want to set the display to none. This works in all browsers.

.button, input.input-submit {
    display:none;
}

If you did want the object to take up space but not appear, then you set visibility to hidden.

Answer 3

I don´t know if you use a reset style-sheet, so you could use:

.button, input.input-submit {
    height: 0;
    border: none;
    width: 0;
    padding: 0;
    margin: 0;
}

If that doesn´t do it, it could be because it is an inline element, so you try to add:

display: inline-block;

More about inline-block

Edit: As an afterthought, it seems to me you only need to hide the li, all content inside the li will be automatically hidden as well but you might have to give the li a:

overflow: hidden;