Removing whitespace from forms

[davidjwest]

Hello,

I've got the following map viewer coded:

http://www.ben-hope.com/map_viewer_v5.php

As you can see the city terrain is causing problems with whitespace, these are actually submit buttons as part of a form, how can I remove this extra whitespace?

I tried this CSS:

Code: [Select]

form
{
display: inline;
margin: 0px;
padding: 0px;
border: 0px;
}

Thanks for any help.

[CygnusX]

Its definitely your <form> tag thats causing the spaces.  Try adding height: 0px; width: 0px; maybe?

[Zeggy]

Something is causing the form element to be 29px tall, instead of 25px like the rest of the row.

I think it's your hidden input elements in the forms, they all have margins of 2px.

[Harkins]

The problem is whitespace in the HTML. Because all of these little tiles are displayed inline, whitespace between them matters. Your <form> tags are indented in your PHP and the tabs are leaking into the HTML. Delete them, as well as the spacing between the hidden inputs.

If you had made the tiles all float left they'd be displayed in block box model and the whitespace between them would be ignored.

[davidjwest]

The problem is whitespace in the HTML. Because all of these little tiles are displayed inline, whitespace between them matters. Your <form> tags are indented in your PHP and the tabs are leaking into the HTML. Delete them, as well as the spacing between the hidden inputs.

If you had made the tiles all float left they'd be displayed in block box model and the whitespace between them would be ignored.

Nice ideas, thanks - this has made some improvement but not fixed it entirely.

The float left thing caused a bit of a mess, for some reason the <br> at the end of each row wasn't enough to force the next row of images onto the next row and so I ended up with a mess, using two <br> tags fixed that but then there's whitespace between the rows, odd.

[davidjwest]

Its definitely your <form> tag thats causing the spaces.  Try adding height: 0px; width: 0px; maybe?

It's definitely the <form> tag as when I remove that it's fine, but this idea doesn't work, thanks for the advice though.

[davidjwest]

Something is causing the form element to be 29px tall, instead of 25px like the rest of the row.

I think it's your hidden input elements in the forms, they all have margins of 2px.

Well spotted, but when I set margins to 0px for the input elements it doesn't fix the problem, thanks anyway.  Anyone else got any ideas?

[davidjwest]

Harkins wins the prize, it was a \n I'd left in the PHP, thought I'd remove them all!  I was told best to use \n in the code as it helps debugging lol

Thanks everyone, I can go an lie down in a darkened room somewhere now.

 

[Harkins]

Thanks everyone, I can go an lie down in a darkened room somewhere now.

Heh, glad that fixed it. This was a fun puzzle, it's the first time in years that a layout bug has stumped me for a few minutes, I used to do a ton of this for my job.