Hidden Fields Adding White Space

HTML & CSS
1

Hi guys

I have two hidden fields on a form, and for some reason they’re adding extra white space to the final page in IE7, which unfortunately is the majority of my users (intranet). Can anyone figure out why?

<input type="hidden" value="aplocate" name="module" />
<input type="hidden" value="update" name="mode" />

Works fine in Firefox (unsurprisingly) but not in IE7. Any ideas?

Thanks all

2

Do you have any CSS rules that may affect this? For instance,

input {padding:4px}

Just an idea.

The white-space between and around the elements may also play a role if there are CSS rules that unexpectedly affect things.

3

I’m pretty sure that I don’t. The spaces are physical spaces, rather than padding, three of them. It’s as if someone has written     inbetween the two input buttons that I have. I use the same CSS all over the site and the buttons are all equally spaced. It’s just where these hidden fields are that I’ve got the problem. I might try some CSS to make them invisible and see if that helps. I bet it’s something really simple that’s staring straight at me

4

If your code is indented and between other elements, like this:

<!-- indented input fields -->
   <input type="text" name="...">
   <input type="hidden" value="..." name="...">
   <input type="hidden" value="..." name="...">
   <input type="text" name="...">

my guess is that the whitespace from the indentation is being interpreted as having to be shown.

5

Ah, possibility. I’ll try it out and see if it’s any better

6

Hello,
Please post any type of CSS code that you have so that we can take a look at that. Because, if you don’t have any table borders or padding then it will be caused by a a css issue and we must see that in order to help you out.

7

You’re joking right? The CSS for the site is huge, but as I say, these exact same buttons are used all over the site with no problems, which is why I thought it odd

8

I’ve removed the white space between each of the inputs and it now works OK in IE7 as well as Firefox

9

You didn’t told how you fixed the issue…

Here is my way
Wrap hidden fields in DIV and set DIV’s display to none

<input type=“text” name=“…”>
<div style=“display:none;”>
<input type=“hidden”>
<input type=“hidden”>
<input type=“hidden”>
<input type=“hidden”>
</div>
<input type=“text” name=“…”>

10

I removed it by removing white space. As in:
<input type=“hidden”><input type=“hidden”> :slight_smile: