✔ Probleme mit Darstellung IE/Firefox

tulusie · 15. März 2007

Hallo,

ich habe ein Formular auf meiner Seite in eine Tabelle eingebunden. Das Formular funktioniert auch einwandfrei. Leider zeigt der Firefox (1.5.0.10) diese Tabelle mit einer viel zu großen Höhe an. Hab ich da was vergessen? Ich hab der Tabelle eine Höhe gegeben. Auch den einzelnen Zeilen habe ich schon eine Höhe zugewiesen. Leider ohne Veränderung...
Hier die Bilder um euch die Situation zu verdeutlichen.

Kann mir da jemand weiterhelfen? Wie bringe ich den Firefox dazu das Formular innerhalb des Fensters anzuzeigen ohne dass der User scrollen muss?

Danke schonmal für eure Hilfe.
Tulusie

Maik · 15. März 2007

Hi,

könntest du bitte mal den dazugehörigen Quellcode (HTML + CSS) zeigen?

tulusie · 15. März 2007

Sorry,

hier der Quellcode des Formulars:

HTML:

<?
include("dbconnect.php"); 
?>

<script language="JavaScript">

function check()
{
     modif_casse(document.register.name);
     modif_casse(document.register.vorname);
     modif_casse_email(document.register.email);
	 modif_casse(document.register.ort);
     modif_casse(document.register.farbe);
	  if (document.register.antwort.value=="" ){
        alert('Bitte wähle eine Antwort auf die Gewinnspielfrage');
        document.register.antwort.focus();
      } 
	  else if (document.register.vorname.value=="" || document.register.vorname.value.slice(0,1).search(/[^0-9-_]/) == -1){
        alert("Bitte prüfe deinen Vorname.");
        document.register.vorname.focus();
      } 
	  else if (document.register.name.value=="" || document.register.name.value.slice(0,1).search(/[^0-9-_]/) == -1){
        alert("Bitte prüfe deinen Name.");
        document.register.name.focus();
      } 
	  else if (document.register.strasse.value=="" ){
        alert('Bitte prüfe deine Strasse.');
        document.register.strasse.focus();
      } 
	  else if (document.register.plz.value=="" || document.register.plz.value.length<4 || document.register.plz.value.length>5){
            alert('Bitte prüfe PLZ.');
        document.register.plz.focus();
      } 
	  else if (document.register.ort.value=="" ){
         alert('Bitte prüfe ORT.');
        document.register.ort.focus();
      } 
	  else if (document.register.land_id.value=="" ){
        alert('Bitte prüfe Land.');
        document.register.land_id.focus();
      } 
	  else if (document.register.geb_tag.value=="" ){
        alert('Bitte prüfe Geburtsdatum.');
        document.register.geb_tag.focus();
      } 
      else if (document.register.geb_monat.value=="" ){
        alert('Bitte prüfe Geburtsdatum.');
        document.register.geb_monat.focus();
      } 
  	  else if (document.register.geb_jahr.value=="" ){
        alert('Bitte prüfe Geburtsdatum.');
        document.register.geb_jahr.focus();
      } 
	  else if (document.register.handy_nr.value=="") {
        alert('Bitte prüfe Handy Nr.');
         document.register.handy_nr.focus();
      }
	  else if (!(document.register.handy_nr.value.substring(0,2)=="00")) {
         alert('Bitte prüfe Handy Nr: Diese Handynummer ist leider ungültig! Bitte Nr. mit vorangestelltem 0049 (für Deutschland) oder 0043 (für Österreich) eingeben');
         document.register.handy_nr.focus();
      } 
	  else if (document.register.email.value.search(/^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$/) == -1 && document.register.email.value != ""){
       alert('Deine Email ist fehlerhaft.\n Bitte korrigiere sie.');
       document.register.email.focus();
      }
	  else if (document.register.email.value=="" ){
         alert('Bitte prüfe deine Email.');
         document.register.email.focus();
      }  
	  else if(document.register.datenschutz.checked == false) {
	    alert("Bitte bestätige noch die Teilnahmebedingungen.");
        document.register.datenschutz.focus();
      }
	  else{
         document.register.submit();
		 }
}

  function modif_casse(stringtochange){
     longueur_string=stringtochange.value.length;
     for(i=1;i<=longueur_string;i++){                       
       if ((i==1) || (stringtochange.value.charAt(i-1)==("-")) || (stringtochange.value.charAt(i-1)==(" ")) || (stringtochange.value.charAt(i-1)==("'"))){
         if (i!=1){
           j=i;
         }
         else{
           j=i-1;
         }
         debutstring=stringtochange.value.slice(0,j);
         initiale=stringtochange.value.charAt(j).toUpperCase();                                      
         champ_nom=stringtochange.value.slice(j+1,longueur_string+1).toLowerCase();
         stringtochange.value=debutstring+initiale+champ_nom;           
       }
     } 
   }

  function modif_casse_email(stringtochange){
    longueur_string=stringtochange.value.length;
      for(i=1;i<=longueur_string;i++){                       
        if (i==1){
          if (i!=1){
            j=i;
          }
          else{
            j=i-1;
          }
          debutstring=stringtochange.value.slice(0,j);
          initiale=stringtochange.value.charAt(j).toLowerCase();                                      
          champ_nom=stringtochange.value.slice(j+1,longueur_string+1).toLowerCase();
          stringtochange.value=debutstring+initiale+champ_nom;
        }
      } 
  }
