Komisch Darstellung eines Dateiabloadfeldes im IE

[Lucky_fragger]

Tag Leute, dies hier ist mein erster Post in diesem Forum.

Ich habe ein Problem mit der Darstellung eines upload-feldes im Internet-Explorer.

Hier der Code:

<form enctype="multipart/form-data" action="upload.php" method="post">
 
                Datei<br />
                  <input type="hidden" name="MAX_FILE_SIZE" value="20971520">
                   <input name="datei" style="border: thin solid #000000;" type="file" size=30>
                <br>Beschreibung - bitte maximal 100 Zeichen verwenden!<br>
                <textarea name="beschreibung" style="border: thin solid #000000;" cols="30" rows="5"></textarea>
                <br><input type="submit" value="Upload">
                


</form>

Mit CSS regel ich nichts von ausserhalb in diesem Formular.

Unter Firefox sieht es aus, so wie es aussehen soll.
Der IE zerstückelt das ganze. Selbst wenn ich das Dateifeld mit position lef:xxpx; weiter nach rechts schiebe, wird es weiterhin so abgehackt dagestellt und es fehlt auch dass Feld, was den Pfad anzeigt.

Hat ja jmd einen Rat?
Ich danke euch im Voraus

Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)

 

[XraYSoLo]

also bei mir ist der IE der einzige, der alle formatierungen anzeigt.
habs in fünf browsern getestet, alle gleiche darstellung.
bau' doch mal ein grundgerüst drum und schau' nach, obs dann geht (CSS-datei auslagern hilft als dann und wann auch mal).

ach ja, so wie auf den screenshots siehts bei mir nirgends aus.

Nils aka XraYSoLo

 

[Lucky_fragger]

Danke für die fixe Antwort. Das ist ja merkwürdig, dass es bei dir nichtmal im Firefox angezeigt wird, wie bei mir. Vielleicht liegt das an meiner Auflösung oder meinem Breitbildmonitor - keine Ahnung.

Ich frag mich aber, wieso das Datei-Feld im Browser so extrem zerhackt ist. Kann doch mit html nicht zu begründen sein, oder irre ich da?

Die CSS-Eigenschaften liegen bei mir in einer separaten Datei.
Nur in manchen Fällen, wenn es sich nur um ein einzelnes Tag handelt, schreibe ich das CSS direkt ins style-attribut mit hinein.

Meine Homepage basiert noch auf HTML-Tabellen, CSS nehme ich nur fürs "ausschmücken" und zum Positionieren, falls die Tabelle mal nicht weiterhilft.

Ich hatte bisher noch bei jeder Homepage Probleme mit der Darstellung in den Unterschiedlichen Browsern.

Gibt es da irgendwie eine Vorgehensweise, mit der man das minimieren kann?

 

[XraYSoLo]

Meine Homepage basiert noch auf HTML-Tabellen, CSS nehme ich nur fürs "ausschmücken" und zum Positionieren, falls die Tabelle mal nicht weiterhilft.

genau das ist der fehler.

Ich hatte bisher noch bei jeder Homepage Probleme mit der Darstellung in den Unterschiedlichen Browsern.

da macht es sich bemerkbar, auch ganz egal, wie valide das HTML ist.

Gibt es da irgendwie eine Vorgehensweise, mit der man das minimieren kann?

verabschied' dich von tabellen als design-stütze und stelle auf CSS um.

Nils aka XraYSoLo

 

[Lucky_fragger]

ich hatte gehofft bei diesem Projekt noch zurecht zu kommen und beim Nächsten dann voll auf CSS umzusteigen. Offenbar sollte ich aber das jetzieg Projekt schon gänzlich umgestalten und nur noch mit CSS arbeiten.

ABER: das Codesegment was ich dort oben gepostet habe, befindet sich in keiner Tabelle, es ist nur ein recht überschaubarer Code.
Sprich: Selbst wenn ich mich von Tabellen verabschiede, würde sich an dem Code für diese Datei nichts ändern, da dort gar keine Tabelle zum Tragen kommt.

Ich poste einfachmal den gesamten Code, vielleicht wärst Du so nett mal drüberzufliegen und mir zu sagen, woran ich arbeiten sollte.

PS: Hast Du eventuell ein gutes Tutorial parat, was sich mit dem Einstieg in die Rein-CSS-Gestaltung von Homepages befasst?
Mir fallen soviele Sackgasse ein, die ich in Html lösen kann, für die mir mit CSS keine Idee in den Sinn kommt.
(zB der Aufbau einer Tabelle mit Daten aus einer Datenbank mittels while-schleife. Die Ausgabe der ausgelesenen Daten stelle ich mir mit CSS schwieriger vor...)

<?php 
    include('auth.php');
    $benutzer = $_SESSION['benutzer'];
    

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Alexander Becker">
<meta name="description" lang="de" content="Dies ist die Onlinepräsenz des Pflegelehre-jetzt Teams.">
<meta name="description" lang="en" content="This is the homepage of Pflegelehre-jetzt.">
<meta name="keywords" lang="de" content="Pflegelehre-jetzt, Krankenpflegerhelfer Ausbildung, Kontakt,">
<meta name="keywords" lang="en" content="Pflegelehre-jetzt, nurse training, contact,"> 
<meta name="date" content="2009-09-30">
<meta name="robots" content="nofollow">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">


