Hiho

Ich sitz momentan an einer Homepage für unsere LARP Gruppe und hab mir gedacht, wenn ich diese Homepage mache, dann 100% eigen geschriebens PHP, ich benutz endlich mal CSS, die Page muss 100% valid HTML4.0.1 sein und die Page sollte auf allen gängigen Browsern gleich aussehen bzw. sich den Browser Möglichkeiten anpassen.

Als Test für meine Fähigkeiten und um mich einzuarbeiten hab ich mit einem Login Formular klein angefangen, um zu sehen wo Komplikationen auftreten und das ich mich nach und nach drauf einstellen kann.

Nun hab ich nen Problem, das bei IE7/FF die Page soweit gut aussieht, aber aufm IE5 nach den Eingabefeldern fürn Accountnamen und Passwort jeweils zwei Zeilenumbrüche statt einer ist. Dazu mal zwei Bilder

Falls ihr euch wundert das die Formular Images auf beiden Bildern unterschiedlich aussehen, das rührt daher, das ich bei der normalen Version PNGs benutze (die IE7/FF darstellen können) und auf der anderen Version dem IE5 statt dessen automatisch GIFs darstellen lasse.

So siehts beim Feuerfuchs und IE7 aus
So siehts beim IE5 aus

Ich kann mir diesen doppelten Zeilenumbruch statt einen nicht erklären und auch nicht nach Recherchen auf eine Erklärung gestoßen.

Der HTML Code von der Form (Ja, ich weiß, das Ding is aus Tabellen aufgebaut, das wird noch in DIVs gepackt sobald ich das Konstrukt dahinter verstanden hab). Die relavanten Zeilen haben ein //--> davor.

Quellcode:<table border="0" cellspacing="0" cellpadding="0">
  (..snip..)
  <tr>
    <td class="links"></td>
    <td class="middle">
  <form action="login.php?action=login" method="post" name="LoginForm" target="_self">
//->  <img src="img/icons/username.png" alt="nav" border="0"/ title="Dein Loginname für die Rovenarc Homepage">
       <input name="account" type="text" value="Login Name" onFocus="ClearTextfield(this);" size="25" maxlength="25" style="display:inline;">
//<- <br>
  
//->  <img src="img/icons/password.png" alt="nav" border="0"/ title="Das Passwort mit dem Du dich anmelden möchtest">
       <input name="passwd" type="text" value="Login Passwort" onFocus="ClearTextfield(this);" size="25" maxlength="25" style="display:inline;">
//<-  <br>
  
    (..snip...)
  </form></td>
    <td class="rechts"></td>
  </tr>
  (..snip..)
</table>
Ich bin momentan ratlos und hoffe auf eure Einwürfe. :)
Die Seite ist übrigens momentan 100% valides HTML4.0.1, der IE5 müßte das von der Seite betrachtet richtig darstellen.

Vielen Dank schon ma im Vorraus

- Mind

[EDIT] Was ich vergessen habe: selbst wenn ich die Input als Inline Elemente anzeigen lasse, erzeugen die Dinger immer noch einen Zeilenumbruch[/EDIT]

*jubel* *freu* ja ja ja...fast so gut wie Sex. Ich kann spielen.. © by Tarischa

Zitat:

ich benutz endlich mal CSS, die Page muss 100% valid HTML4.0.1 sein

Mögliche Fehlerquelle: Der IE erzeugt aus Zeilenumbrüchen im HTML-File oft Zeilenumbrüche im finalen Dokument.

Du hast allerdings auch Syntaxfehler in deinem Code - z.b. die / mitten im IMG-Tag, wobei das vermutlich nicht der Auslöser sein wird.

Weiters hat der IE seltsames CSS für die FORM/INPUT Tags definiert, speziell was den äußeren Abstand (margin) angeht.

Ansonsten wärs am besten, du stellst uns das HTML-File so wie es ist zur Verfügung, damit man selbst damit experimentieren kann.
Momentan ist nicht viel mehr als Spekulation möglich...

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

evtl. mal
Quellcode:input {
  margin: 0px;
}
versuchen?

sincères amitiés scus
--
Tand, Tand ist das Gebilde von Menschenhand

gleiche auch für form

form hat auch nen abstand

