"Kontakt-site" im IE :-(

ct2oo4 · #1 (**permalink**) 11.08.2007, 18:43

Hi Leute,
ich bin gerade dabei ein komplett valides Kontaktscript zu schreiben.
Zur Zeit hänge ich aber mal wieder beim CSS und zwar in Verbindung mit dem IE

Mein html schaut folgendermaßen aus:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Kontakt</title>
	<link rel="stylesheet" type="text/css"  href="css/master.css" />
</head>

<body>

<form action="contact_submit.php" method="post">
<fieldset id='contact'>
 <legend>Kontakt</legend>
 <div id="contact_logo">
 	<h1 id="logo">TITLE</h1> <!-- Text einfuegen -->
 	<span>Unser Logo</span>
 </div>
 <table>
  <tr>
   <td>
   <label for="anrede">Anrede:</label>
    <select id="anrede" name="anrede" size="1">
      <option>Frau</option>
      <option>Herr</option>
    </select>
   </td>
  </tr>
  <tr>
   <td>
    <label for="name">Ihr Name:</label>
	 <input type="text" id="name" name="name" size="20" maxlength="30" />
	</td>
  </tr>
  <tr>
   <td>
    <label for="vorname">Ihr Vorname:</label>
    <input type="text" id="vorname" name="vorname" size="20" maxlength="30" />
   </td>
  </tr>
  <tr>
   <td>
    <label for="email">Ihre Emailadresse:</label>
    <input type="text" id="email" name="email" size="20" maxlength="50" />
   </td>
  </tr>
  <tr>
   <td>
    <label for="betreff">Betreff:</label>
    <input type="text" id="betreff" name="betreff" size="20" maxlength="30" />
   </td>
  </tr>
  <tr>
   <td colspan="2"><label for="text">Ihre Mitteilung:</label>
    <textarea id="text" name="text" cols="50" rows="10"></textarea>
   </td>
  </tr>
  <tr>
  	<td colspan="2">
  	 Sicherheitscode: ????? neuen Code anfordern<br />
    <label for="entry">Eingabe: </label><input type="text" id="entry" name="captcha"  size="5" maxlength="5" />
   </td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" name="send" value="Abschicken" /></td>
  </tr>
 </table>
</fieldset>
</form>

</body>
</html>

CSS so:

Code:

@media screen {

#contact {
 width:450px;
 font: normal normal normal 1em sans-serif;
}

#contact_logo { /* optional */
/* Phark - Image Replacement*/
  background: url(../images/contact/logo.jpg);  /* Logo einfügen */
  height: 75px; /* Hoehe anpassen */
  text-indent: -999em;
  width: 75px; /* Breite anpassen */
/* END Replacement */
/* Start positioning */
 float:right;
}

#contact_logo span {
 font: normal normal normal 0.75em sans-serif;
}

#contact td {
 border-left: 5px solid #2378D6;
 padding:3px;
}

}

Und online so: KLICK
Validator

Wenn ihr euch das Ganze im FF anschaut, seht ihr das "Logo" oben rechts, genau da wo es auch hin soll. Schaut man nun im IE steht es zwar immer noch oben rechts, nun aber hat sich der Text links nach unten gesetzt. Wie löse ich dieses Problem?!
Vielen Dank schon im Voraus.
MfG Matze

heiko_rs · #2 (**permalink**) 11.08.2007, 19:54

Der IE legt Deine Tabelle komplett unter das floatende #contact_logo. Du setzt die Tabelle hier allerdings eh nicht besonders sinnvoll ein - ich würde sie rauswerfen und stattdessen immer jeweils label & input in ein p stellen (statt in td, wie momentan). Oder ganz ohne p, einfach mit <br /> hinter jedem input.

ct2oo4 · #3 (**permalink**) 11.08.2007, 19:55

Soo ich habe etwas an meinem Code herumgebastelt um ihn valide zu bekommen.
U.a. habe ich die Datei von *.htm zu *.xhtml umbenannt. Der Validator liefert nun auch keinerlei Fehler mehr. Im FF funktioniert alle wie gehabt einwandfrei. Bloß nun will der IE die Seite garnicht mehr anzeigen, WIESO?
Bin für jeden Tip offen

Danke schon im Voraus.
MfG

kadees · #4 (**permalink**) 11.08.2007, 19:56

Folgendes im IE7 ausprobiert:
Probiere mal -nur für den IE- folgendes:

Code:

fieldset #contact {position: relative;}

und für

Code:

#contact_logo {
   position: absolute;
   right: ??px; /* Deine Werte einsetzen */
   top: ??px; /* Deine Werte einsetzen */
}

heiko_rs · #5 (**permalink**) 11.08.2007, 19:57

