Hidden input take space in IE

Question

On this page at the bottom in the form to add comments, I have a set of hidden HTML inputs. Works fine, except on IE.

In IE, they take space and move the form down. I suspect it is because there are generic CSS rules for input, but I'm not 100% sure. If that's the case, how do I make it so that input types "hidden" don't get affected by CSS rules? If that's not it, then what's going on?

Just came across this, what I would do is use jQuery to add a class to input[type=hidden] and then set .hidden (assuming that's the class name) to display: none;. It should work but I haven't tested it. — ClarkeyBoy
– ClarkeyBoy, Commented Jul 23, 2012 at 7:57

Zoltan Toth · Accepted Answer · 2012-08-15 18:46:16Z

1

Use IE Developer Tools( F12 ) to find out which object is really taking space.

edited Aug 15, 2012 at 18:46

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

answered Jul 10, 2011 at 10:23

AMIB

3,4503 gold badges23 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan H Over a year ago

I used debugbar and it all points to the hidden input. I may be mistaken.

ЯegDwight · Accepted Answer · 2012-09-28 10:08:36Z

1

Add a float: left;. It'll help.

edited Sep 28, 2012 at 10:08

ЯegDwight

25.3k10 gold badges47 silver badges52 bronze badges

answered Aug 13, 2012 at 15:31

Artur Stary

7442 gold badges14 silver badges31 bronze badges

1 Comment

Ruan Mendes Over a year ago

How will it help? Answers should have an explanation

Zoltan Toth · Accepted Answer · 2012-08-15 18:50:50Z

For IE add conditional tags to handle #content and .comment-sbt-btn

Do this:

Remove width: 100% from #content
Clear left the and remove margin-left on .comment-sbt-btn:

 clear: left; margin-left: inherit;

This will fix the rendering problem in IE.

Antony Scott · Accepted Answer · 2011-07-10 10:34:40Z

0

I found this worked for me with a hidden submit button in IE

<input type="submit" style="width:0; height:0; border:0; background-color:inherit; overflow:hidden;" />

Maybe it'll work for other types of hidden controls

answered Jul 10, 2011 at 10:34

Antony Scott

22.1k12 gold badges64 silver badges95 bronze badges

2 Comments

Nathan H Over a year ago

Is there a way to do it globally via a CSS rules? Without writing a class name or modifying all the html across the site?

Antony Scott Over a year ago

I'm sure you could either put a class on all the hidden inputs or apply the relevant CSS via jQuery

Collectives™ on Stack Overflow

Hidden input take space in IE

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Related