✔ Darstellungsproblem

[Beppo98]

Hallo Forum,

ich habe bei meinem "kleinen" Homepage-Projekt wieder mal ein kleines Darstellungsproblem. Denn wenn ich an der eingerahmente Stelle auf der Webseite die Buttons in Form von Bilder einfügen möchte, vergrößert sich die ganze Fläche, obwohl die Buttons eigentlich kleiner sind als die Höhe der Zeile. Im Firefox ist die Veränderung eher gering, aber im IE 6 und Opera 9.22 ist das Problem ziemlich sichtbar.

Hier gehts zur Seite

Der Problembereich ist schwarz eingerahmt. Der Code zu diesem Bereich sieht wie folgt aus:

<td class='Loginleiste2' style=" border: 1px solid black;">
  <form method='GET' name='Formular1' action='unterseiten/login.php'>
   <table>
     <tr>
       <td><input type="image" name='Login' value='Submit' src='images/buttons/pic_login.gif'></td>
       <td><!--<a href='unterseiten/registrierung.php' ><img class='button' src='images/buttons/pic_register.gif'/></a>--></td>
       <td><!--<a href='home.php' ><img class='button' src='images/buttons/pic_pw.gif'/></a>--></td>
     </tr>
   </table>
  </form>
</td>

Ich könnte das Problem zwar umgehen, indem ich das Wiederholen der Hintergrundgrafiken verbiete und die Positionierung der Elemente dann mittels PHP-Browserweiche regle. Diese Methode erscheint mir aber äußerst unsauber und ich denke, dass es hier noch eine andere bessere Lösung gibt.

Danke schonmal im Vorraus

Grüsse,
Beppo

 

[Maik]

Hi,

setz mal die Polsterungseigenschaften des Formulars auf null:

form {
margin: 0;
padding: 0;
}

 

[Beppo98]

Hey, danke nochmals für deine Hilfe. Das mit dem Formular hat schonmal funktioniert

Aber jetzt habe ich bereits das nächste Problem mit einem Darstellungsfehler im Firefox und Opera. Zu sehen ist der Fehler auf dieser Homepage

Dort bildet sich nämlich im Main-Bereich ein Abstand zwischen dem Main-Header und dem eigentlichen Main-Bereich. Hab das ganze schon versucht mit margin: 0px und padding: 0px zu lösen, dieser Versuch brachte jedoch nicht den erwünschten Erfolg.

Hier ein kleiner Ausschnitt des Codes:

<div id="Main">
    <table cellpadding="0" cellspacing="0" style="border: 0px solid black; width: 770px; border-collapse:collapse;">
     <tr>
      <td><img src="../images/main/login.gif"></td>
     </tr>
     <tr>
      <td class="MainBereich2" style="vertical-align: top; height: 444px;">
       <br />
	      <div style="font-size: 14px;">
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ihre Anmeldedaten waren nicht korrekt!
        </div>
      </td>
    </tr>
    <tr>
     <td class="Mainfuss"></td>
    </tr>
   </table>
</div>

Danke schon im Vorraus für eure Hilfe

Grüsse, Beppo

 

[Maik]

Hi,

zeichne das Grafikelement (login.gif) mit display:block aus:

<div id="Main">
    <table cellpadding="0" cellspacing="0" style="border: 0px solid black; width: 770px; border-collapse:collapse;">
     <tr>
      <td><img src="../images/main/login.gif" style="display:block;"></td>
     </tr>
     <tr>
      <td class="MainBereich2" style="vertical-align: top; height: 444px;">
        <br />
              <div style="font-size: 14px;">
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ihre Anmeldedaten waren nicht korrekt!
        </div>
      </td>
    </tr>
    <tr>
     <td class="Mainfuss"></td>
    </tr>
   </table>
</div>

 

[Beppo98]

Hat funktioniert. Super, danke

Grüsse, Beppo