Lies zum Thema XHTML 1.1 mal diesen Artikel: XHTML-Einmaleins

kadees · #6 (**permalink**) 11.08.2007, 20:17

Öhm,
was genau hast du geändert? Im FF kommt jetzt die Meldung:

Zitat:

Mit dieser XML-Datei sind anscheinend keine Style-Informationen verknüpft. Nachfolgend wird die Baum-Ansicht des Dokuments angezeigt.

und der Code wird angezeigt und IE7 will die Seite gar nicht mehr öffnen!

ct2oo4 · #7 (**permalink**) 12.08.2007, 10:35

Sorry, ich probiere die einzelnen Möglichkeiten aus. Daher habe ich dieses File überschrieben.
Hier der Link: KLICK

// EDIT:
So ich habe es nun endlich valide bekommen: KLICK VALIDATOR
Jetzt wende ich mich dem Logo und der Tabelle zu. Danke!

ct2oo4 · #8 (**permalink**) 12.08.2007, 11:14

Soo wie gesagt ich bin gerade dabei das Logo richtig zu positionieren.
HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Kontakt</title>
	<link rel="stylesheet" type="text/css"  href="css/master.css" />
</head>

<body>

<form action="contact_submit.php" method="post">
<fieldset id='contact'>
 <legend>Kontakt</legend>
 <div id="contact_logocontainer">
 	<h1 id="contact_logo">TITLE</h1> <!-- Text einfuegen -->
 	<span>Unser Logo</span>
 </div>
 <table>
  <tr>
   <td>
   <label for="anrede">Anrede:</label>
    <select id="anrede" name="anrede" size="1">
      <option>Frau</option>
      <option>Herr</option>
    </select>
   </td>
  </tr>
  <tr>
   <td>
    <label for="name">Ihr Name:</label>
	 <input type="text" id="name" name="name" size="20" maxlength="30" />
	</td>
  </tr>
  <tr>
   <td>
    <label for="vorname">Ihr Vorname:</label>
    <input type="text" id="vorname" name="vorname" size="20" maxlength="30" />
   </td>
  </tr>
  <tr>
   <td>
    <label for="email">Ihre Emailadresse:</label>
    <input type="text" id="email" name="email" size="20" maxlength="50" />
   </td>
  </tr>
  <tr>
   <td>
    <label for="betreff">Betreff:</label>
    <input type="text" id="betreff" name="betreff" size="20" maxlength="30" />
   </td>
  </tr>
  <tr>
   <td colspan="2"><label for="text">Ihre Mitteilung:</label>
    <textarea id="text" name="text" cols="50" rows="10"></textarea>
   </td>
  </tr>
  <tr>
  	<td colspan="2">
  	 Sicherheitscode: ????? neuen Code anfordern<br />
    <label for="entry">Eingabe: </label><input type="text" id="entry" name="captcha"  size="5" maxlength="5" />
   </td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" name="send" value="Abschicken" /></td>
  </tr>
 </table>
</fieldset>
</form>

</body>
</html>

CSS:

Code:

@media screen {

#contact {
 width:450px;
 font: normal normal normal 1em sans-serif;
 position: relative;
}

#contact_logocontainer { /* optional */
/* Start positioning */
 position: absolute;
 right:20px;
 height:90px;
 width:75px;
}

#contact_logocontainer #contact_logo {
/* Phark - Image Replacement*/ 
 background: url(../images/contact/logo.jpg);/* Logo einfügen */
 height: 75px; /* Hoehe anpassen */
 text-indent: -999em;
 width: 75px; /* Breite anpassen */
/* END Replacement */
}

#contact_logocontainer span {
 font: normal normal normal 0.75em sans-serif;
}

#contact td {
 border-left: 5px solid #2378D6;
 padding:3px;
}

}

LINK: KLICK
(...ist valide...)

Beim FF positioniert er falsch, d.h. er setzt den Container zu weit unten, aber dafür stellt er das Logo sowie den Text richtig dar. Der IE (

) setzt den Container erstaunlicherweise sogar mal richtig, dafür aber stellt er nur die Hälfte des Logos dar (statt 75px Bildhöhe, etwas um die 38px), Text stimmt auch.
Was mache ich falsch?
Danke schon im Voraus.
MfG Matze

heiko_rs · #9 (**permalink**) 12.08.2007, 12:28

FAQ "CSS-Prolog".

ct2oo4 · #10 (**permalink**) 12.08.2007, 12:32

ah ja gut lag auf der hand, aber auf Einfaches kommt man immer zum Schluss

Danke!!! auch für den Link XHTML Einmaleins
Aber im IE wird das Bild dennoch nur zu Hälfte dargestellt, woher kommt das?
MfG Matze

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln