Kompatibilität Firefox und IE Probleme

[Darian]

Hallo Leute,

habe wie vielleicht ein paar schon wissen mit Firefox und CSS etwas gemacht, und mit IE passt mir das aber gar nicht. Eine Steuerelement hüpft einfach nach unten, und mit FF nicht.

Um nicht viel schreiben zu müßen, habe ich Fotos und Code, das ist glaube ich selbst erklärend.

HTML:

<div id="customer_request">
	<h2>Buchungsanfrage absenden</h2>
	<h3 style="text-align:center">{$hotelname}</h3>
	<div id="form">
		<form name="customer_request" action="{$smarty.const.DOCUMENT_ROOT|cat:'index.php'}?action=customer_request&menu=off" method="post">
			<ul>
				<li><label>Name:</label>
				<input type="text" size="40" name="name" value="{$request.name}"></li>
				<li><label>Adresse:</label>
				<input type="text"  size="40" name="direction" value="{$request.direction}"></li>
				<li><label>E-Mail:</label>
				<input type="text" size="40" name="email" value="{$request.email}"></li>
				<li><label>Telefon:</label>
				<input type="text" size="40" name="tel" value="{$request.tel}"></li>
				<li><label id="select1">Erwachsene:</label>
				<select name="num_adult" size="1">
					<option value="0">-</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
				</select></li>
				<li><label id="select2">Kinder:</label>
				<select name="num_kids" size="1">
					<option value="0">0</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
				</select></li>
				<li id="date">
					<li><label>von</label>
					<input type="text" size="10" id="date_start" name="date_start" value="{$request.date_start}"></li>
					<li><label>bis</label>
					<input type="text" size="10" id="date_end" name="date_end" value="{$request.date_end}"></li>
				</li>
				<li>
					<input type="submit" class="button" name="submit" value="Absenden">
					<input type="reset" class="button" id="reset" name="reset" value="Löschen">
					<input type="hidden" name="hotel_id" value="{$request.hotel_id}">
				</li>
			</ul>
		</form></div>

Und hier nun der dazugehörige CSS:

/*CUSTOMER REQUEST PAGE - customer_request.tpl*/

#customer_request {
margin:10Px;
}

#customer_request #form {
float:left;
width:600Px;
}

#customer_request #error {
margin-left:600Px;
margin-right:10Px;
margin-top:10Px;
}

#customer_request ul {
list-style:none;
margin:20Px;
margin-top:30Px;
padding:0Px;
}

#customer_request li label { 
float:left;
width:200px;
margin-left:20Px;
}

#customer_request li label#select1 {
width:200Px;
float:left;
}

#customer_request li label#select2 {
width:120Px;
margin-left:60Px;

}

#customer_request li select {
float:left;
}

#customer_request li#date {
clear:left;
padding-top:4Px;
}

#customer_request li input.button {
margin:15Px 0Px 0Px 160Px;
float:left
}

#customer_request .text_center {
font-style:oblique;
font-size: 1.0em;
text-align:center;
}

Wie seht ihr das, und was ist da los? Habe es nämlich getestet über so ein online Tool, und es passt fast überall, nur bei IE nicht.

Wäre super wenn sich jemand meiner annehmen könnte.

lg aus Guatemala
Darian

 

[Maik]

Hi,

notier die beiden Auswahlmenüs einfach innerhalb eines Listenpunktes - vergleiche hierzu nochmal den Quellcode in meinem Post #8 in deinem Thema Frage bezüglich Formular formatierung mit div und css.

 

[Darian]

Hallo Leute,

das Problem wäre gelöst, jetzt besteht nur noch das Problem dass im IE die Datums Felder viel weiter unten sind wie im FF. Verstehe ich auch nicht warum, weil jedes Datumsfeld schön in der liste ist, und daher sollte es ja schön ausgerichtet sein?

Oder habe ich das irgendwie unabsichtlich zerstört?

Bitte auch hier noch um eine kleine Hilfe...

lg Darian

 

[Maik]

Hi,

