[CSS] Float

[bodo2005]

Ich bin gerade dabei ein Kontaktformular zu gestallten, aber leider will der Float im IE nicht funktionieren:

<div id='ref'>
		<b>Kontakt</b>
		<br /><br />
		<form action='' method='post'>
			<div id='kontakt_left'>
				<p>Vorname: </p><input type='text' name='vname' value='' /><br />
				<p>Nachname: </p><input type='text' name='nname' value='' /><br />
				<p>Email: </p><input type='text' name='email' value='' /><br />
				<p>Betreff: </p><input type='text' name='betreff' value='' /><br />
			</div>
			<div id='kontakt_right'>
				<p>Nachricht:</p><textarea name='text'></textarea><br />
				<p>Visuelle Best&auml;tigung: </p>
				<img src='{IMG}captcha.jpg' alt='Visueller Code' />
				<input type='text' name='captcha' value=''/><br />
			</div>
		</form>
	</div>

#ref
{
   margin: 0px;
   padding: 0px;
   background: white;
   width: 510px;
   padding: 10px;
   padding-top: 20px;
   font-size: 95%;
   min-height: 240px;
   text-align: justify;
}

		#ref dl
		{
			margin: 0px;
			padding: 0px;
		}
		
		#ref dd
		{
			margin: 0px;
			padding: 0px;
			font-size: 95%;
			text-align: justify;
		}
		
		#ref dd img
		{
			float: left;
			margin-right: 10px;
		}
		
		#ref dd a
		{
			padding: 2px;
			color: black;
			text-decoration: none;
		}
		
		#ref dd a:hover
		{
			color: white;
			background: black;
		}
		
		#ref dt
		{
			font-weight: bold;
			margin-bottom: 5px;
		}
		
		#ref dt:first-letter
		{
			font-size: 150%;
			font-family: Georgia;
		}
		
		#ref a
		{
			padding: 2px;
			color: black;
			text-decoration: none;
		}
		
		#ref a:hover
		{
			color: white;
			background: black;
		}
		
		#ref ul
		{
			margin: 0px;
			padding: 0px;
			margin-top: 10px;
			margin-left: 40px;
		}
		
		#ref li
		{
			line-height: 20px;
		}
		
		#ref p
		{
			width: 300px;
			margin: 0px;
			padding: 0px;
		}
		
		#ref input, #ref textarea
		{
			border: 1px;
			border-style: solid;
			border-color: #CCCCCC;
			padding: 2px;
			width: 150px;
			margin-top: 2px;
			margin-bottom: 10px;
		}
		
		#ref input:focus, #ref textarea:focus
		{
			border-color: black;
			background: #C6ECFF; 
		}
		
		#kontakt_left
		{
			width: 200px;
			float: left;
		}
		
		#kontakt_right
		{
			float: left;
			width: 300px;
		}
		
		#kontakt_right img
		{
			margin-bottom: 10px;
			margin-right: 10px;
			margin-top: 3px;
		}
		
		#ref textarea
		{
			width: 300px;
			height: 70px;
		}

Hat jemand eine Idee, worans liegen kann? Im Firefox und Opera gehts problemlos...

 

[hurga_gonzales]

Hi,

habs mir nicht durch und durch angesehen, aber Deine Styles sind bissel komisch.

#ref
{
margin: 0px;
padding: 0px;
background: white;
width: 510px;
padding: 10px;
padding-top: 20px;
font-size: 95%;
min-height: 240px;
text-align: justify;
}

REF hat eine Breite von 510px. Dann machst Du einige Angaben zu Padding, von denen nur das Letzte ziehen dürfte.

Nimm einfach

padding: 20px 10px 10px 10px;

und entferne die anderen Angaben.

Und was das Problem ist, ich gehe mal davon aus, dass Deine Fehlerbeschreibung

"aber leider will der Float im IE nicht funktionieren"

die keine ist, denn Du solltest beschreiben, WAS denn nicht funktioniert.
Anhand Deines Styles würde ich sagen, dass das was nicht funktioniert ist, dass es nicht floatet, sondern umbrochen wird.
Das liegt in Deinem Fall am kaputten Boxmodel des IE. Der IE zählt Padding fälschlicherweise zu den Ausmaßen hinzu, anstatt Padding, wie es eigentlich gedacht ist, nach innen zu ziehen. Dadurch, dass Du ein Padding von 10px angegeben hast, könnte ich mir vorstellen, dass die Boxen nicht mehr nebeneinander hinpassen (nur im IE).

Hast Du schon mal eine der Boxen (kontakt_left, kontakt_right) schmaler gemacht?´

Und als Tipp, ohne klugscheissern zu wollen:

- verwende anstatt des <b> immer <strong></strong>, wenngleich ich "Kontakt" in ein <h1> packen würde
- verwende keine <br/>, sondern pack einfach alles in einzelne Absätze (<p></p>)
- verwende quotes und keine Hochkomma für Deine Tag Parameter, das ist eigentlich falsch
- text-justify ist meiner Erfahrung nach nicht empfehlenswert, da das Ergebnis in HTML immer schlecht aussieht (es entstehen Satzwürmer, die wirklich unprofessionell aussehen); lass Text immer links anliegen, so ist es gedacht, denn eine Webseite beginnt links oben und endet rechts unten

Ich hoffe, Dir geholfen zu haben

Liebe Grüße
Hurga