thomash: Formular mittels CSS positionieren im Firefox unmöglich?

Hallo,
ich entwickele unter Windows XP Professional eine neue Website.
Zum Austesten meiner Entwürfe benutze ich den Internet Explorer 6, den Opera Browser 9.0 und den Firefox Browser 2.0.3.

Die Website wird mittels XHTML 1.0 Trasitional und mit sogenannten <div> Tags realisiert.
Zum Positionieren der einzelnen <div> Tags benutze ich folgende CSS Syntax:

.a1 {position:absolute;
 left:0px;
 top:0px;
 width:750px;
 height:30px;
 background-color:#bdbe9c;
 border-style: solid;
 border-width: 1px 1px 0px 1px;
 border-color: #008ca5;
 }

Für das Formular, welches als Registrierungsfomular benutzt wird, folgende Syntax zum positionieren:

form {
 position:absolute;
 left:18px;
 top:388px;
 width:368px;
 height:170px;
 clear:left;
 }

Alle von mir verwendeten Browser positionieren dieses Formular dann auch korrekt.
Der Firefox Browser allerdings macht sämtliche Eingaben unmöglich. Es ist weder der Benutzernamen, noch die Passworteingabe oder sonstige Eingaben im Formular möglich.
Firefox gibts das Formular zwar an der richtigen Stelle aus, aber sämtliche Eingaben sind unmöglich.
Benutze ich nicht die CSS Syntax

position:absolute;

bzw. lasse sie komplett weg funktionieren zwar die Eingaben, aber das Formular wird nicht an der korrekten Stelle ausgegeben.
Der Internet Explorer und der Opera Browser geben das Formular korrekt aus und Eingaben sind wie gewohnt möglich.

Ich habe sehr lange im Internet nach einer Möglichkeit gesucht bzw. nach möglichen Fehlerquellen geforscht.
Aber leider habe ich bis jetzt nichts konkretes finden können.

Weiss jemand Rat?
Ich hoffe ich stehe mit meinem Problem nicht alleine da.  :-/

Thomas

  1. hi,

    Die Website wird mittels XHTML 1.0 Trasitional und mit sogenannten <div> Tags realisiert.

    Warum realisierst du sie nicht mit _sinnvollem_ HTML, statt als Div-Suppe?

    Alle von mir verwendeten Browser positionieren dieses Formular dann auch korrekt.
    Der Firefox Browser allerdings macht sämtliche Eingaben unmöglich. Es ist weder der Benutzernamen, noch die Passworteingabe oder sonstige Eingaben im Formular möglich.
    Firefox gibts das Formular zwar an der richtigen Stelle aus, aber sämtliche Eingaben sind unmöglich.

    Dann überlagert vermutlich ein anderes Element das Formular, ganz oder teilweise.
    Nutze eine Extension wie die Web Developer Toolbar, mit der du dir ganz einfach Rahmen um Elemente anzeigen lassen kannst, und finde heraus, welches es ist.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hallo

    Leider hast du nicht den restlichen Teil des Quellcodes gepostet. Wenn ich mir aus deinen Angaben eine Seite konstruiere, klappt auf jeden Fall aber das Positionieren UND das Benutzen des Formulares. (Getetestet unter FF2, WinXP pro).

      
    <html>  
    <head>  
    <style>  
    .a1 {position:absolute;  
     left:0px;  
     top:0px;  
     width:750px;  
     height:30px;  
     background-color:#bdbe9c;  
     border-style: solid;  
     border-width: 1px 1px 0px 1px;  
     border-color: #008ca5;  
     }  
      
      
      
    form {  
     position:absolute;  
     left:18px;  
     top:388px;  
     width:368px;  
     height:170px;  
     clear:left;  
      
     background:#e0e080;  
     }  
    </style>  
    </head>  
      
      
    <body>  
    <div class="a1">  
    <form >  
    <input type="text">  
    <input type="checkbox">  
    <input type="submit">  
    </form>  
    </div>  
    </body>  
    </html>  
    
    

    Gruß,
    DL

    1. Hallo,

      hier der passende Quellcode:

      <form action="index.php" method="post">
      <label for="name">Benutzername:</label>
      <input type="text" id="a1" maxlength="20" name="user" title="Gebe hier deinen gew&uuml;nschten Benutzernamen ein" />
      <br />
      ...
      </form>

      Und hier der Quellcode für das Formular:

      form {
       position:absolute;
       left:18px;
       top:388px;
       width:368px;
       height:170px;
       clear:left;
       }
      form br {
        clear: left;
       }
      label, input, select {
        display: block;
        float: left;
        width: 150px;
       }

      Die CSS Datei ist extern abgespeichert und wird mittels <link ... />
      im Kopfbereich der XHTML Datei eingebunden.

      Liegt es evtl. daran?
      Es liegt definitiv keine Überlagerung irgenteines Containers vor.
      Ich kann das Formular positionieren wohin ich will, der Firefox lässt keinerlei Eingaben zu.

      1. Hi,

        <label for="name">Benutzername:</label>
        <input type="text" id="a1" maxlength="20" name="user" title="Gebe hier deinen gew&uuml;nschten Benutzernamen ein" />

        Das ist Unsinn. for muß eine IDREF enthalten - es müßte also for="a1" heißen.

        (mit name kann es nicht funktionieren, da name im Gegensatz zu id nicht eindeutig sein muß, z.B. bei radiobuttons ...)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  3. Was ist das? Beschäftigungstherapie? Denn bei mir klappt das.

    Probier's doch mal selber aus:

      
    <html>  
    <head>  
    <style>  
    form {  
     position:absolute;  
     left:18px;  
     top:388px;  
     width:368px;  
     height:170px;  
     clear:left;  
     }  
    form br {  
      clear: left;  
     }  
    label, input, select {  
      display: block;  
      float: left;  
      width: 150px;  
     }  
    .a1 {  
    position:absolute;  
     left:0px;  
     top:0px;  
     width:750px;  
     height:30px;  
     background-color:#bdbe9c;  
     border-style: solid;  
     border-width: 1px 1px 0px 1px;  
     border-color: #008ca5;  
     }  
    </style>  
    </head>  
      
      
    <body>  
    <form action="index.php" method="post">  
    <label for="name">Benutzername:</label>  
    <input type="text" id="a1" maxlength="20" name="user" title="Gebe hier deinen gew&uuml;nschten Benutzernamen ein" />  
    <br />  
    ...  
    </div>  
    </body>  
    </html>  
    
    

    Ich gehe davon aus, daß in deinem Quelltext noch mehr vorhanden ist. Etwas, was zu dem von dir beobachteten Verhalten führt. Du solltest vielleicht mal Wahsaga fragen, der hat bestimmt ne Kugel.

    Gruß,
    DL

    1. Es war mein Fehler.
      Es lag tatsächlich eine Überlagerung eines Containers vor.
      Der lag 5 Zeilen weiter oben im Quelltext und war ein Überbleibsel eines Entwurfes.
      Sorry, war mein Fehler. *schäm*

      Danke für eure Hilfe.

      Thomas

      1. hi,

        Es lag tatsächlich eine Überlagerung eines Containers vor.

        Ach, schau einer an.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }