CSS Layout and Hidden Fields

[davidhunter]

Hello group - my hidden elements are messing up my form page layout.

CSS :
input type=["hidden"] {
display: none;
visibility: none;
}

HTML:
<form action="registration.cgi" method="POST">
<input type="hidden" name="IDNUM" value="4">
<fieldset><legend>Restrictions</legend>
<div id="regBox2">
blah blah blah
</div>
</fieldset>
</form>

It is creating white space - horizontally and vertically - where the hidden elements are.

WHY! Any advice is hugely appreciated.

david

[Paul O'B]

What browser is this happening in.?

IE6 doesn't understand attribute selectors so the style will not be applied and you would need to add a class (and it should be visibility:hidden not none, although it wouldn't be necessary because display:none would remove it from the flow anyway).

I think we'd need a link to the page as the code above doesn't cause any whitespace as it is.

Have you cleared all the margins from the form and other elements you are using.

[davidhunter]

What browser is this happening in.?

grr. Good point Paul - and thanks for the reply.

here is your link :
http://checkeredshirt.com/1notgood.html

Good in IE.
bad in Netscape and Firefox!

Maybe I'm wrong that the hidden elements are screwing up the layout then ? Perhaps it something else ?

david

[Paul O'B]

HI,

It is your hidden inputs but you have a mistake in the css.

use this:

        input[type=hidden]{
            display: none;
        }

[davidhunter]

HI,
It is your hidden inputs but you have a mistake in the css.

use this:

        input[type=hidden]{
            display: none;
        }

Ack!! Hi Again Paul -

THANK YOU for replying. I initially did not copy and paste your code - and I did not notice the opening square bracket.

It is fixed - thanks again - perfect!

david