Frage Formular Inputfeld überlappt in Firefox

[Bennygv]

Hallo zusammen,

kurz vorweg: Ich bin absoluter Neuling was HTML angeht und würde gerne ein Problem auf der Seite meiner Tante lösen:

Es handelt sich um ein Kontaktformular, welches im Internet Explorer sowie Safari optimal angezeigt wird. Im Firefox jedoch gibt es das Problem, dass das Eingabefeld die Feldbezeichnung überlappt. Ich habe mal einen Screenshot beigefügt, wie es im Firefox aussieht und versuche hier auch den Code so gut es geht einzufügen.

Vielen Dank schonmal für Eure Hilfe!

 <div class="clear-both"></div>
    </div>
    <div id="wrap">
      <div id="content">
        <div id="col1">
          <div id="col1-2">
            <h1>Kontakt</h1>


           





   
            <p>Bitte f&uuml;llen Sie die mit einem Stern <span class="stern">*</span> markierten Felder aus.</p>
            <form method="post" action="https://www.xxx.de/cms/index.php?t=6#content" class="kontaktformular">
            <fieldset>
            <p>
            <label for="name">Name <span class="stern">*</span>:</label>
            <br><input class="anm" type="text" id="name" name="name" size="35" tabindex="1" value="" title="Hier bitte Ihren Namen eingeben" />
            </p>
           
            <p>
            <label for="email"><span xml:lang="de" lang="en">E-Mail</span> <span class="stern">*</span>:</label>
            <br><input class="anm" type="text" id="email" name="email" size="35"  value="" title="Hier bitte Ihre E-Mail-Adresse eingeben" />
            </p>
           
            <p>
            <label for="telefon" >Telefon:&nbsp;            </label>
            <br><input class="anm" type="text" id="telefon" name="telefon" size="35"  value="" title="Hier bitte Ihre Telefonnummer eingeben" />
            </p>
           
            <p>
            <label  for="send_copy">Senden Sie mir eine Kopie der Nachricht.</label><br><input class="anm" type="checkbox" id="send_copy" name="send_copy"  />
            </p>
            <label  for="data">Ich akzeptiere die <a href="https://www.xxx">Datenschutzbestimmungen</a><span class="stern">*</span></label>
              <br><br><input class="anm" type="checkbox" id="data" name="data" required />
            <div id="nachricht">
            <br><p><label for="nachricht"><span class="bold">Ihre Nachricht an uns:</span></label></p>
            <textarea name="nachricht" rows="8" cols="45" title="Hier bitte Ihre Nachricht eingeben"></textarea>
            </div>
            <p>
            <input name="submit" type="submit" value="Kontaktformular absenden"  />
            <input type="hidden" name="required" value="name,email,nachricht,data" />
            </p>
            </fieldset>
            </form>
              <p> <b>Mit dem Absenden Ihrer Nachricht bestätigen Sie uns, dass Sie unsere <a href="https://www.conrad-bestattungen.de/cms/index.php?t=27">Datenschutzbestimmungen</a> gelesen und akzeptiert haben.</b></p>
          </div>
        </div>
        <div id="col2_div">
          <div id="col2-2">

 

[Tronjer]

<div class="clear-both"></div> </div>

Hier schon mal falsch.

 

[Sailor]

Ich denke, es sind mehrere Ursachen bzw mehrere Stellschrauben, an denen man das richten könnte.
Zunächst mal solltest du auf die Größenangabe 'size="35' im <input...> Tag verzichten. Diese Angabe wird offensichtlich von unterschiedlichen Browsern unterschiedlich interpretiert. Nutze stattdessen CSS für die Inputs (zB 'width: 290px').

input#email,
input#name,
input#telefon {
  width: 290px;
}

Warum? Die Angabe in Pixeln wird von allen Browsern gleich behandelt und führt daher zu einer (hoffentlich) gleichen Anzeige.

Der zweite Punkt: Du hast folgendes Konstrukt für deine Inputs gewählt.

<p>
  <label for="name">Name <span class="stern">*</span>:</label>
  <br>
  <input class="anm" type="text" id="name" name="name" size="35" tabindex="1" value="" title="Hier bitte Ihren Namen eingeben" />
</p>

Du fügst einen Zeilenumbruch zwischen dem Label und dem Input ein - machst damit eine eigentlich einzeilige Anzeige 'künstlich' zweizeilig.
Dann gibst du dem Input ein 'margin-top: -20px', um das Eingabefeld 'künstlich' wieder nach oben zu ziehen und einzeilig zu machen. Hat das einen tieferen Sinn?

Hast du schon mal daran gedacht, deine Seite responsive - also handytauglich zu machen?