floatendes div springt nach unten nur im internet explorer

dane7 · 09.07.2013

Nun hab ich dank Eurer tatkräftigen Unterstützung meine erste Website erstellt, alles ist so, wie ich es mir vorgestellt habe. Nur ein Problem mit dem Internet Explorer: das "txt"-div springt nach unten unter das erste gefloatete div … – in Safari, Opera, Firefox passt alles! Wo ist das Problem?

HTML:

<body id="body">
<div id="wrapper">
  <div id="logo"><img src="Bilder/logo.png" alt="logo " width="378" height="71" hspace="0" vspace="0" /></div>
  <div id="blume"></div>
  <div id="stein"></div>
  <div id="eigenschaften">
    <p><strong>txt</strong> — txt<br />
      <strong>txt</strong> — txt<br />
      <strong>txt</strong> — txt<br />
      <strong>txt</strong> — txt<br />
      <strong>txt</strong> — txt<br />
  </div>
  <div id="txt">
    <h1>Überschrift1</h1>
    <h3 class="h3farbig">überschrift
    </h3>
    <p>mein text  </p>
    <div class="links"><img class="links" src="Bilder/meinbild.png" alt="meinbild" width="219" height="162"/></div>
      <p>mein text </p>
      <h3 class="h3farbig">überschrift
      </h3>
      <p>mein text 
      </p>
  </div>
  <div id="footer"></div>
</div>
</body>

Code:

/* Simples CSS-Reset */
* {padding:0; margin:0; border:none; outline:none; font-size:100%;}
html, body {min-width:100%; min-height:100%;}
#body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 19px;
	color: #000;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: url(Bilder/ht.png);
	background-repeat: repeat-x;
	background-position: center top;
}
#wrapper {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 19px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	margin-top: 15px;
	margin-bottom: 0px;
}
#blume {
	background-image: url(Bilder/bl.png);
	background-repeat: no-repeat;
	background-position: 35px 100px;
	height: 550px;
	width: 512px;
	float: left;
	clear: right;
}
#txt {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 25px;
	color: #000;
	float: right;
	height: auto;
	width: 467px;
	margin-top: 40px;
	text-align: justify;
	padding-right: 40px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 0px;
	font-style: normal;
	font-weight: normal;
}
#eigenschaften {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
	width: 408px;
	height: 96px;
	text-align: left;
	vertical-align: top;
	float: right;
	line-height: 16px;
	letter-spacing: 1pt;
	margin-top: 156px;
}
#stein {
	background-image: url(Bilder/n.png);
	background-repeat: no-repeat;
	height: 94px;
	width: 100px;
	float: left;
	margin-top: 156px;
	background-color: #FFF;
}
#logo {
	height: 70px;
	text-align: right;
	margin-right: 38px;
}
.links {
	float: left;
	margin-right: 10px;
	margin-top: 3px;
}
#footer {
	height: 50px;
	text-align: right;
	clear: both;
	bottom: 0px;
}

Myhar · 09.07.2013

AW: floatendes div springt nach unten nur im internet explorer

Ich kann das exakte Problem gerade nicht nachvollziehen, aber eventuell hilft dieser Hinweis: Beim floaten kommt es sehr genau auf die einzelnen Breiten an, schau einmal, ob es testweise hilft, die Breite zu verkleinern.
Bzw. drück F12 im IE und untersuche das betroffene Element, dann siehst du, wie groß es insgesamt ist. Springende divs in Verbindung mit float haben oft den Ursprung, dass entweder falsch gecleared oder falsche breiten verwendet werden.

dane7 · 09.07.2013

AW: floatendes div springt nach unten nur im internet explorer

F12 ist bei mir nur die Lautstärke (mac)…?
Die Breite des txt-divs hatte ich schon um 4px verringert, ist also kleiner als der vorhandene Platz, gecleared habe ich mit dem footer-element.

Myhar · 09.07.2013

AW: floatendes div springt nach unten nur im internet explorer

Auf dem Mac gibt es doch keinen IE mehr? Nur IE5, aber der wird nicht mehr weiterentwickelt.
Edit: Verwendest du eventuell einen Laptop? Dann musst du die Lautstärke, Helligkeit, etc. Funktionen deaktivieren um an die "wirkliche" F12 Funktion im IE zu kommen. Das geht eigentlich immer mit der Fn Taste.

cythux · 09.07.2013

AW: floatendes div springt nach unten nur im internet explorer

Browserreset nutzen, zu dem muss man beim floaten auch einen Clearfix, clear nutzen

und nur im Footer bringt es dir ja nicht viel

Code:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

dane7 · 10.07.2013

AW: floatendes div springt nach unten nur im internet explorer

Myhar schrieb:
Auf dem Mac gibt es doch keinen IE mehr? Nur IE5, aber der wird nicht mehr weiterentwickelt.
Edit: Verwendest du eventuell einen Laptop? Dann musst du die Lautstärke, Helligkeit, etc. Funktionen deaktivieren um an die "wirkliche" F12 Funktion im IE zu kommen. Das geht eigentlich immer mit der Fn Taste.

Ja, IE 5 für mac; verwende keinen Laptop, + wie gesagt ist die Breite des containers geringer als der vorhandene Platz …

dane7 · 10.07.2013

AW: floatendes div springt nach unten nur im internet explorer

Browserreset hab ich drin, zum testen für IE 6 /7 win werde ich es jmd schicken, danke erstmal