Hendrik: bilder horizontal darstellen im IE

moin,
habe folgendes problem. im FF, Konqueror, Safarie funzt die horizontale darstellung von bilderreihen, im IE und Opera nicht.
Nun versuche ich das ganze ohne tabelle zu lösen und komme nicht weiter.
siehe hier => http://browsershots.org/http://www.netzwerk-der-socken.net/S-16.html

die z.B =>  http://www.netzwerk-der-socken.net/S-20-29.html

hatte schon daran gedacht mit "overflow und scroll" zu arbeiten gefällt mir aber nicht.
hat jemand einen tip mit dem ich weiterkomme?

gruss hendrik

  1. Hallo,

    habe folgendes problem. im FF, Konqueror, Safarie funzt die horizontale darstellung von bilderreihen, im IE und Opera nicht.

    Meintest du vertikal? Zumindest die Beispielseite läßt das vermuten.

    Nun versuche ich das ganze ohne tabelle zu lösen und komme nicht weiter.

    Eine Liste wie z.B. hier bei der Navigation oder (ggf. noch mit float) den
    Vorschaubildern ist eine wohl übliche Möglichkeit.

    Falls bei deinem Code die Angabe einer stimmigen Breite für das die Bilder
    umschließende Div nicht ausreicht, könnte es an den Bildeigenschaften liegen.
    Diese lassen sich vielleicht entsprechend beeinflussen, also evtl. (hier kein)
    float, display, oder vielleicht d. Verzicht auf störende Attribute im HTMl-Code
    wie align="left".

    Grüsse

    Cyx23

    1. hi,
      latürnich vertikal, sorrx
      zu den Bildern diese sind 364 x 512 bzw. 512x364px breite des rahmens 550px.

      es geht um vorschau und präsentation.
      mit listen verschiedener art, absätzen, breaks funzt es auch nicht zumindestens im opera nicht.
      kann ie nicht testen da ich ein linux basierendes sys nutze.
      hier mal die css.

      --------------------------------------------
      /*Datei: socken-body.css*/

      body {
          font-size: 12px;
          font-family: sans-serif;
          color: black;
          background-color: inherit;
          text-align: left;
          text-indent: 0px;
          max-width : 800px;
          padding-left: 24px;
          padding-bottom : 15px;
        }

      h1 {
          color: #8a8d9a;
          background-color: inherit;
        }

      h2 {
          color: #8a8d9a;
          background-color: inherit;
        }

      h3 {
          color: #8a8d9a;
          background-color: inherit;
        }

      h4 {
          color: #8a8d9a;
          background-color: inherit;
        }

      h5 {
          color: #8a8d9a;
          background-color: inherit;
        }

      a:link {
          text-decoration: none;
          color: #6F6F6F;
          background-color: inherit;
          border: 0;
        }

      a:visited {
          text-decoration: none;
          color: #6F6F6F;
          background-color: inherit;
          border: 0;
        }

      a:active {
          text-decoration: none;
          color: #6F6F6F;
          background-color: inherit;
          border: 0;
        }

      a:hover {
          color: #000000;
          background: inherit;
          text-decoration: none;
          border: 0;
        }

      div.boddyimg {
          border: 0;
          background: inherit;
          border-color: inherit;
          text-decoration: none;
          color: white;
        }

      div.boddyimg a:link {
          text-decoration: none;
          color: white;
          background-color: inherit;
          border-style: none;
        }

      div.boddyimg a:visited {
          text-decoration: none;
          color: white;
          background-color: inherit;
          border-style: none;
        }

      div.boddyimg a:active {
          text-decoration: none;
          color: white;
          background-color: inherit;
          border-style: none;
        }

      div.boddyimg h1 {
          color: inherit;
          background-color: inherit;
          border-style: none;
        }

      /* navigation */

      div.pinmenu {
          text-align: left;
          top: 7em;
          float: left;
          position: fixed;
          font-size: 12px;
          margin-left: 0.5em;
          margin-right: 2em;
          width: 16em;
          left: 0;
          padding: 0em 0.5em 1.2em 0.2em;
          background : inherit;
          color: inherit;
        }

      /*die txtseiten*/

      div.text {
          top: 3em;
          left: 256px;
          position: absolute;
          background-color: inherit;
          color: inherit;
          font-size: 12px;
          font-family: sans-serif;
          margin-left: 1em;
          padding-bottom: 5em;
          min-width: 37em;
          width: 550px;
        }

      /*  hier die Bilder -->> hier liegt das problem so vermute ich */

      div.picture {
          background-color : inherit;
          color : inherit;
          margin-left : 18em;
          overflow : auto;
          padding-bottom : 5em;
          position : absolute;
          top : 3em;
          width : 550px;
        }

      ---------------------------------------------------------------------------

      div.picture ist für die darstellung verantwortlich, und ich hätte die bilder gerne untereinander.

      Habe die Boxen auch mal farbig gemacht um zu sehen wie diese liegen und die bilder passen hinnein, anscheinend akzeptiert ie gewissen grenzen nicht so wie dessen erfinder!

      gruss hendrik

      1. Hallo,

        anscheinend akzeptiert ie gewissen grenzen nicht so wie dessen erfinder!

        Ursache und Möglichkeiten hatte ich schon gepostet.

        Falls du den HTML-Code nicht ändern kannst geht zur Not ein img{float:none}
        im CSS, besser wäre es aber wirklich den HTML-Code zu modernisieren und ggf.
        auch gleich auf die meisten inline-Styles zu verzichten.

        Grüsse

        Cyx23

        1. Hallo,

          hallo ebenso

          anscheinend akzeptiert ie gewissen grenzen nicht so wie dessen erfinder!

          Ursache und Möglichkeiten hatte ich schon gepostet.

          tja lesen sollte ich schon richtig, sorry. Mit dem align="left" hast Du recht dat wars, thx :)

          Falls du den HTML-Code nicht ändern kannst geht zur Not ein img{float:none}
          im CSS, besser wäre es aber wirklich den HTML-Code zu modernisieren und ggf.
          auch gleich auf die meisten inline-Styles zu verzichten.

          mit den inline styles meins Du alles was im html-tag steht oder?
          Ist halt ne menge arbeit den html-code zu bearbeiten, wird mich locker nen halben bis ganzen tag beanspruchen. werde es mit float versuchen, mir aber die gesamte seite zurück auf meinen rechner spiegeln und durchforsten. Ist halt die zweite HP die ich zusammen bastele, da ist halt noch viel try and error dabei.
          vielen dank für die wertvollen hinweise .

          gruss hendrik