alex: TD width und heigth gehen nicht im IE

SELF-Forum

TD width und heigth gehen nicht im IE

alex
– Informationen zu den Bewertungsregeln

Hallo

Mein Problem ist folgendes:
http://ringfotos.free.fr/multiserver//layer6.php?date=20030914&max=0135&seite=0&server=server01&start=100

Firefox deckt die Thumbs wie ichs mir vorgestellt habe mit dem TD Hintergrund komplett ab, IE dagegen setzt nur das Bild links oben in die Ecke und ignoriert Breite und Höhe der TD. Bei den Hochkant Fotos sieht es richitg schlimm aus.

Der entsprechende TD Tag sieht so aus:
<td bgcolor=ffffff width=800 style='height:650' align='center' style='min-height:650px' style='min-width:800px'>

Ich habe da inzwischen alles mögliche versucht aber IE will einfach nicht. Bei Firefox funktioniert es tadellos.

Das ganze wird in dieses DIV geladen, das in einer Tabelle sitzt:
<DIV ID="bildgr" name="bildgr" style="position:absolute;"></DIV>

In den entsprechenden Kapiteln in SelfHTML habe ich nichts gefunden was erklärt wieso der IE das nicht macht, theoretisch müsste es funktionieren.

Alex

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. TD width und heigth gehen nicht im IE

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber alex,

    Das ganze wird in dieses DIV geladen, das in einer Tabelle sitzt:
    <DIV ID="bildgr" name="bildgr" style="position:absolute;"></DIV>

    Das hört sich nach Kraut-und-Rüben an: Tabellenlayout, <div>s in Tabellenzellen... Mal die Seite anschauen.

    Der entsprechende TD Tag sieht so aus:
    <td bgcolor=ffffff width=800 style='height:650' align='center' style='min-height:650px' style='min-width:800px'>

    Wie ich schon sagte: Kraut-und-Rüben. Wenn Du schon CSS-Angaben machst, dann bitte erstens richtig (mit Einheiten!) und zweitens konsequent! Eine Angabe á la style='height:650' ist ohne Einheiten nicht wirklich interpretierbar. Da kann dann der Browser tun und lassen, was er will.

    In den entsprechenden Kapiteln in SelfHTML habe ich nichts gefunden was erklärt wieso der IE das nicht macht, theoretisch müsste es funktionieren.

    Der IE "versteht" Angaben wie min-width oder min-height einfach nicht. Das hättest Du in der Doku finden müssen!

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. TD width und heigth gehen nicht im IE

      alex
      – Informationen zu den Bewertungsregeln

      Lieber alex,

      Der entsprechende TD Tag sieht so aus:
      <td bgcolor=ffffff width=800 style='height:650' align='center' style='min-height:650px' style='min-width:800px'>
      Wie ich schon sagte: Kraut-und-Rüben. Wenn Du schon CSS-Angaben machst, dann bitte erstens richtig (mit Einheiten!) und zweitens konsequent! Eine Angabe á la style='height:650' ist ohne Einheiten nicht wirklich interpretierbar. Da kann dann der Browser tun und lassen, was er will.

      Also gut, ich habe jetzt folgendes:
      <td bgcolor=ffffff style='height:650px;width:800px' align='center'>

      Firefox wieder keine Probleme, IE wie gehabt.

      Der IE "versteht" Angaben wie min-width oder min-height einfach nicht. Das hättest Du in der Doku finden müssen!

      min-heigth habe ich nur versucht nachdem heigth nicht funktioniert hat. Laut der Doku sollte heigth ja gehen:
      http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height

      Gruß Alex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. TD width und heigth gehen nicht im IE

        Klawischnigg
        – Informationen zu den Bewertungsregeln

        Hi there,

        min-heigth habe ich nur versucht nachdem heigth nicht funktioniert hat. Laut der Doku sollte heigth ja gehen:

        "heigth" geht vermutlich nirgends, "height" sehr wohl...

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. TD width und heigth gehen nicht im IE

          alex
          – Informationen zu den Bewertungsregeln

          "heigth" geht vermutlich nirgends, "height" sehr wohl...

          In der Datei habe ich mich nicht vertippt, siehe oben:
          <td bgcolor=ffffff style='height:650px;width:800px' align='center'>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. TD width und heigth gehen nicht im IE

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Mein Problem ist folgendes:
    http://ringfotos.free.fr/multiserver//layer6.php?date=20030914&max=0135&seite=0&server=server01&start=100

    ...
    <table align=center width="802px" border="1" rules="none" cellspacing="0" cellpadding="0">
    <tr><td align="center" colspan="3" style=height:80 valign="middle"><h2><DIV ID="bildnr" name="bildnr">2003-09-14</div></h2></td></tr>
    <tr><td>
    <DIV ID="bildgr" name="bildgr" style="position:absolute;"></DIV>
    </td></tr>
    <tr>
    <td align="center" style="height:600px" colspan="3" valign="top">
    ...

    In das DIV#bildgr schreibst Du dann mit JavaScript folgenden Code:

    <tr><td bgcolor=ffffff style='height:650px;width:800px' align='center'><a  onclick=document.getElementById('bildgr').innerHTML='';document.getElementById('bildnr').innerHTML='2003-09-14'><img src='"[BildURI]"' border=0></a></td></tr>

    Nun steht _in_ einer Tabelle von 802px Breite, die in der ersten Zeile 3 Spalten (colspan="3") hat, in der darauf folgenden Zeile eine Zelle mit einem absolut positionierten DIV in dem wieder ein TR-Element steht, welches ein TD-Element enthält, welches 800px breit sein soll.

    Wirr, oder?

    Überdenke das Konzept nochmals. Ich würde das große Bild in einem absolut positionierten IMG-Element völlig außerhalb der Tabelle anzeigen, dessen src-Attribut mit JavaScript geändert wird und dessen display-Eigenschaft mit Javascript von none auf block und wieder zurück gesetzt wird.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. TD width und heigth gehen nicht im IE

      alex
      – Informationen zu den Bewertungsregeln

      Nun steht _in_ einer Tabelle von 802px Breite, die in der ersten Zeile 3 Spalten (colspan="3") hat, in der darauf folgenden Zeile eine Zelle mit einem absolut positionierten DIV in dem wieder ein TR-Element steht, welches ein TD-Element enthält, welches 800px breit sein soll.

      Wirr, oder?

      Das wirre Zeug bin ich im Moment am korrigieren. Zuerst ging es darum die Technik der Seite hinzubekommen, die steht nun. Jetzt werden die Fehler im Layout ausgemerzt.

      Überdenke das Konzept nochmals. Ich würde das große Bild in einem absolut positionierten IMG-Element völlig außerhalb der Tabelle anzeigen, dessen src-Attribut mit JavaScript geändert wird und dessen display-Eigenschaft mit Javascript von none auf block und wieder zurück gesetzt wird.

      Das hatte ich zuerst vor, aber da ich den Hintergrund auch überdecken will reicht nur ein Bild nicht aus. In der Galerie sind noch alte Bilder mit 4:3 Format, neue mit 3:2 und die alle auch noch im Hochformat. Eine feste Grösse gibts also nicht. Deswegen der weisse Hintergrund und nur in der Mitte das Bild.

      Aktuell sieht es jetzt so aus daß ich noch eine Tabelle eingefügt habe, allerginds ist das Bild nun 1px zu weit rechts und überdeckt die Randlinie rechts unten. In Firefox geht es immernoch ohne Probleme. IE nimmt jetzt nur die feste Höhe, die Breite funktioniert nicht.

      <td style='height:650px;width:800px;text-align:center;vertical-align:top;background:#FFFFFF;'>

      Gruß Alex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. TD width und heigth gehen nicht im IE

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        Das wirre Zeug bin ich im Moment am korrigieren. Zuerst ging es darum die Technik der Seite hinzubekommen, die steht nun. Jetzt werden die Fehler im Layout ausgemerzt.

        Dass die HTML-Struktur
        <tr><td><div><tr><td></td></tr></div></td></tr>
        nicht richtig ist, hat mit Layout nichts zu zun.

        Das hatte ich zuerst vor, aber da ich den Hintergrund auch überdecken will reicht nur ein Bild nicht aus.

        Ja, dann nimm ein absolut positioniertes DIV mit einer Tabelle darin, aber _außerhalb_ der Tabelle mit den Thumbnails.

        Aktuell sieht es jetzt so aus daß ich noch eine Tabelle eingefügt habe,

        Ja, aber immer noch _inerhalb_ der linken Zelle einer dreispaltigen Tabelle. Das <DIV ID="bildgr" name="bildgr" style="position:absolute;"></DIV> muss aus der Thumbnail-Tabelle raus.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. TD width und heigth gehen nicht im IE

          alex
          – Informationen zu den Bewertungsregeln

          Hallo Axel

          Dass die HTML-Struktur
          <tr><td><div><tr><td></td></tr></div></td></tr>
          nicht richtig ist, hat mit Layout nichts zu zun.

          Mit Layout meinte ich generell den HTML Teil. Das generieren der Links etc. meinte ich mit Technik.

          Gruß Alex

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. TD width und heigth gehen nicht im IE

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Mein lieber alex!

        Aktuell sieht es jetzt so aus daß ich noch eine Tabelle eingefügt habe

        Aktuell hast Du schon wieder nicht begriffen, dass Dein Tabellen-Wahn Dich nur in die Wüste führt! Schau Dir mal an, was man mit CSS alles machen kann und nimm Abstand von Tabellen zu Layoutzwecken!

        Beispiel:
        HTML: <div id="vollansicht"></div>
        CSS: ~~~css #vollansicht {
              position: absolute;
              display: block;
              width: 800px;
              height: 600px;
              border: 1px solid black;
              background: #ffffff;
              }
        #vollansicht img {
              margin: 0 auto;
              padding: 0px 0px 0px 0px; /* hier kannst Du den Innen-Abstand fummeln */
              }

        JS: `document.getElementById("vollansicht").innerHTML = '<img src="..." alt="Vollbild" />';`{:.language-javascript}  
  
