Problem with IE - go figure

[linus72982]

My CSS works in FF, but not in IE - gee, never seen a post start with that

 

Anyway, I just have a simple div that wraps 3 input buttons, the width of the div is correct to fit the buttons (includes the border width, etc) and the div is margin auto'd to center.  Well, in IE, the second and third buttons show up centered below the first.  No matter how wide I make the containing div, they still show up under, so I don't think it is a width problem.  Is there an IE bug with this that I don't know about?  For reference, here is the CSS:

 

#logOptionButtons {
width: 305px;
margin: 0px auto;
text-align: center;
clear: both;
margin-top: 5px;
}

 

and here's the content:

 

<div id="logOptionButtons">
	<input type="checkbox" id="rememberMe" name="rememberMe" checked="checked" value="remember" />
	&nbsp <label for="rememberMe">Remember Me</label><br />
	<input type="hidden" value="login" name="processType" />
	<input type="submit" value="Login" class="loginButton" />
	</form>
	<button type="button" class="loginButton" onClick="window.location='<?php echo HOME_PAGE.REGISTER_PAGE; ?>'">Register</button>
	<button type="button" class="loginButton" style="width:125px;" onClick="window.location='<?php echo HOME_PAGE.FORGOTPWORD_PAGE; ?>'">Forgot Password</button>
</div>

 

Any ideas?

[nogray]

Why is this in the middle of the buttons </form>, it looks like your code will not validate and the </form> will add a line break in IE. close the form where it should (not in the middle of the div between the buttons).

[linus72982]

Well, it's not "supposed" to cut at the end, it is "supposed" to cut right where it is, buttons don't have to be in a form, especially buttons that just act like links.  That will probably fix the problem though, so I suppose I'll do it as a concession to Microsoft being a tool.  Form is not supposed to incur line breaks.

[cssfreakie]

well maybe use float:left on the elements