Pierre: Gleichhohe Hintergründe, marginproblem in IE

Hallo

versuche mich grade am Tabellenlosen Design und stolpere noch über die hoffentlich letzten Klippen.
Am einfachsten ist's wenn ich euch mal die Links zu der Seite und zum css hier poste.

http://www.typohouse.ch/css-test/test.html
http://www.typohouse.ch/css-test/test.css

Ich habe zwei Probleme, die ich einfach nicht gebacken kriege.

Das Erste ist ganz allgemein. Hab ich auf den aktuellen Browsern net geschafft. Und zwar sollen die drei Spalten "Server ready" die Inhaltsspalte und die Bildspalte alle gleich hoch werden, sich also an der jeweils höchsten Spalte orientieren und dann den Hintergrund bis an den unteren Rand auffüllen. (Dazu hab ich einen Screenshot wie's richtig aussehen sollte, als untersten Artikel eingefügt.) Ebenso sollte das Bild sich immer am unteren Rand ausrichten.

Das zweite Problem hat ich nur in IE unter Windows. Und zwar wird mir dort der linke und rechte Einzug von 30 Pixeln aus irgendeinen Grund verdoppelt.

Würd mich sehr über eure Hilfe freuen, damit ich diese Unschönheiten noch ausmerzen kann.

Herzlichen Dank
Pierre

  1. Hi,

    Das Erste ist ganz allgemein. Hab ich auf den aktuellen Browsern net geschafft. Und zwar sollen die drei Spalten "Server ready" die Inhaltsspalte und die Bildspalte alle gleich hoch werden, sich also an der jeweils höchsten Spalte orientieren und dann den Hintergrund bis an den unteren Rand auffüllen.

    Du willst Dich von Tabellen lösen und denkst immer noch in Spalten. Fällt Dir der Widerspruch nicht auf?
    Was Du versuchst, ist in CSS nicht vorgesehen - hierfür gibt es Tabellen. Du brauchst das auch gar nicht. Die linke Box steht so doch ganz gut für sich alleingenommen dar. Wenn Du nun das Bild in den Textcontainer setzt und flaten läßt, hast Du hier auch einen einheitlichen Hintergrund.

    Das zweite Problem hat ich nur in IE unter Windows. Und zwar wird mir dort der linke und rechte Einzug von 30 Pixeln aus irgendeinen Grund verdoppelt.

    Das ist ein bekannter Bug. Entweder Du setzt weitere eigentlch überflüssige DIVs ein oder gibst dem IE über eine Browserweiche die falschen Werte, die er halt braucht.

    freundliche Grüße
    Ingo

    1. Hallo, danke mal für deinen Input.

      Hi,

      Du willst Dich von Tabellen lösen und denkst immer noch in Spalten. Fällt Dir der Widerspruch nicht auf?

      Nicht so richtig. Das Dokument ist doch ziemlich strukturiert. Es kommen verschiedene Artikel die in der horizontalen aufgelistet werden. Links Schlagworte, daneben der Inhalt und rechts das Bild. Danach folgt der nächste Artikel. Was ist da nicht css-like im Aufbau?

      Was Du versuchst, ist in CSS nicht vorgesehen - hierfür gibt es Tabellen. Du brauchst das auch gar nicht. Die linke Box steht so doch ganz gut für sich alleingenommen dar. Wenn Du nun das Bild in den Textcontainer setzt und flaten läßt, hast Du hier auch einen einheitlichen Hintergrund.

      Das ist mehr der wegen der Optik. Schau dir mal eine Seite mit mehreren Artikeln untereinander an. Wenn jeder Artikel wie auf der Musterseite der unterste die gleiche Höhe hat, wirkt die Seite ruhig und übersichtlich, wenn die linke Box und die Text/Bildspalte jedesmal unterschiedliche Höhen haben, wirds extrem unruhig und unübersichtlich.
      Das ich das Bild noch besser in den Textcontainer einbauen kann möcht ich mal versuchen, habs bis jetzt aber noch nicht geschafft.

      Das zweite Problem hat ich nur in IE unter Windows. Und zwar wird mir dort der linke und rechte Einzug von 30 Pixeln aus irgendeinen Grund verdoppelt.
      Das ist ein bekannter Bug. Entweder Du setzt weitere eigentlch überflüssige DIVs ein oder gibst dem IE über eine Browserweiche die falschen Werte, die er halt braucht.

      Da bin ich unterdessen auch auf die Lösung des Problems gestossen. Ist hier (http://www.positioniseverything.net/explorer/doubled-margin.html) ganz gut beschrieben.

      Vielleicht hat doch noch jemand einen Tipp, wie man zwei Flotingboxen nebeneinander mit dem Hintergrundfarbton auf die gleiche Höhe bringt? Hab das auch schon wo gesehen, find aber einfach die Resource dazu nimmer.

      Dank
      Pierre

      1. Hi,

        Wenn jeder Artikel wie auf der Musterseite der unterste die gleiche Höhe hat, wirkt die Seite ruhig und übersichtlich, wenn die linke Box und die Text/Bildspalte jedesmal unterschiedliche Höhen haben, wirds extrem unruhig und unübersichtlich.

        schon klar. Aber "Spalten", deren "Zellen" sich in der Höhe gegenseitig beeinflussen, sind nunmal in CSS nicht vorgesehen. Du kannst doch aber verschiedene Wege gehen, um die einzelnen Einheiten abzugrenzen, z.B. Trennlinien verwenden oder um jeden Bereich ein DIV setzen und diesem eine Hintergrundfarbe geben.

        freundliche Grüße
        Ingo