ich würde gar nicht weiter auf ie5 eingehen. es ist eben ne alte version und könnte einfach einer von vielen fehler im browser sein, denn der ie7 zeigts ja anscheinend an, demnach wurde das gefixt. man muss nicht jede alte version unterstützen. jeder der ie5 hat hat auch zugriff auf zumindest ie6 (wie siehts da eigentlich aus)

aber siehts genau so aus wenn du alles in einer zeile schreibst? ohne zeilenumbrüche

also, ich habs nu nach langem hin und her hingekriegt

Den Margin von Input auf 0px zu setzen hat nichts gebracht. War ne gute Idee, aber mir scheints als wenn der IE das nicht beachtet hätte.

Was es letztendlich war ?
Ich hab um das Img vor den Inputs und den Input selbst nen Div rumgelegt und dafür den Zeilenumbruch nach dem Input weggelassen.

Sprich aus
Quellcode:<img src="img/icons/username.png" alt="nav" border="0" title="Dein Loginname für die Rovenarc Homepage">
       <input name="account" type="text" value="Login Name" onFocus="ClearTextfield(this);" size="25" maxlength="25" style="display:inline;">
      <br>
wurde

Quellcode:<div><img src="img/icons/username.png" alt="nav" border="0" title="Dein Loginname für die Rovenarc Homepage">
       <input name="account" type="text" value="Login Name" onFocus="ClearTextfield(this);" size="25" maxlength="25" style="display:inline;"></div>
Ich bin dadrauf gekommen, als ich die Page durch w3c Validator für XHTML1.0 STRICT durchgejagt habe. Da hat er das beanstandet, das die beiden Elemente in ein Blockelement wie div reinmüßten. Für die Seite hab ich mich nun aber für XHTML1.0 Transitional entschieden, weil der alle Möglichen Attribute wie border und auch Events wie onclick etc. anscheinend dann nicht kennt. Keine Ahnung warum.

Vielen Dank euch allen für die Unterstützung und die Ideen.
Ich hoffe ma nicht das ich euch mit solch Fragen nochma kitzeln muss, aber wenn, dann weiß ich zumindest ne Anlaufstelle ;)

- Mind

PS: Die Page funktioniert auffem IE6 tadellos. Das einzige is, das IE 6 den Borderstyle "dotted" nicht kennt und automatisch daraus "dashed" macht. IE5 kennt btw weder das eine, noch das andere und zeigt gar nüx an.

PPS: Da fällt mir gerade ein, wo genau ist der Unterschied zwischen XHTML1.0 STRICT und Transitional. Wofür is das eine, wofür das andere besser?

*jubel* *freu* ja ja ja...fast so gut wie Sex. Ich kann spielen.. © by Tarischa

strict ist die 'reine lehre'. innerhalb der strict versionen sind nur tags und attribute erlaubt, die den text logisch auszeichnen ( bsp <h1> fuer titel der ersten ordnung, <p> fuer absaetze, <address> fuer adressen vornehmlich serveradressen, etc pp).
Mit strict dokumenten soll das design zu 100% ueber css ablaufen.

transitional unterstuetzt dagegen noch einige veraltete tags und attribute, die die w3c frueher mal eingefuehrt hatte, aber weil sie keine sinn in der logischen auszeichnung hatten wieder rausgenommen wurden( bsp: das allseits beliebte <center> oder das 'border' attribut, wofuer es entsprechende css konstruktionen gibt.).

There is nothing wrong with high standards. It's your problem that you don't meet them.
If you think it's simple, then you have misunderstood the problem.
When a customer says "nothing has changed", assume they're lying.

-strict ist das einzig wahre XHTML.

-transitional ist eine Uebergangsvariante, die halt noch bestimmte Features aus HTML 4 enthaelt, die dann zwecks Trennung von Inhalt und Praesentation in XHTML weggefallen sind. Dazu gehoeren Attribute wie eben `border'. Fuer so etwas gibt es schliesslich CSS.

Die Events fehlen in -strict nicht, die sind nur komplett kleingeschrieben und XHTML ist im Gegensatz zu HTML case-sensitive.

\o tanz den naziprau! o/

And more than ever, I hope to never fall,
Where enough is not the same it was before

Danke für die Erklärungen, hab gleich daraufhin die Seite auf XHTML Strict umgebaut, das Desgin komplett über CSS laufen zu lassen war ja von Anfang an Sinn der Sache.

*jubel* *freu* ja ja ja...fast so gut wie Sex. Ich kann spielen.. © by Tarischa