</script>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>


<form name="register" action="upload.php" method="post">
  <table width="420" height="340" border="0">
    <tbody> 
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">Vorname:</p>      </td>
      <td width="340" class="textOB"> 
        <input name="vorname" size="25" maxlength="50" class="contact">
        *</td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">Name:</p>      </td>
      <td width="340"  class="textOB"> 
        <input name="name" size="25" maxlength="50"  class="contact">
        *</td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">Strasse:</p>      </td>
      <td width="340"  class="textOB"> 
        <input name="strasse" size="25" maxlength="50"  class="contact">
        *</td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">PLZ / Ort:</p>      </td>
      <td width="340"  class="textOB"> 
        <input name="plz" size="4" maxlength="5"  class="contact">
        <input name="ort" size="16" maxlength="50"  class="contact">
        *</td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">Land:</p>      </td>
      <td width="340"  class="textOB"> 
        <select name="land_id" class="contact">
          <option value="1" selected>Deutschland</option>
          <option value="2">&Ouml;sterreich</option>
          <option value="3">Schweiz</option>
        </select>      </td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">Birthday:</p>      </td>
      <td width="340"  class="textOB"> 
        <select name="geb_tag" class="contact">
          <option value="" selected >Tag</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <select name="geb_monat" class="contact">
          <option value="" selected>Monat</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <select name="geb_jahr" class="contact">
          <option value="" selected>Jahr</option>
          <option value="1995">1995</option>
          <option value="1994">1994</option>
          <option value="1993">1993</option>
          <option value="1992">1992</option>
          <option value="1991">1991</option>
          <option value="1990">1990</option>
          <option value="1989">1989</option>
          <option value="1988">1988</option>
          <option value="1987">1987</option>
          <option value="1986">1986</option>
          <option value="1985">1985</option>
          <option value="1984">1984</option>
          <option value="1983">1983</option>
          <option value="1982">1982</option>
          <option value="1981">1981</option>
          <option value="1980">1980</option>
          <option value="1979">1979</option>
          <option value="1978">1978</option>
          <option value="1977">1977</option>
          <option value="1976">1976</option>
          <option value="1975">1975</option>
          <option value="1974">1974</option>
          <option value="1973">1973</option>
          <option value="1972">1972</option>
          <option value="1971">1971</option>
          <option value="1970">1970</option>
          <option value="1969">1969</option>
          <option value="1968">1968</option>
          <option value="1967">1967</option>
          <option value="1966">1966</option>
          <option value="1965">1965</option>
          <option value="1964">1964</option>
          <option value="1963">1963</option>
          <option value="1962">1962</option>
          <option value="1961">1961</option>
          <option value="1960">1960</option>
          <option value="1959">1959</option>
          <option value="1958">1958</option>
          <option value="1957">1957</option>
          <option value="1956">1956</option>
          <option value="1955">1955</option>
          <option value="1954">1954</option>
          <option value="1953">1953</option>
          <option value="1952">1952</option>
          <option value="1951">1951</option>
          <option value="1950">1950</option>
        </select>
        *</td>
    </tr>
    <tr> 
      <td width="80" valign="top" class="textB"> 
        <p align="right">Handy-Nr:</p>      </td>
      <td width="340" valign="top"  class="textOB"> 
        <p> 
          <input name="handy_nr" size="25" maxlength="50" class="contact">
          *&nbsp;Bsp: <b>0049</b>162 21234567        </p>      </td>
    </tr>
    <tr> 
      <td width="80" class="textB"> 
        <p align="right">E-Mail:</p>      </td>
      <td width="340"  class="textOB"> 
        <input name="email" size="25" maxlength="50" class="contact">
        * </td>
    </tr>
    <tr>
      <td colspan="2"><p class="stil3"><input type="checkbox" name="datenschutz" value="checkbox" />
        Ich habe die <a href="#x" onclick="MM_openBrWindow('http://www.pimkie.de/gewinnspiel/teilnahmebed.php','','width=400,height=440')">Teilnahmebedingungen</a> 
