A gap showing up in IE, not in Firefox

A gap surrounding an input box that won't go away.

[balzahk]

There is this gap that just won't go away. Here is the HTML code:

<div id="navright">

<h2>Company Info</h2>

<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="opportunities.html">Opportunities</a></li>

<li>Member Login</li>

<form action="verify.php" method="post"><input type="password" name="password" size="9">
<input type="submit" value="Submit">
</form>

<li><a href="contact.html">Contact Us</a></li>
<li><a href="legal.html">Legal Policy</a></li>

</ul>
</div>

The problem is that in IE, there is a huge gap between "Member Login" and the input box, as well as between the input box and "Contact Us". I even tried putting "Member Login" and the input box within the same <li></li> tags, but the gap is still there.

I even put the input box and submit button inside a <span> container and In Firefox, I was able to control the gap using CSS. However, this did nothing in IE.

One idea I just had was to put the input box and submit button in it's own <li></li> tags. Then, I could assign a different class to them and remove the bullet. I just tried it and was able to remove the gap from above the input box/button in IE, but there was still a big one underneath.

Anyone know a fix for this or in IE is that gap just going to be there no matter what? Using CSS would be ideal, of course, if possible.

Thanks in advance for suggestions.

[tedster]

The html you have will not validate, because the form element cannot be in the middle of a group of list items. Always start with valid code before fixing specific display problems. That way you are sure that you are not wrestling with any browser's error recovery routine.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[balzahk]

Thanks for the suggestions, but, the alternative I mentioned does, though:

<div id="navright">

<h2>Company Info</h2>

<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="opportunities.html">Opportunities</a></li>

<li>Member Login</li>

<li><form action="verify.php" method="post"><input type="password" name="password" size="9">
<input type="submit" value="Submit">
</form></li>

<li><a href="contact.html">Contact Us</a></li>
<li><a href="legal.html">Legal Policy</a></li>

However, there is still a large gap underneath the input box/button.

[tedster]

Have you tried using CSS to set margin-bottom for the form element?

<form style="margin-bottom:0;" ...etc

[encyclo]

I would recommend also setting

display:inline;

to the form element too, that usually solves such issues. :)

[balzahk]

Thanks, I got it to work.

This took out the gap:
<form style="margin:0;">

I had to put that straight into the code. Using CSS seemed to not work in IE.

Now, finally, it is consistent in both IE and FF.

[SuzyUK]

Using CSS seemed to not work in IE.

Setting the forms margin to 0 works because the gap was caused by the forms default margin, and x-browser handling of collapsing margins.. and it SHOULD still work via the stylesheet too, if it doesn't then there must be some other, more specific?, form rules in there that are overruling it. all you are doing by taking it inline (putting the CSS inline) is using the cascade to get more specific.

If you want to use selectors to get more specific instead, so you can put in your stylesheet then try

#navright li form {margin: 0:}

in your stylesheet if that still doesn't work there's something else wrong