muse Html/css insert not styling correctly - html

Question

I have searched all over but cant seem to fix my problem.
Somehow I am missing the solution to this problem.
I am new to Muse, but quite familiar with html and css.
I made this contact form in a text editor, it works perfect in DW and jsfiddle. Moment I insert it into Muse it crushes it.
I have tried external style sheet, internal with Object insert, inline with Object insert. All give me the same result (image below).
Someone even suggested putting a external style sheet in the assets folder, I did and even tried the css folder and normal folder, no luck.
Is this possible to fix or does Muse not allow this type of thing?
Thanx in advance for all helpful replies.
Samm
This is what the code looks like:
label {
float: left;
width: 6em;
text-align: right;
margin-right: 10px;
}
.submit {
margin-left: 6em;
}
fieldset {
width: 500px;
background-color: #FFDE00;
border: none;
}
p {
font-family: arial;
}
<fieldset>
<form action="mailto:xxx#hotmail.com"
method="post" enctype="text/plain">
<!-----Form heading----->
<p> Tell us who you are </p>
<!-----Inout customer details----->
<p>
<label class="username" for="first Name">
First Name: </label>
<input type="text" name="firstname" id="first Name"
size="35" maxlength="40" /> </p>
<p>
<label class="username" for="Email">
Email: </label>
<input type="text" name="email" id="Email"
size="35" maxlength="40" /> </p>
<!-----Dropdown make----->
<p> Please select your make: </p>
<p>
<select name="make">
<option value="3M">3M</option>
<option value="3M">Acer</option>
<option value="3M">Ask</option>
<option value="3M">BenQ</option>
<option value="3M">Epson</option>
<option value="3M">Hitachi</option>
<option value="3M">InFocus</option>
<option value="3M">LG</option>
<option value="3M">Mitsubishi</option>
<option value="3M">NEC</option>
<option value="3M">Optoma</option>
<option value="3M">Panasonic</option>
<option value="3M">Philips</option>
<option value="3M">Samsung</option>
<option value="3M">Sanyo</option>
<option value="3M">Sharp</option>
<option value="3M">Sony</option>
<option value="3M">Toshiba</option>
<option value="3M">Viewsonic</option>
<option value="3M">Vivitek</option>
<option value="3M">Other</option>
</select> </p>
<!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model sticker if unsure what number to use: </p>
<p>
<input type="file" size="30" /> </p>
<!-----Text Area----->
<p> For any other comments or if you selected Other please specify here: </p>
<p>
<textarea name="comments" rows="5" cols="40">
Enter more comments here...
</textarea> </p>
<!-----Submit & Reset buttons----->
<p class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Clear the form" /> </p>
</form>
</fieldset>
This is what the start and end result looks like:
Not Nice

Answer 1

You'll probably find that DW uses alot of browser initial CSS styling, where as Muse probably resets everything. So you have to state things from scratch, such as border, margins, paddings etc.
For example, each of your paragraph elements need to have some margin-bottom applied. This will immediately make it look much more like the first example.
label {
float: left;
width: 6em;
text-align: right;
margin-right: 10px;
}
.submit {
margin-left: 6em;
}
fieldset {
width: 500px;
background-color: #FFDE00;
border: none;
}
p {
font-family: arial;
margin-bottom:1em;
}
<fieldset>
<form action="mailto:xxx#hotmail.com"
method="post" enctype="text/plain">
<!-----Form heading----->
<p> Tell us who you are </p>
<!-----Inout customer details----->
<p>
<label class="username" for="first Name">
First Name: </label>
<input type="text" name="firstname" id="first Name"
size="35" maxlength="40" /> </p>
<p>
<label class="username" for="Email">
Email: </label>
<input type="text" name="email" id="Email"
size="35" maxlength="40" /> </p>
<!-----Dropdown make----->
<p> Please select your make: </p>
<p>
<select name="make">
<option value="3M">3M</option>
<option value="3M">Acer</option>
<option value="3M">Ask</option>
<option value="3M">BenQ</option>
<option value="3M">Epson</option>
<option value="3M">Hitachi</option>
<option value="3M">InFocus</option>
<option value="3M">LG</option>
<option value="3M">Mitsubishi</option>
<option value="3M">NEC</option>
<option value="3M">Optoma</option>
<option value="3M">Panasonic</option>
<option value="3M">Philips</option>
<option value="3M">Samsung</option>
<option value="3M">Sanyo</option>
<option value="3M">Sharp</option>
<option value="3M">Sony</option>
<option value="3M">Toshiba</option>
<option value="3M">Viewsonic</option>
<option value="3M">Vivitek</option>
<option value="3M">Other</option>
</select> </p>
<!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model sticker if unsure what number to use: </p>
<p>
<input type="file" size="30" /> </p>
<!-----Text Area----->
<p> For any other comments or if you selected Other please specify here: </p>
<p>
<textarea name="comments" rows="5" cols="40">
Enter more comments here...
</textarea> </p>
<!-----Submit & Reset buttons----->
<p class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Clear the form" /> </p>
</form>
</fieldset>