Snoopey: Eingabefeld automatisch float?

Hi,

ich wollte mal eben was kleines zusammenstricken, und da wurde ich von etwas überrascht, wo ich den Fehler irgendwie nicht finde.
Und zwar erscheint in dem Beispiel mein Button über dem Eingabefeld, anstatt daneben. Das ist sowohl im FF als auch im IE der Fall.

Hier mal der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
 <head>  
  <title> New Document </title>  
  
  <style type="text/css">  
 html, body {  
  margin: 0;  
  padding: 0;  
  background-color: #fff;  
 }  
  
 #header {  
  background: url('header.png') repeat-x;  
  height: 30px;  
  line-height: 30px;  
 }  
  
 input {  
  position: absolute;  
  top: 4px;  
  height: 20px;  
 }  
  
 #frame {  
  width: 100%;  
  height: auto;  
  border: 0;  
 }  
  </style>  
  
 </head>  
  
 <body>  
  
 <div id="header">  
 <form action="index.html">Bla: <input type="text" name="url" id="url" /> <input type="submit" value="aufrufen" name="loadButton" id="loadButton" /></form>  
 </div>  
 <iframe id="frame"></iframe>  
  
 </body>  
</html>  

PS: Ja, das CSS wird noch ausgelagert und überarbeitet. Wie gesagt wollte ich mal schnell was zusammenstricken.

Wie bekomme ich es hin, dass der Button direkt rechts neben dem Eingabefeld steht?

Gruss
Snoopey

  1. Guten Morgen,

    Und zwar erscheint in dem Beispiel mein Button über dem Eingabefeld, anstatt daneben.

    input {
      position: absolute;
      top: 4px;
      height: 20px;
    }

    Wie bekomme ich es hin, dass der Button direkt rechts neben dem Eingabefeld steht?

    Vielleicht, aber nur ganz vielleicht würde es schon etwas helfen, ihn nicht woanders zu positionieren, sondern einfach in seiner Zeile zu belassen …

    Gruß, Hannes.

    1. Stimmt, bin ich doof xD
      Thx

  2. Moin

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    erstmal ist das ein sehr schlechter Doctype. die Angabe der URL zur DTD fehlt! Damit versetzt du _ALLE_ Browser in den Quirksmode! Siehe:
    hier

    ~~~html

    input {

    position: absolute;

      
    Hier liegt dein Problem. Mit position:absolute nimmst du das Element aus dem Seitenfluss. Damit richtet es sich nicht nach den anderen vorhandenen Elementen aus. Position:absolute sollte nach Möglichkeit vermieden werden!!!!  
      
    Gruß Bobby  
    
    -- 
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-  
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-  
      
    ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)