Ist das so schwer???  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. TD width und heigth gehen nicht im IE

          alex
          – Informationen zu den Bewertungsregeln

          Hallo Felix

          Aktuell hast Du schon wieder nicht begriffen, dass Dein Tabellen-Wahn Dich nur in die Wüste führt! Schau Dir mal an, was man mit CSS alles machen kann und nimm Abstand von Tabellen zu Layoutzwecken!

          Ursprünglich wollte ich das so machen, bin aber in die Tabelle gegangen weil ich das DIV nicht mittig bekommen habe. Genau das Problem habe jetzt jetzt wieder:

          http://ringfotos.free.fr/multiserver/layer9.php?date=20030914&max=0986&seite=3&server=server01&start=1

          Abgesehen davon bleibt der Rand sichtbar wenn ich das Bild wegklicke. Wieso das so ist verstehe ich im Moment auch nicht.

          Beim IE sitzt das DIV jetzt ein paar Pixel höher wie in Firefox. :-/

          Gruß Alex

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. TD width und heigth gehen nicht im IE

            Felix Riesterer Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Lieber alex,

            Ursprünglich wollte ich das so machen, bin aber in die Tabelle gegangen weil ich das DIV nicht mittig bekommen habe. Genau das Problem habe jetzt jetzt wieder:

            http://ringfotos.free.fr/multiserver/layer9.php?date=20030914&max=0986&seite=3&server=server01&start=1

            Es wäre bequemer, wenn Du Links anklickbar machst: < (Adresse) > (alles ohne Leerzeichen!)

            Ich lese in Deinem CSS folgendes:

                  #vollansicht {  
      position: absolute;  
      top: 87px;  
      left: auto;  
      right: auto;

            Was soll dieses left:auto und right:auto?? Wenn Du absolut positionierst, dann kannst Du nix auto-matisch einstellen, weil es keinen Bezug gibt! Gib entweder left oder right an, und zwar mit festen Werten.

            Schau Dir doch mal meine Lösung an!

            Liebe Grüße aus Ellwangen,

            Felix Riesterer.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. TD width und heigth gehen nicht im IE

              alex
              – Informationen zu den Bewertungsregeln

              Es wäre bequemer, wenn Du Links anklickbar machst: < (Adresse) > (alles ohne Leerzeichen!)

              OK, das wusste ich nicht.

              Ich lese in Deinem CSS folgendes:

              #vollansicht {

              position: absolute;
                    top: 87px;
                    left: auto;
                    right: auto;

              
