Forms and lists have space below them

All my <form> tags and <li> tags seem to have an extra line of transparent space below them, but only in I.E.

Is this a regular occurence? How can I get rid of it?

CSS:

#loginbar {
background-color: #B57B46;
width: auto;
padding: 1px;
font: bold 10px Arial, Helvetica, sans-serif;
color: #000000;
margin-bottom: 1px;
text-align: right;
height: 16px;
font-weight: bold;
}

input.loginbar {
background: #cccccc;
color: #000000;
border: 1px solid #000000;
font: bold 10px Arial, Helvetica, sans-serif;
height: 14px;
width: 50px;
vertical-align: middle;
}

HTML:

<div id="loginbar">
<form name="login" method="post" action="index.php?process=login">
<input name="u" type="text" class="loginbar" />
<input name="p" type="password" class="loginbar" />
<input name="l" type="submit" class="loginbar" value="Login" />
</form>
</div>
Thanks!

Try applying margin-bottom: 0; and padding-bottom: 0; to the elements.

Hmmpft... Didn't work, If anyone is interested the site can be found at http://www.veneratiohq.org/index.php

I know the coding is probably terrible, and the page looks terrible... but its only for a few friends I know, so I'll pretty it up once it works.

Any other ideas?

mysql error


Warning: mysql_connect(): Access denied for user: 'newmand2_arbiter@localhost' (Using password: YES) in /home/newmand/public_html/conn.php on line 5
Unable to connect to MySQL

sorry about that... I was in the middle of switching servers - all works fine now

http://www.veneratiohq.org/index.php

IE mishandles whitespace on li elements.

Try removing whitespace after </li> like so:


<ul>
<li>List Item</li><li>
List Item</li><li>
List Item</li><li>
List Item</li><li>
List Item</li><li>
List Item</li><li>
Last Item</li>
</ul>


It's sort of ugly, but it works :)

Thanks :) worked a treat...

Can I do anything about the <form> tag?

The form tag's spacing is probably just a margin. Also, check that it's not the margin of a containing element that's pouring out.

If form { margin: 0; } doesn't fix it, but form * { margin: 0; } does, then it's something inside it.

Thanks so much :)

however... i seem to have an extra 'thing' below the menu... the other blue bar thing? I'm guessing its the whitespace again?

I left it as:


</li>
</ul>


But you may want to make it


</li></ul>


Might fix it?

thanks - sorted it just as you posted :)

thanks for the help everyone