Problems rendering pages in FF and IE

Question

I am having a constant trouble with pages not rendering correctly between FF and IE. not my code below. "Select an Account" should be next to the drop down such as: Select an Account Type: "then my form" however my form goes to the next line when I want it next to "Select an Account". In IE it renders correctly in FF it does not.

<p><b><strong>Select an Account Type
<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="traditional">Traditional Account
<OPTION VALUE="paperless">Paperless Account

</SELECT>
</FORM></b></strong></p>

Answer 1

That markup is seriously hideous. Anyway, your problem is that <form> elements are (according to the standards) block elements. To fix this, use the following CSS:

form { display: inline; }

Answer 2

form is a block element and should break to a new line ..

you should set its display to inline display:inline with css if you want it to continue in the same line as the text..

Answer 3

A good testing tool is http://litmusapp.com as it allows you to see how a page will render in different browsers.

In your particular case, you need to close your option tags to create a proper dropdown box.

<option name="x">whatever</option>

Answer 4

The problem is that the text "Select an Account Type" is "outside" the FORM element. And the FORM element has default margins and padding applied by the browser.

I suggest this code instead

<form name="myform">
<label for="mylist"><strong>Select an Account Type</strong></label> <select id="mylist" name="mylist"><option value="traditional">Traditional Account</option>
<option value="paperless">Paperless Account</option></select>
</form>

Hope this helps

Answer 5

welcome to xhtml...STOP USING CAPS IT HURTS MY EYES.

<form name="myform">
<label for="mylist">Select an Account Type</label>
<select id="mylist" name="mylist">
<option value="traditional">Traditional Account</option>
<option value="paperless">Paperless Account</option>
</select>
</form>