gelesen </font><font face="Arial, Helvetica" size="2">und bin 
                mit der Nutzung meiner Daten
zu den genannten Zwecken einverstanden.</p></td>
    </tr>
    <tr> 
      <td colspan="2"> 
        <input type="hidden" name="gewinnspiel" value="chupachups">
        <input type="hidden" name="antwort" value="ok" />
        <input type="hidden" name="kleidergr" value="" />
        <input type="hidden" name="farbe" value="" /></td>
    </tr>
    <tr> 
      <td width="80" ><font face="Arial, Helvetica, sans-serif" size="1">*Pflichtfelder</font> </td>
      <td width="340"> 
        <table width="128" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" height="25">
          <tr valign="middle"> 
            <td bgcolor="#FFFFFF"> 
              <div align="center"><a href="javascript:check()" text-decoration: none ><b><font size="2" face="Verdana">abschicken 
                &gt;&gt;</font></b></a></div>            </td>
          </tr>
        </table>      </td>
    </tr>
    </tbody> 
  </table>
</form>

und der Quellcode der Datei:

HTML:

<!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">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	background-color: #ffffff;
	background-image: url(images/back_main.jpg);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.Stil1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.Stil2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.Stil3 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.Stil4 {
	font-size: 14px;
	font-weight: bold;
}
.contact {
	font-size: 11px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	border: #000000; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px; 
	background-color: #FFFFFF; 
	}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-133136-4";
urchinTracker();
</script>
</head>

<body bgproperties="fixed">
<table width="590" border="0">
  <tr>
    <td width="129" valign="top"><img src="images/chica_1.gif" width="129" height="350"><br>
      <span class="Stil3">542769 - Shirt: 22,95</span><br>
      <span class="Stil3">695475 - Rock: 24,95 </span></td>
    <td valign="top" class="Stil2"><p class="Stil1"><strong>Gewinnspiel </strong></p>
      <p>
        <?
			include("form.php");
     	?>
      </p>
      </td>
  </tr>
</table>
</body>
</html>

Maik · 15. März 2007

Notiere mal für das p-Element folgende Regel im Stylesheet:

Code:

p { margin:0; }

Und damit der IE nach dem Formular keinen "unerwünschten" Außenabstand zum unteren Tabellenrand hinzufügt, nehmen wir das form-Element gleich mit in der Regel auf:

Code:

form, p { margin:0; }

tulusie · 16. März 2007

Super. Es funktioniert. Vielen, vielen Dank für Deine Hilfe.

✔ Probleme mit Darstellung IE/Firefox

tulusie

Mitglied

Anhänge

Maik

tulusie

Mitglied

Maik

tulusie

Mitglied

Neue Beiträge