✔ Darstellungsprobleme

[napsi]

Liebe Kollegen!

Ich habe ein Problem:

weiters wird der Content im Firefox über den Head gestellt. was mache ich falsch?

bitte um hilfe

* {                           /* alle Elemente sollen urspruenglich keine Innen- und Aussenabstaende haben */
        margin: 0;
        padding: 0;
        /*border: 1px dashed red;*/
}

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 980px;
        margin: 0;
        padding: 0;
}

div#pagewrap {
        width: 980px;
}
#head {
	width: 854px;
	margin-top: 10px;
	margin-left: 63px;
	
}


#head table {
	border: 0;
	margin-bottom: 10px;
	float: left;
	color:#000000;
}

#head table td {
	height: 65px;
	font-size:10px;
	color:#000000;
}

#head table td img{
	margin-top: 5px;
	text-align: center;
}

#head table td a {
	color:#FFFFFF;
	text-decoration:none;
}

#head table td img a:hover {
	color:#FFFFFF;
	background-color:#CCCCCC;
}

#content_start {
	width: 854px;
	height: 426px;
	overflow:auto;
	border: 2px;
	margin-left: 63px;
	margin-top: 5px;
	border-color:#EF9508;
	border-style:solid;
}

#content {
	width: 854px;
	height: 426px;
	border: 2px;
	border-color: #EF9508;
	border-style:inset;
	margin-left: 63px;
	margin-top: 5px;
	padding: 3px;
}

#content .links {
	float:left;
	width: 200px;
}

#content .rechts {
	width:650px;
	float:right;
	overflow:auto;
   	position: relative;
}

#content p {
	color: #818084;
	line-height: 16px;
	padding: 5px 0 5px 0;
	font-size:12px;
}

#content p a {
	font-weight:bolder;
	text-decoration:none;
	color:#818084;
}

#content p a:hover {
	font-weight:bolder;
	text-decoration:none;
	color: #EF9508;
}

#content ul {
	color: #818084;
	font-size:12px;
}

#content ul li {
	list-style-image:url(../img/Element/px_technik1.jpg);
	line-height: 16px;
}

#content img {
	float: right;
	padding:3px;
}

#content h1 {
	font-weight:bolder;
	font-size:25px;
	text-align:left;
	/*float:left*/
	padding-top: 200px;
}
	
#content h2 {
	font-weight:bolder;
	font-size:15px;
	text-align:left;
	/*float:left*/
	padding: 5px;
}

#content table {
	float: right;
	margin-top: 10px;
}

#content table th {
	font-weight:bold;
	font-size:13px;
	text-align:left;
}



#foot {
	width: 854px;
	height: 44px;
	margin-left: 63px;
}

#foot table {
	border: 0;
	margin-top: 10px;
	float: right;
}

#foot table td {
	color: #818084;
	font-size:11px;
	font-weight:bold;
	padding:5px;
}
#foot table td a{
	color: #818084;
	font-size:11px;
	font-weight:bold;
	padding:5px;
	text-decoration:none;
}

#foot table td a:hover {
	color: #EF9508;
}

#foot table td a:active {
	color: #818084;
}


fieldset.form {
         border:0px solid #CCCCCC;
         display:block;
         padding:0em 0em;
         width: 96%;
		 font-size:12px;
		 font-style:normal;
		 margin-left: 3px;
		 /*line-height:14px;*/
}

fieldset.form input, fieldset.form select {
         margin:0 0 5px 0;
         /*background:#EDF7FC;
         border:1px solid #AEDBF0;
         font:bold 13px Verdana, Arial, Helvetica, sans-serif;
         color:#267DAC;*/
         /*position:relative;*/
		 font-size:12px;
		 font-style:normal;
		 font-weight:bold;
		 line-height:14px;
}

fieldset.form input, fieldset.form textarea, fieldset.form select {
         margin-left:210px;
         display:block;
}

label {
         float:left;
         display:block;
		 width:160px;
		 /*position:absolute;*/
}

img {
	margin: 2px;
}

<div id="content">
	<div class="links">
		<h1 style="color:#003A83">technik</h1>
	</div>

	<div class="rechts">
	<p><img src="img/Element/mio_ofen_antrazit.jpg" alt="" width="111" height="150" style="float:left"><img src="img/Element/mio_paar_packen.jpg" alt"" style="float:left"><img src="img/Element/mio_zusammenbau.jpg" alt "" style="float:left"><img src="img/Element/mio_wein.jpg" alt "" style="float:left"></p>
	<br>
	<p style="padding-left:248px">Wissen und Erfahrung. MIO wurde von Heizungsspezialisten entwickelt und zeichnet sich durch
einen sehr hohen Wirkungsgrad aus. 85% der im Holz gespeicherten Energie wird während der
Verbrennung als Wärme abgegeben.</p>
<p style="padding-left:248px"><strong>Vorteile die zählen</strong><br></p>
<ul style="padding-left:248px">
<li>MIO wurde durch die Forschungs- und Versuchsanstalt des Österreichischen Kachelofenverbandes geprüft und typisiert.</li>
<li>Keine Technische Abnahme durch den Rauffangkehrer erforderlich</li>
<li>Aufbau geschieht ohne großen Aufwand und ohne Schmutz im Wohnbereich.</li>
<li>Schamottsteine im Feuerraum sind bei Bedarf einfach und mit wenigen Handgriffen austauschbar.</li>
<li>Für externe Verbrennungsluftzufuhr geeignet (kontrollierte Wohnraumlüftung).</li>
<li>Bauseitig keine Maßnahmen notwendig</li>
<li>Umfangreiches Zubehör</li>
<li>Schnelle und saubere Montage</li>
<li>MIO ist förderbar</li>
<li>Heizbares Raumvolumen: bis 200 m3*</li>
</ul>
<br><p>
* Diese Angabe ersetzt keine Heizlastberechnung
</p>
    
  </div>
</div>

die seite ist unter
http://www.mio-ofen.at/mio-ofen
einsehbar

lg.

Napsi

 

[Maik]

Hi,

weiters wird der Content im Firefox über den Head gestellt. was machen ich falsch?

du hast es versäumt, die Floatumgebung in #head anschließend zu "clearen", um wieder den normalen Textfluß im Dokument herzustellen.

<div id="head" class="clearfix">

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Oder

#content_start {
        width: 854px;
        height: 426px;
        border: 2px;
        margin-left: 63px;
        margin-top: 5px;
        border-color:#EF9508;
        border-style:solid;
        clear:both;
}

mfg Maik

 

[napsi]

danke
passt