• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

iframe verändert Zeilenhöhe in Tabelle

Warsein

Neues Mitglied
Hallo,

ich habe folgendes Problem:

Ich habe ein Kontaktformular erstellt, welches ich mit Hilfe einer Tabelle angeordnet habe.
Nun ist es so, dass ich ein Captcha mit Hilfe eines iframes in einer Tabellenzelle eingefügt habe.
Allerdings verändert das iframe die Größe der entsprechenden Zeile.
Das Captcha ist maximal 30px hoch. Die Zeilenhöhe beträgt 20px. Wenn ich aber das Captcha per iframe in die Zelle füge entsteht unterhalb des Captchas (noch innerhalb der Zelle) ein Abstand von etwa 100px.
Das sieht nun ziemlich doof aus, da unterm Captcha unmittelbar das Eingabefeld für genanntes sein soll.

Hat da jemand eine Idee?

Für Rückfragen oder Unklarheiten stehe ich natürlich gerne zur Verfügung :)

Warsein

hier noch ein Bild dazu:

captcha.png
 
Das Bild im Anhang kann ich irgendwie nicht öffnen.

Da Du keinen Quellcode lieferst kann man leider nur raten woran es liegen könnte. Hast Du die Standard-Abstände der Browser per CSS zurückgestellt?
 
Das ist Code von der kontakt.html, also des Kontaktformulars.
Was vllt noch wichtig ist: Momentan hab ich die Zeilenhöhe nicht definiert. Aber selbst wenn ich es tu, funktioniert es nicht ;)
Sieht vllt etwas wirr aus. Aber ich kann es noch gut durchblicken^^
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
  <link rel="STYLESHEET" href="style.css" type="text/css">
  <title>XXXX - Webpräsenz</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 <body>
  <div id="seite">
   <div id="inhalt">
    <table id="table">
     <tr>
      <td id="tdmenue"><div id="menue_blau"><a href="index.html">STARTSEITE</a></div></td>
      <td id="tdmenue"><div id="menue_blau"><a href="XXXX.html">XXXX</a></div></td>
      <td id="tdmenue"><div id="menue_blau"><a href="/phpbb/">FORUM</a></div></td>
      <td id="tdmenue"><div id="menue1"><a href="kontakt.html">KONTAKT</a></div></td>
      <td id="tdmenue"><div id="menue_blau"><a href="bestellung.html">GÄSTEBUCH</a></div></td>
      <td id="tdmenue"><div id="menue_blau"><a href="hilfe.html">GALLERIE</a></div></td>
     </tr>
    </table>
    <div id="centertable">Hier haben Sie die Möglichkeit mit Hilfe dieses Kontaktformulars eine Nachricht an mich zu senden.<br />
         Über Verbesserungsvorschläge zu meiner Website würde ich mich sehr freuen!<br />
    <table id="tableform" border="1">
      <FORM METHOD="POST" ACTION="vionlink-formmailer.php" id="form">
      <tr>
       <td id="form1">NAME</td>
       <td><INPUT TYPE="Text" NAME="name" id="form2"></td>
      </tr>
      <tr>
       <td id="form1">E-MAIL</td>
       <td><INPUT TYPE="Text" NAME="mail" id="form2"></td>
      </tr>
      <tr>
       <td id="form1">NACHRICHT</td>
       <td><TEXTAREA NAME="text" ROWS="10" COLS="40" id="form2"></TEXTAREA></td>
      </tr>
      <tr>
       <td id="form1"></td>
       <td><iframe id="code" src="src/capmaker.php" scrolling="no" frameborder="0"></iframe></td>
      </tr>
      <tr>
       <td>SICHERHEITSCODE</td>
       <td id="form1">
       <input name="cap" type="text" class="cap"><br style="clear:left;" ></td>
      </tr>
      <tr>
       <td></td>
       <td><INPUT TYPE="Submit" VALUE="Absenden" id="form2">&nbsp;<INPUT TYPE="RESET" VALUE="Löschen" id="form2"></td>
      </tr>
      </FORM>
     </table><br />
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
 
Zuletzt bearbeitet:
Der HTML-Quellcode ist schonmal nicht valide. Sowas

Code:
<table id="tableform" border="1">
      <FORM METHOD="POST" ACTION="vionlink-formmailer.php" id="form">
      <tr>

ist falsch. Direkt unterhalb von <table> dürfen nur Tabellenelemente vorkommen. <form> gehört nicht dazu.

Und ohne Stylesheet wird man dir auch weiterhin nicht weiterhelfen können. Ein Link zur Seite wäre besser.
 
Die Seite möchte ich nicht hier veröffentlichen, da sie noch nicht fertig ist.
Hier die relevanten Teile des stylesheets:

Code:
#seite { font-family:georgia; font-size:14px; width:100%; height:100%; background-color:#FFFFFF; }
#inhalt { width:960px; height:100%; margin:0 auto; background-color:#FFFFFF;}
#table { width:960px; height:20px; text-align:center; font-size:16px; }
#tdmenue { padding-right:20px; padding-left:20px; padding-top:20px; color:#009966; }
#menue_blau a:link { text-decoration:none; color:#0066CC; }
#menue_blau a:visited { text-decoration:none; color:#0066CC; }
#menue_blau a:hover { text-decoration:none; color:#000000; }
#menue_blau a:active { text-decoration:none; color:#0066CC; }
#menue_blau a:focus { text-decoration:none; color:#0066CC; }
#menue1 a:link { text-decoration:none; color:#000000; }
#menue1 a:visited { text-decoration:none; color:#000000; }
#menue1 a:hover { text-decoration:none; color:#000000; }
#menue1 a:active { text-decoration:none; color:#000000; }
#menue1 a:focus { text-decoration:none; color:#000000; }
#centertable { width:650px; margin:20px auto; }
#form1 { vertical-align:top; }
#form2 { font-family:georgia; font-size:13px}
Ob "falsch" (wer definiert denn, ob falsch oder nicht?) oder richtig ist für mich nicht primär von Bedeutung. Ich möchte nur, dass es funktioniert. Wenn es Einfluss auf das hat, was ich vorhabe, dann ist es natürlich auch für mich wichtig.
Muss ich den <form>-Tag also vor dem <table>-Tag einfügen? Hat das irgendwelche Auswirkungen?

Gruß Warsein
 
Ja, dadurch wird dein HTML-Code valide was Grundvoraussetzung dafür ist Darstellungsprobleme zu untersuchen.

Dein CSS-Ausschnitt reicht nicht aus. Entweder alles oder gar nichts. Bei letzterem kann man dir aber genauso wenig helfen wie jetzt auch schon. Z.B. sehe ich nicht, dass Du irgendwelche Standardabstände der Elemente zurücksetzt. Das ginge so:

Code:
* { margin: 0;padding: 0; }

Für Tabellen gibt es auch noch weitere Eigenschaften die ich bei dir nicht sehen kann. Schau dir mal border-collapse an.
 
Zurück
Oben