>   
> Was soll dieses left:auto und right:auto?? Wenn Du absolut positionierst, dann kannst Du nix auto-matisch einstellen, weil es keinen Bezug gibt! Gib entweder left oder right an, und zwar mit festen Werten.  
  
Das heisst ohne Tabelle gehts nicht? Dann wär ich also wieder am Anfang. Einen festen Wert kann ich ja nicht angeben weil ich nicht weiss wie breit das Browserfenster ist. Das wird jetzt alles etwas arg umständlich. Wenn man bedenkt daß es in meiner Kraut-und-Rüben Version in Firefox auch funktioniert hat.  
  
Also eine Möglichkeit absolut in % zu positionieren gibts nicht?  
  
  
Gruß Alex
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. TD width und heigth gehen nicht im IE

                Felix Riesterer Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Lieber alex,

                Deine Seite sollte auch ohne Javascript benutzbar sein. Daher muss in das Verweisziel der Links mehr, als nur ein "#"! Den Javscript-Effekt kannst Du dann per onclick-Attribut immer noch aufrufen, bedenke aber, dass da ein "return false" hinein muss, sonst wird im Browserfenster das eigentliche Linkziel tatsächlich aufgerufen!

                Also eine Möglichkeit absolut in % zu positionieren gibts nicht?

                Meines wissens schon, aber das ist dann (beim IE funktioniert es außerdem völlig anders) am Elternelement ausgerichtet... Irgendwie nicht so der Bringer. Aber Du verwendest doch Javascript!

                Das heisst ohne Tabelle gehts nicht?

                Doch, natürlich! Und das mit semantischem HTML und CSS! Dadurch wird die Seite so angezeigt, wie Du es gerne hättest, aber auch andere Systeme, die Deine Seite aufrufen (Suchmaschienen, Screenreader etc.) finden sich so wesentlich besser auf ihr zurecht! Damit trennst Du strikt zwischen dem Inhalt an sich (steht im HTML) und seiner Darstellung (steht im CSS).

                Dann wär ich also wieder am Anfang.

                Um Himmels Willen, bloß nicht!

                Einen festen Wert kann ich ja nicht angeben weil ich nicht weiss wie breit das Browserfenster ist. Das wird jetzt alles etwas arg umständlich. Wenn man bedenkt daß es in meiner Kraut-und-Rüben Version in Firefox auch funktioniert hat.

                Du setzt doch Javascript voraus, dann nutze es doch auch für diese Aufgabe!

                Also ich habe das Gesagte mal ausprobiert und Dir hier meinen Code gepostet. Er sollte Dir Gelegenheit geben, das Dir bisher Unklare hieran zu studieren:

                  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
