✔ Textarea und Textfeld schieben sich ineinander

[blubbbla]

Ich habe ein Formular aufgebaut und überall außer im IE behalten die Textfelder nach der Textarea keinen Abstand, sondern befinden sich dann genau innerhalb dieser:

<form action ="meine_gesuche.html" class="form">

<div id="angebot">
<div class="wrap">
<div class="form_left">
Kategorie:
</div>
<div class="form_right">
<select style="width:150px;">
<option>Kosmetik</option>
<option>Rat und Tat</option>
<option>Kinderbetreuung</option>
<option>&Auml;rzte</option>
<option>Essen und Trinken</option>
<option>Langeweile</option>
<option>Recht und Ordnung</option>
<option>Technik</option>
</select>
</div>
</div>
<div class="wrap">
<div class="form_left">
&Uuml;berschrift:
</div>
<div class="form_right">
<input type="text" size="57">
</div>
</div>
<div class="wrap">
<div class="form_left">
Detailbeschreibung des Angebots:
</div>
<div class="form_right" >
<textarea rows="10" cols="45"></textarea>
</div>
</div>
<div class="wrap">
<div class="form_left">
Maximale Anzahl der Teilnehmer:
</div>
<div class="form_right" >
<input type="text" size="10">
</div>
</div>
<div class="wrap">
<div class="form_left">
Termin - Typ
</div>
<div class="form_right" >

</div>
</div>
</div>
</form>

und das css dazu:

/* der Container für ein form - Element */
.form{
width:400px;
float:left;
}

/* die linke Spalte des form - Elements */
.form_left{
float:left;
text-align: right;
padding-left:10px;
margin-right: 100px;
height:30px;
}

/* die rechte Spalte des form - Elements */
.form_right{
float:right;
height:30px;
}

/* ein div- Element um andere divs zusammenzufassen */
.wrap {
margin-top:5px;
}

/* damit dieser Bereich sich der Höhe anpasst und nichts mehr daneben floatet*/
.wrap:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.wrap {display: inline-block;}

/* für den IE ne extra Wurscht*/
/* Hides from IE-mac \*/
* html .wrap {height: 1%;}
.wrap {display: block;}
/* End hide from IE-mac */

Wie krieg ich das hin, dass es wie im IE aussieht?

 

[Maik]

Hi,

der Grund hierfür ist die fixe Höhenangabe im Selektor .form_right, die der IE "fälschlicherweise" als Mindesthöhe interpretiert, und die Elementhöhe vergrößert, wenn der Inhalt das vorgegebene Maß überschreitet.

Die übrigen modernen Browser tun dies nicht, weshalb der nachfolgende Inhalt nach oben rutscht, und sich darüber legt.

Richte stattdessen für die modernen Browser eine Mindesthöhe ein:

/* die rechte Spalte des form - Elements */
.form_right{
float:right;
min-height:30px;
height:auto !important;
height:30px;
}

 

[blubbbla]

Das habe ich jetzt gemacht, aber im Firefox, Opera und Safari liegen die immer noch übereinander?

 

[Maik]

Bei mir führt der Vorschlag zum gewünschten Ergebnis.

 

[blubbbla]

Das ist jetzt der aktuelle CSS:

/* die rechte Spalte des form - Elements */
.form_right{
	float:right;
	min-height:30px;
	height:auto;
	height:30px;
}

Ich habe das auch mal bei form_left probiert, aber da tut sich auch nichts ?!

 

[Maik]

Dann schau dir bitte meinen fettgedruckten CSS-Code nochmal genauer an.

 

[blubbbla]

Habe ich doch übernommen? Bis auf das important.

 

[Maik]

Na, klingelt es jetzt?

Die !important-Regel ist erforderlich, damit die modernen Browser die nachfolgende height-Deklaration übergehen, die nur für den IE (<7) gilt.

 

[blubbbla]

Ich dachte das wäre nur ein Hinweis für mich ?! Danke

 

[Maik]

Einen Hinweis würde ich in einen Kommentar setzen:

/* die rechte Spalte des form - Elements */
.form_right{
float:right;
min-height:30px;
height:auto !important; /* Achtung: Die !important-Regel nicht löschen! */
height:30px;
}