du hast da jeweils einen (verschachtelten) Listenpunkt zuviel notiert.

<li class="date">
      <label>von</label>
      <input type="text" size="10" id="date_start" name="date_start" value="{$request.date_start}">
</li>
<li class="date">
       <label>bis</label>
       <input type="text" size="10" id="date_end" name="date_end" value="{$request.date_end}">
</li>

#customer_request li.date {
clear:left;
padding-top:4px;
}

 

[Darian]

Hallo, und danke Maik für die Antwort.

Ich weiß jetzt leider nicht genau was du meinst. Die beiden Textfelder fürs Datum sind beide in einer eigenen Zeile, und beide haben einen eigenen Listenpunkt. Oder habe ich da jetzt was falsch verstanden?

Ich frage mich nur wieso beim IE der Abstand zwischen Selectfeld und den Textfeldern so groß ist? Das padding-top:4Px habe ich übrigends weil es sonst beim FF ganz oben pickt, beim IE natürlich nicht.

Irgendwas ist da ein bisschen komisch, wäre super wenn jemand Licht ins Dunkle bringen könnte.

lg Darian

 

[Maik]

Vergleich doch einfach deinen Quellcode

<li id="date">
    <li><label>von</label>
    <input type="text" size="10" id="date_start" name="date_start" value="{$request.date_start}"></li>
    <li><label>bis</label>
    <input type="text" size="10" id="date_end" name="date_end" value="{$request.date_end}"></li>
</li>

mit meinem Markup

<li class="date">
      <label>von</label>
      <input type="text" size="10" id="date_start" name="date_start" value="{$request.date_start}">
</li>
<li class="date">
       <label>bis</label>
       <input type="text" size="10" id="date_end" name="date_end" value="{$request.date_end}">
</li>

Im übrigen werden die Einheiten durchgehend kleingeschrieben.

 

[Darian]

Hallo, habe das total übersehen, jetzt passt es eigentlich, und natürlich hast du recht.

Habe noch sie so am eigenem Leib mitbekommen wie unterschiedlich sich da die Browser verhalten. IE schiebt auch Elemente immer ein bisschen weiter wie FF. Man sollte ihnen den Browserkrieg verbieten

Desweiteren ist mir aufgefallen dass mein IE auch Probleme mit position:absolut hat. (glaube ich zumindest dass es das ist)

HTML-Code:

<a id="link" href="{$smarty.const.DOCUMENT_ROOT|cat:'index.php'}?action=hotel_confirmation&md5={$request.md5}&menu=off">Atrás</a>

CSS-Code:

#link {
position:absolute;
text-align:center;
right:10Px;
left:10Px;
margin-top:30Px;
background-color:#ffc53b;
letter-spacing:0.5em;
color:black;
font-style:italic;
font-weight:600;
}

Wenn ich das position:absolute; weg gebe, sieht es im ff auch so aus wie im ie. Laut selfhtml müßte es Seit IE 4.0 gehen, ich benutzte 5.5 das ich auf meinem Ubuntu installiert habe.

Schon ein bisschen komisch. Hoffe das kann man irgendwie einfacher lösen, weil mir das gefallen würde wie es beim Firefox aussieht. Habe wie sonst auch wieder brav Fotos dazu gegeben, bin da mittlerweile schon Profi darin

lg Darian

 

[Maik]

Der IE (bis einschliesslich Version 6) unterstützt nicht die Kombination der Positionsangaben left/right oder top/bottom.

Alternativ-Vorschlag:

#link {
display:block;
text-align:center;
margin-right:10px;
margin-left:10px;
margin-top:30px;
background-color:#ffc53b;
letter-spacing:0.5em;
color:black;
font-style:italic;
font-weight:600;
}

 

[Darian]

Hallo,

danke für die Hifle, hat natürlich super funktioniert.

Finde ich schade dass das nicht geht, schränkt doch irgendwie die Möglichkeiten ein.
Benutzt eigentlich sonst noch jemand so veraltete Browser?

lg aus Guatemala, jetzt sieht sie Sache schon fast proffesionell aus.
Daniel