xasz: Bilder onclick im IE nicht ohne Lücken

Hallo Leute,

ich habe momentan das Problem, dass ich es nicht schaffe ein paar Bilder mit Links im IE ohne Lücken dazwischen anzuzeigen.
Habe schon alles probiert was ich gefunden habe, margin, padding, border-spacing... und so, aber es will einfach nicht klappen.

Hier mal der HTML Code:

  
<div id="ControlHUD">  
  <table>  
    <tr>  
      <td>  
      </td>  
      <td>  
       <a href="#" onclick="camera('moveup')"><img src="template/blueworld/gfx/ControlHud1_02.jpg" border="0"></a>  
      </td>  
      <td>  
      </td>  
    </tr>  
    <tr>  
      <td>  
       <a href="#" onclick="camera('moveleft')"><img src="template/blueworld/gfx/ControlHud1_04.jpg" border="0"></a>  
      </td>  
      <td>  
       <a href="#" onclick="camera('stop')"><img src="template/blueworld/gfx/ControlHud1_05.jpg" border="0"></a>  
      </td>  
      <td>  
       <a href="#" onclick="camera('moveright')"><img src="template/blueworld/gfx/ControlHud1_06.jpg" border="0"></a>  
      </td>  
    </tr>  
    <tr>  
      <td>  
      </td>  
      <td>  
       <a href="#" onclick="camera('movedown')"> <img src="template/blueworld/gfx/ControlHud1_08.jpg" border="0"></a>  
      </td>  
      <td>  
      </td>  
    </tr>  
  </table>  

Das hier ist mein aktueller CSS-Code, der einfach net des tut was er soll :)

  
#ControlHUD{  
  position:absolute;  
  margin-top:-270px;  
  margin-left:-640px;  
}  
  
#ControlHUD table td {  
  padding:0px;  
  margin:0px;  
  border-collapse:separate;  
	border-spacing:1px;  
  }  
#ControlHUD table td img {  
  display: block;  
  padding:0px;  
  margin:0px;  
  border-collapse:separate;  
	border-spacing:1px;  
}  

Ich habe keine weiteren Befehle mehr gefunden, mit welchen ich den Abstand zwischen den Bildern entfernen könnte.

Danke für euere Hilfe

der xasz

  1. Habe schon alles probiert was ich gefunden habe, margin, padding, border-spacing... und so, aber es will einfach nicht klappen.

    Hast du mal probiert die Tabelle zu entfernen?

    Struppi.

    1. Es handelt sich um keine Liste an Links, sondern um 6 Bilder, die in einem SteuerKreuz angeordner sind.
      SteuerKreuz

      Was onclick="'camera('moveright')" macht, spielt ehrlich gesagt garkeine Rolle, auserdem dachte ich bin ich mit meinen Funktionsnamen soweit, dass man doch versteht was diese tun sollen.

      Ich bin ehrlich gesagt auch sehr schokiert von mir warum ich das nicht hinbekomme, ich habe früher sehr viel mit HTML und PHP gemacht und hab grad nur ein kleines Projekt in PHP geschrieben und wollte ein interface zu machen.

      Warum ich eine Tabelle benutze ?
      Weil ich finde, dass dies in solch einer Situation am angebrachtesten ist.

      Eventuell kann mir ja noch jemand helfen ?

      Danke!

      der xasz

      1. Lieber xasz,

        SteuerKreuz

        404 Not Found.

        Was onclick="'camera('moveright')" macht, spielt ehrlich gesagt garkeine Rolle,

        Na, dann...

        Warum ich eine Tabelle benutze ?
        Weil ich finde, dass dies in solch einer Situation am angebrachtesten ist.

        Na, dann... Und was machen Leute, die gerade kein JavaScript nutzen können? Haben die dann was von Deiner Seite?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Na, dann... Und was machen Leute, die gerade kein JavaScript nutzen können? Haben die dann was von Deiner Seite?

          Naja, vermutlich soviel wie von der Seite http://felix-riesterer.de/self/game-entwurf/. Das Konstrukt sieht nach einer Steuerung für etwas spezielles aus und nicht unbedingt nach einem Ersatz für ein Standardverhalten. Insofern ist eine Alternative wohl nicht unbedingt sinnvoll.

          Struppi.

          1. Lieber Struppi,

            und wieder zeigt sich, es steht und fällt eben alles mit einer vernünftigen Problembeschreibung, und die hiesige war eben - wie so oft wenn Diskussionen dieser Art entstehen - leider nix.

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. und wieder zeigt sich, es steht und fällt eben alles mit einer vernünftigen Problembeschreibung, und die hiesige war eben - wie so oft wenn Diskussionen dieser Art entstehen - leider nix.

              Genau das dachte ich auch, bis ich den Code mal ausprobiert hatte.

              Struppi.

      2. Es handelt sich um keine Liste an Links, sondern um 6 Bilder, die in einem SteuerKreuz angeordner sind.
        SteuerKreuz

        Stimmt, ich hab mir den Code mal kopiert und sehe es.

        Was onclick="'camera('moveright')" macht, spielt ehrlich gesagt garkeine Rolle, ..

        Deshalb war es seltsam, dass du es im titel deiner Frage erwähnt hast.

        Eventuell kann mir ja noch jemand helfen ?

        https://forum.selfhtml.org/?t=202219&m=1365460

        Struppi.

      3. Hallo xasz,

        Warum ich eine Tabelle benutze ?
        Weil ich finde, dass dies in solch einer Situation am angebrachtesten ist.

        Das finde ich nicht, denn du verpackst hier keine tabellarischen Daten, sondern missbrauchst eine Tabelle zu Layoutzwecken.

        Darüber hinaus geht es ohne Tabelle auch mit weniger Code, sowohl im CSS:

        #DirectionalPad { width:90px; height:90px; }  
        #DirectionalPad img { display:block; margin:auto; border:0; }  
        #DirectionalPad div { height:30px; }  
        #DirectionalPad div img { float:left; }
        

        ... als auch im HTML!

        Gruß Gernot

      4. Hallo,

        Es handelt sich um keine Liste an Links, sondern um 6 Bilder, die in einem SteuerKreuz angeordner sind.
        SteuerKreuz

        Warum ich eine Tabelle benutze ?
        Weil ich finde, dass dies in solch einer Situation am angebrachtesten ist.

        HTML hat Besseres für Dich, besser auch als der Vorschlag von Gernot:
        Nutze ein <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweissensitives Bild>. Neben der sinnvolleren Auszeichnung reduzierst Du außerdem die Anzahl der angeforderten Ressourcen, was sich positiv auf die Performance auswirkt.

        Zusätzlich erledigt die Imagemap Dein Darstellungsproblem (das Du natürlich auch mit meinem ersten Hinweis in den Griff kriegen kannst). Mit dem Rückgang von Tabellenlayouts tritt das Problem nicht mehr so oft in Erscheinung wie früher, so dass manche gar nicht mehr daran denken. Sven Rautenberg hat es gerade gestern alten Forumshasen in Erinnerung gebracht.

        Freundliche Grüße

        Vinzenz

        1. Zusätzlich erledigt die Imagemap Dein Darstellungsproblem (das Du natürlich auch mit meinem ersten Hinweis in den Griff kriegen kannst). Mit dem Rückgang von Tabellenlayouts tritt das Problem nicht mehr so oft in Erscheinung wie früher, so dass manche gar nicht mehr daran denken. Sven Rautenberg hat es gerade gestern alten Forumshasen in Erinnerung gebracht.

          Hat er? Seine Antwort hatte nichts mit meiner vorherigen zu tun. Es ging um den Unterschied zwischen Leerzeichen und Tabs, da macht kein Browser einen Unterswchied. Insofern war seine Antwort fehl am Platze, da das Problem an sich geklärt war.

          Struppi.

        2. Hallo Vinzenz,

          HTML hat Besseres für Dich, besser auch als der Vorschlag von Gernot:
          Nutze ein <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweissensitives Bild>. Neben der sinnvolleren Auszeichnung reduzierst Du außerdem die Anzahl der angeforderten Ressourcen, was sich positiv auf die Performance auswirkt.

          Ob dein Ansatz allerdings, wenn auch noch ein Hover-/MouseOver- und/oder Klickstatus für die einzelnen Tasten des Steuerkreuzes gewünscht sein sollte, überhaupt praktikabel ist, wage ich zu bezweifeln.

          Gruß Gernot

          1. Hallo Gernot,

            Nutze ein <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweissensitives Bild>. Neben der sinnvolleren Auszeichnung reduzierst Du außerdem die Anzahl der angeforderten Ressourcen, was sich positiv auf die Performance auswirkt.

            Ob dein Ansatz allerdings, wenn auch noch ein Hover-/MouseOver- und/oder Klickstatus für die einzelnen Tasten des Steuerkreuzes gewünscht sein sollte, überhaupt praktikabel ist, wage ich zu bezweifeln.

            das ist ein Argument. Wäre vermutlich 'ne eklige Sprite-Rumschieberei :-)

            Freundliche Grüße

            Vinzenz

            1. Hallo Vinzenz,

              das ist ein Argument. Wäre vermutlich 'ne eklige Sprite-Rumschieberei :-)

              Nicht nur das: Du würdest die inhaltsschweren Tasten-Bilder auch zu einem riesengroßen Hintergrundbild des Blindpixels degradieren, dem du die Imagemap zuweist.

              Gruß Gernot

  2. Lieber xasz,

    ich habe momentan das Problem, dass ich

    ...

    <table>

    <tr>
          <td>
          </td>
          <td>
           <a href="#" onclick="camera('moveup')"><img src="template/blueworld/gfx/ControlHud1_02.jpg" border="0"></a>
          </td>
          <td>
          </td>
        </tr> [...]
        </table>

    benutze.  
      
    Du hast Bilder, die anklickbare Links sein sollen. Und damit handelt es sich um eine \_Liste\_ an Links, stimmt's? Warum nur machst Du dann eine Tabelle daraus??  
      
    Wie man sieht, versuchst Du Dich mit CSS. Warum nur setzt Du Deinem CSS eine so ungünstige Dokumentstruktur vor?  
      
    So, und nun zur eigentlichen Frage. Was war das doch gleich mit "onclick"? Was soll da eigentlich passieren? Und was tut eigentlich "`camera('moveup')`{:.language-javascript}"?  
      
    Offensichtlich hast Du die [Tipps für Fragende](/hilfe/charta.htm#tipps-fuer-fragende) völlig ignoriert...  
      
    Liebe Grüße,  
      
    Felix Riesterer.
    
    -- 
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    
  3. Hallo,

    ich habe momentan das Problem, dass ich es nicht schaffe ein paar Bilder mit Links im IE ohne Lücken dazwischen anzuzeigen.

    <td>
           <a href="#" onclick="camera('moveup')"><img src="template/blueworld/gfx/ControlHud1_02.jpg" border="0"></a>
          </td>

    Ich habe keine weiteren Befehle mehr gefunden, mit welchen ich den Abstand zwischen den Bildern entfernen könnte.

    das Problem ist in der Liste der häufig gestellten Fragen dieses Forums enthalten:

    Woher kommen die Lücken zwischen meinen Bildern in der Tabelle?

    Freundliche Grüße

    Vinzenz