<head>  
<title>Galerie 2003-09-14</title>  
<style type="text/css">  

~~~~~~css
a:link { color:#000000; text-decoration:none }  
a:visited { color:#000000; text-decoration:none }  
a:hover { color:#000000; text-decoration:none }  
a:active { color:#000000; text-decoration:none }  
a:focus { color:#000000; text-decoration:none }  
a img { border: none; }  
  
#gallerie { display: block; width: 800px; margin: 0 auto; padding: 20px; border: 1px solid black; }  
#gallerie h1 { font-size: 150%; text-align: center; font-weight: bold; }  
#gallerie h2 { font-size: 125%; text-align: center; font-weight: normal; }  
#gallerie p { font-size: 100%; text-align: center; }  
#gallerie img { border: none; }  
  
* body { text-align: center; } // CSS-Hack für IE  
  
.seiten-auswahl { font-size: 90%; font-weight: bold; }  
.seiten-auswahl .aktuelle-seite { font-size: 150%; font-weight: bolder; font-style: italic; color: #ff0000; }  
  
#vollansicht { display: block; position: absolute; border: 1px solid black; background: #ffffff; display: none; }  
#vollansicht img {display: block; margin: 10px auto; padding: 10px 10px 10px 10px; /* hier kannst Du den Innen-Abstand fummeln */ }  

~~~~~~html
</style>  
<script type="text/javascript">  

~~~~~~javascript
function grossmachen(grossbild)  
   {  
   var browserbreite, browserhoehe;  
   var vollbild = document.getElementById("vollansicht");  
   var gallerie = document.getElementById("gallerie");  
   var x_pos, y_pos;  
  
   if(window.innerWidth)  
      {  
      x_pos = 0 + window.pageXOffset + "px";  
      y_pos = 0 + window.pageYOffset + "px";  
      browserbreite = window.innerWidth;  
      browserhoehe = window.innerHeight;  
      }  
    else  
      {  
      var IE = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null;  
      x_pos = 0 + IE.scrollLeft + "px";  
      y_pos = 0 + IE.scrollTop + "px";  
      browserbreite = document.body.offsetWidth;  
      browserhoehe = document.body.offsetHeight;  
      }  
  
   vollbild.style.left = x_pos;  
   vollbild.style.top = y_pos;  
   vollbild.innerHTML = '<img src="' + grossbild + '" alt="Vollansicht" />';  
   vollbild.style.width = browserbreite - 20 + "px";  
   vollbild.style.height = browserhoehe - 20 + "px";  
   vollbild.style.display = "block";  
   return false;  
   }  
  
function wegmachen()  
   {  
   document.getElementById("vollansicht").style.display = "none";  
   }  

~~~~~~html
</script>  
</head>  
<body>  
<div id="vollansicht" onclick="wegmachen();"></div>  
<div id="gallerie">  
<h1>Bilder-Gallerie</h1>  
<h2>2003-09-14</h2>  
<p>  
<a href="http://134.130.50.42/~alex/webpics_neu/20030914/20030914_0109.jpg" onclick="return grossmachen(this.href);"><img src="http://134.130.50.42/~alex/webpics_neu/20030914/tn_20030914_0109.jpg" alt="Thumbnail"></a>  
<a href="http://134.130.50.42/~alex/webpics_neu/20030914/20030914_0110.jpg" onclick="return grossmachen(this.href);"><img src="http://134.130.50.42/~alex/webpics_neu/20030914/tn_20030914_0110.jpg" alt="Thumbnail"></a>  
...  
<a href="http://134.130.50.42/~alex/webpics_neu/20030914/20030914_0130.jpg" onclick="return grossmachen(this.href);"><img src="http://134.130.50.42/~alex/webpics_neu/20030914/tn_20030914_0130.jpg" alt="Thumbnail"></a>  
<a href="http://134.130.50.42/~alex/webpics_neu/20030914/20030914_0131.jpg" onclick="return grossmachen(this.href);"><img src="http://134.130.50.42/~alex/webpics_neu/20030914/tn_20030914_0131.jpg" alt="Thumbnail"></a>  
</p>  
  
<p class="seiten-auswahl">  
<a href="layer9.php?date=20030914&amp;max=0986&amp;seite=2&amp;server=server01&amp;start=1">&lt;&lt;&lt;</a>  
<a href="layer9.php?date=20030914&amp;max=0986&amp;seite=0&amp;server=server01&amp;start=1">0</a>  
<a href="layer9.php?date=20030914&amp;max=0986&amp;seite=1&amp;server=server01&amp;start=1"><span class="aktuelle-seite">1</span></a>  
...  
<a href="layer9.php?date=20030914&amp;max=0986&amp;seite=27&amp;server=server01&amp;start=1">27</a>  
<a href="layer9.php?date=20030914&amp;max=0986&amp;seite=4&amp;server=server01&amp;start=1">&gt;&gt;&gt;</a>  
</p>  
</div>  
</body>  
</html>

                Kommt das so in etwa Deinen Vorstellungen nahe?

                Liebe Grüße aus Ellwangen,

                Felix Riesterer.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. TD width und heigth gehen nicht im IE

                  alex Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Hallo Felix

                  Kommt das so in etwa Deinen Vorstellungen nahe?

                  Damit hast du mich ein gutes Stück weiter gebracht, danke. Jetzt blicke ich einigermassen durch.

                  Zum mittig zentrieren nutze ich jetzt folgendes:
                  vollbild.style.left = browserbreite * 0.5 - 400 - 1 + "px";

                  Damit es beim IE passt muß ich noch 20px drauflegen.
                  browserbreite = document.body.offsetWidth + 20;

                  Die Gallerie richte ich jetzt am besten auch absolut aus, vielleicht stimmts dann mal in beiden Browsern überein ohne daß man korrigieren muß.

                  Danke & Gruß

                  Alex

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln