IE7 Float Problem

[Mathis]

Hallo zusammen!

Ich habe vereinfacht gesagt folgendes Konstrukt:

<fieldset>
  <legend>Titel</legend>
  <div>
    <label>Input1:</label>
    <input type="" ... />
  </div>
  <div>
    <label>Input2:</label>
    <input type="" ... />
  </div>
</fieldset>

Das Fieldset wird mit "overflow:hidden" gecleared, die div's sind left gefloatet. Das Fieldset ist so breit, dass die DIV's nebeneinander passen würden.. Allerdings sollen sie im Normalfall untereinander laden. Das habe ich darüber erreicht, dass das Fieldset ein großes rechtes Padding bekommt. Erreichen möchte ich damit ein mehrspaltiges Formular, indem Formularelemente nebeneinander landen, wenn man den DIV's nur die halbe Breite gibt. Bei der vollen Breite sollen sie nebeneinander landen. Das funktioniert auch wunderbar. Nur im IE7 nicht. Der packt die DIV's trotz des rechten Paddings im Fieldset nebeneinander und ignoriert das Padding. Was mach ich falsch?

[Kropff]

Dann sei so lieb und zeig uns mal den relevanten CSS-Code. Oder ein Online-Beispiel.

Peter

[Mathis]

Sry, hat jetzt etwas länger gedauert.. War krank .. Hier der CSS-Code zur Formatierung des Formulars:

	/* Form */
	form fieldset {
		border: 1px solid #68a851;
		padding:15px;
		padding-top:0;
		padding-bottom:20px;
		margin-bottom:20px;
		background:url(../images/formbg.png) left bottom repeat-x;
		padding-right: 413px;
		width:362px;

	}
	form fieldset legend {
		font-family:preston-web, Arial, serif;
		color:#006128;
		font-size:164.3%; /* 23px */
		font-weight:bold;
	}
	.with-calibri form fieldset legend { font-size:143.75%; }
	form fieldset > div {
		margin-top:10px;
		float:left;
		width:340px;
		padding-right:20px;
	}
	form fieldset > div.eindrittel {
		width:100px;
	}
	form fieldset > div.zweidrittel {
		width:220px;
	}
	form fieldset > div.viertel {
		width:70px;
	}
	form fieldset > div.halb {
		width:160px;
	}
	form fieldset > div.dreiviertel {
		width:250px;
	}
	form label {
		display:block;
		margin-bottom:2px;
		overflow:hidden;
	}
	.powermail_mandatory {
		color:#ff0000;
		padding-left:3px;
	}
	form input, form select, form textarea {
		width:100%;
		border:1px solid #68a851;
		padding:3px;
		font-family:Calibri, Verdana, Arial, sans-serif !important;
		font-size:100% !important;
		color:#555;
		background:url(../images/inputbg.png) repeat-x left top #fff;
	}
	form select {
		width:102.5%;
	}
	form input:focus, form select:focus, form textarea:focus {
		border-color: #960000;
		background:#fff6f6;
		color:#000;
	}
  .powermail_submit {
    background:#006128;
    border:1px solid #fff;
    padding:3px 17px 3px 10px;
    font-weight:bold;
    margin-top:6px;
    color:#fff;
    display:inline-block;
    text-decoration:none !important;
		width:auto;
  }
	.powermail_submit:focus {
		border-color:#fff;
	}
  .powermail_submit:hover {
    background-color:#008d3a;
  }

Der HTML-Code, der hierzu passt wäre bspw.

<form>
  <fieldset>
    <legend>Titel</legend>
    <div class="eindrittel"> <!-- sollte links mit 1/3-Breite erscheinen -->
      <label>Titel</label>
      <input ... />
    </div>
    <div class="zweidrittel"> <!-- daneben mit 2/3 Breite -->
      <label>Titel</label>
      <input ... />
    </div>
    <div> <!-- sollte eigentlich darunter mit voller Breite erscheinen -->
      <label>Titel</label> 
      <input ... />
    </div>
  </fieldset>
</form>

[Kropff]

Ich schaue mir das heute Abend mal an.

Peter

[Mathis]

Cool, danke dir! Ich kann dir auch gerne mal, wenn du mir ne E-Mail-Adresse gibst, die komplette Seite als HTML-Vorlage schicken. Die will ich hier nur ungerne reinstellen, weil das ein noch nicht veröffentlichtes Projekt ist..

[Kropff]

Das geht auch.

Peter

[Kropff]

So. das float: left aus form fieldset > div rausnehmen und dezidiert auf die einzelnen div-Klassen anwenden. Für die volle Breite benötigst du auch noch eine Klasse und die bekommt dann ein clear: both. Je nach Formular benötigst du noch ein zusätzliches Div mit einem clear: both.

Peter

[Mathis]

Cool, vielen Dank! Hat funktioniert