CSS im Normalen HTML und in Typo3

Hoi!
Ich versuche gerade meinem Content so ne Art Box mit zu geben. In HTML klappt das wunderbar nur Typo3 schreibt wirsche Dinge in den Source und ich hab noch nicht rausgefunden woher sie kommen...

Hier mal der HTML-Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #FFF;}
/* ----- Überschrift ----- */
.p1 {width: 100%; margin-bottom: 0px; color: black; font-weight: bold; text-align: center; height: 20px;
/* Werte für Schriftart, -größe, und Hintergrundfarbe in der Überschrift */
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 12px; 
	background: red;
}
/* Hier nichts ändern */
.p1-left {float: left; height: 20px; width: 100%; margin-right: -13px; background: transparent url(p1-links.gif) no-repeat top left;}
.p1-right {float: right; height: 20px; width:13px; background: transparent url(p1-rechts.gif) no-repeat top left;}
/* ------------------------ */

/* ----- Textblock ----- */
.p2 {width: 100%; margin-bottom: 0px; margin-top: 0px;  padding-left: 3px; margin-right: -3px;
/* Werte für Schriftart, -größe, und Hintergrundfarbe im Textfeld */
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 12px;
	background: #CCC; 
}
/* ---------------------- */

/* ----- Unterteil ----- */
.p3 {width: 100%; margin-top: 0px; margin-bottom: 0px; line-height: 10px; font-size: 1px; height: 10px; 
/* Wert für Hintergrundfarbe im Teil unter der Textbox */
	background: #CCC;
}
/* Hier nichts ändern */
.p3-left {line-height: 10px; float: left; height: 10px; width: 100%; margin-right: -13px; background: transparent url(p3-links.gif) no-repeat top left;}
.p3-right {line-height: 10px; float: right; height: 10px; width:13px; background: transparent url(p3-rechts.gif) no-repeat top left;}
/* --------------------- */

/* ----- Überschrift ----- */
.p4 {width: 100%; margin-bottom: 0px; color: black; font-weight: bold; text-align: center; height: 20px;
/* Werte für Schriftart, -größe, und Hintergrundfarbe in der Überschrift */
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 12px; 
	background: orange;
}
/* Hier nichts ändern */
.p4-left {float: left; height: 20px; width: 100%; margin-right: -13px; background: transparent url(p1-links.gif) no-repeat top left;}
.p4-right {float: right; height: 20px; width:13px; background: transparent url(p1-rechts.gif) no-repeat top left;}
/* ------------------------ */

/* ----- Textblock ----- */
.p5 {width: 100%; margin-bottom: 0px; margin-top: 0px;  padding-left: 3px; margin-right: -3px;
/* Werte für Schriftart, -größe, und Hintergrundfarbe im Textfeld */
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 12px;
	background: #CCC; 
}
/* ---------------------- */

/* ----- Unterteil ----- */
.p6 {width: 100%; margin-top: 0px; margin-bottom: 0px; line-height: 10px; font-size: 1px; height: 10px; 
/* Wert für Hintergrundfarbe im Teil unter der Textbox */
	background: #CCC;
}
/* Hier nichts ändern */
.p6-left {line-height: 10px; float: left; height: 10px; width: 100%; margin-right: -13px; background: transparent url(p3-links.gif) no-repeat top left;}
.p6-right {line-height: 10px; float: right; height: 10px; width:13px; background: transparent url(p3-rechts.gif) no-repeat top left;}
/* --------------------- */

</style>
<div style="width: 300px; float: left;">
<p class="p1"><span class="p1-left">Überschrift</span><span class="p1-right"></span></p>
<p class="p2">text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text text</p>
<p class="p3"><span class="p3-left"></span><span class="p3-right"></span></p>
</div>
<div style="width: 10px; float: left;">&nbsp;</div>
<div style="width: 300px;float: left;">
<p class="p4"><span class="p4-left">Überschrift</span><span class="p4-right"></span></p>
<p class="p5">text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text text</p>
<p class="p6"><span class="p6-left"></span><span class="p6-right"></span></p>
</div>

und hier das was Typo 3 daraus macht:

      <p class="p1"><span class="p1-left">Überschrift</span><span class="p1-right"></span></p>
      <br />
      <img src="clear.gif" width="1" height="5" border="0" class="spacer-gif" alt="" title="" /><br />
      <p style="margin:0 0 0 0;"> 
      <p class="p2">text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text tex
text text text text text text text text
text text text text text text text text
text text text text text text text text
      <p> 
      <p class="p3"><span class="p3-left"></span><span class="p3-right"></span></p>
      <p></p>