<title>Pflegelehre-jetzt - Datei hochladen</title>
<link rel="stylesheet" href="../style.css">
<style type="text/css">
<!--
/* hier kommen die css formate rein */
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

</head>


<body class="bodystyle">
            <?php
            echo ("Hallo $benutzer, hier können Sie eine Datei hochladen.");
            echo ("<br> Bitte laden Sie keine .exe oder .php Dateien hoch");
            ?>
        <h2>Dateiauswahl</h2>
 
             <form enctype="multipart/form-data" action="upload.php" method="post">
 
                Datei<br />
                  <input type="hidden" name="MAX_FILE_SIZE" value="20971520">
                   <input name="datei" style="border: thin solid #000000;" type="file" size=30>
                <br>Beschreibung - bitte maximal 100 Zeichen verwenden!<br>
                <textarea name="beschreibung" style="border: thin solid #000000;" cols="30" rows="5"></textarea>
                <br><input type="submit" value="Upload">
                


             </form>

</body>
</html>

 

[XraYSoLo]

schau' dir css4you an, da hab' ich damals nahezu alles in einem monat gelernt. CSS ist wirklich einfach, wenn man mal den dreh 'raus hat.

ausgabe von daten ist i. d. r. tabellarisch, also können auch tabellen verwendet werden. der fehler ist nur, tabellen für nicht-tabellarisches zu verwenden.

- width=""
- border=""
- align=""
- valign=""

allsamt weg damit. ein semantisches HTML-dokument ist auf das unerlässliche mindestmaß von tag-attributen heruntergeschraubt.

achte darauf, dass du, wenn du tabellen verwendest, keine HTML-tag-attribute verwendest, sondern wirklich ALLES machbare von CSS lösen lässt.

bis auf

<link rel="stylesheet" href="../style.css">

welches

<link rel="stylesheet" type="text/css" href="../style.css">

heißen muss, ist alles in ordnung.

die beste darstellung erhälst du, wenn du deine seiten validieren lässt und alle fehler im voraus ausmerzt.

Nils aka XraYSoLo

 

[Lucky_fragger]

Man, der Support hier ist wirklich umwerfend.
Danke für deine Zeit, Geduld und Hilfe.

Ich werde mich jetzt in Css4you vertiefen.

Wenn es wieder Fragen geben sollte, werde ich mich an dieses Forum wenden.

Gruß Theo

 

[XraYSoLo]

kein ding ;-).

Nils aka XraYSoLo

 

[Lucky_fragger]

Ich habe meine Homepage jetzt weitestgehend mit CSS geschrieben.
HTML so gut es geht rausgeworfen.
Alles mit XHTML 1.0 Strict als Doctype und der Validator (The W3C Markup Validation Service) findet keine Fehler.

Dennoch stellt der IE 7 das Uploadforumular dar, wie am Anfang.

Das "Durchsuchenfeld" fehlt teilweise und der Pfad wird gar nicht angezeigt.
Im Kompatibilitätsmodus des IE7 wird zwar das Durchsuchenfeld komplett dargestellt, aber das "weisse" Feld, indem normalerweise der Dateipfad steht, fehlt völlig.
Siehe Angehängte Bilder.

Formuluar:

<body>

 
             <form enctype="multipart/form-data" action="upload.php" method="post">
             <div id="uploadform">
                 <?php
                    echo ("<h2>Hallo $benutzer, hier können Sie eine Datei hochladen.</h2>");
                    echo ("<span style=\"text-decoration:underline;\">Bitte laden Sie keine .exe oder .php Dateien hoch</span>");
                ?>

            <h2>Dateiauswahl:</h2>
                <p>
                  <input type="hidden" name="MAX_FILE_SIZE" value="20971520" /><br />
                <input name="datei" style="border: thin solid #000000;" type="file" size="30" /> <br />              
               Beschreibung:<br />
                 <textarea name="beschreibung" style="border: thin solid #000000;" cols="30" rows="5"></textarea><br />
                 Bitte nicht mehr als 50 Zeichen.<br />
                <input type="submit" value="Upload" />
                </p>
                </div>


             </form>

</body>

css:

body {
background-color:#919191;
font-size:16px;
font-family:Arial;
text-align:center;
}

#uploadform {
border:1px solid #ffffff;
background-color:#669999;
padding:0 15px;
color:#ffffff;
text-align:left;
min-height:450px;
height:auto !important;
height:500px;
position:relative;
}

form br { clear: left; }

Keine ahnung wie aussagekräftig so ein Browserkompatibilitätscheck übers Netz ist, aber hier sieht die Homepage auf den meisten Sceenshots ankzeptabel aus:
Website overview for http://pflegelehre-jetzt.org/fileupload.php


Weiss jmd was das Problem ist?
Ich weiss nicht weiter.