matthias konzelmann: Browser Problem

ich will einen Balken, der sich aus 3 teilen zusammensetzt ( linker rand, mitte, rechter rabd ) in einer tabelle darstellen. die mittlere spalte soll 80% der gesamt tabellenbreite erlangen. Folgenden Code habe ich erstellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="Content-Language" content="de" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>
  </title>
 </head>
 <body>
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
   <tr>
    <td>
     <img src="http://supermattze.dyndns.org/bigband/main/pics/linielinks.gif" height="8" width="4" align="right" alt="linie" />
    </td>
    <td width="80%">
     <img src="http://supermattze.dyndns.org/bigband/main/pics/linie.gif" height="8" width="100%" alt="linie" align="middle" />
    </td>
    <td>
     <img src="http://supermattze.dyndns.org/bigband/main/pics/linierechts.gif" height="8" width="4" align="left" alt="linie" />
    </td>
   </tr>
  </table>
 </body>
</html>

ist laut w3c 100 valide.

Problem: im IE funktionierts. Im Mozilla FireFox siehts so aus:
http://supermattze.dyndns.org/mozilla.gif

wie schaffe ich es das die 3 grafiken auf gleicher höhe angezeigt werden?

  1. Hallo!

    In CSS gibt es "vertical align": http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

    Gruß

    Matthias

    --
    ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
    http://www.makaio.de/quotations
    1. Hallo!

      In CSS gibt es "vertical align": http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

      Gruß

      Matthias

      jetzt ist im IE der linke Zipfel nicht mehr nach rechts ausgerichtet.
      Im Mozilla immernoch das gleiche Problem.
      hier mein quelltext:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
       <head>
        <style type="text/css">
         .oben    { vertical-align:top; background-color:#CCCCCC; }
         .mittig  { vertical-align:middle; background-color:#DDDDDD; }
         .unten   { vertical-align:bottom; background-color:#EEEEEE; }
        </style>
        <meta http-equiv="Content-Language" content="de" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>
        </title>
       </head>
       <body>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
          <td>
           <img src="http://supermattze.dyndns.org/bigband/main/pics/linielinks.gif" height="8" width="4" align="right" alt="linie" class="mittig" />
          </td>
          <td width="80%">
           <img src="http://supermattze.dyndns.org/bigband/main/pics/linie.gif" height="8" width="100%" alt="linie" align="middle" class="mittig" />
          </td>
          <td>
           <img src="http://supermattze.dyndns.org/bigband/main/pics/linierechts.gif" height="8" width="4" align="left" alt="linie" class="mittig" />
          </td>
         </tr>
        </table>
       </body>
      </html>

      kann mir jemand weiterhelfen?

      Mattze

      1. Hallo!

        So geht's:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
         <head>
          <meta http-equiv="Content-Language" content="de" />
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <style type="text/css">
        <!--
        td {vertical-align:top; height: 8px}
        .klein {width: 4px}
        .gross {background-image: url("http://supermattze.dyndns.org/bigband/main/pics/linie.gif"); background-repeat: repeat-x}
        .links {background-image: url("http://supermattze.dyndns.org/bigband/main/pics/linielinks.gif"); background-repeat: repeat-x }
        .rechts {background-image: url("http://supermattze.dyndns.org/bigband/main/pics/linierechts.gif"); background-repeat: repeat-x }
        -->
        </style>
          <title>
          </title>
         </head>
         <body>
          <table width="100%" cellpadding="0" cellspacing="0" border="0">
           <tr>
            <td class="klein links">
             &nbsp;
            </td>
            <td class="gross">
                &nbsp;
            </td>
            <td class="klein rechts">
             &nbsp;
            </td>
           </tr>
          </table>
         </body>
        </html>

        Wieso das Bild im mittleren <img>-Tag über die gesamte Zellenbreite wiederholt wurde ist mir aber immer noch nicht klar.

        Gruß

        Matthias

        --
        ss:| zu:| ls:[ fo:| de:] va:) ch:? sh:) n4:( rl:( br:> js:| ie:% fl:) mo:}
        http://www.makaio.de/quotations
        1. Wieso das Bild im mittleren <img>-Tag über die gesamte Zellenbreite wiederholt wurde ist mir aber immer noch nicht klar.

          das wird eine linie die die länge einer bestimmten zeile ( die darüber ) annehmen soll.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <table width="100%" cellpadding="0" cellspacing="0" border="0">

    Autsch.
    Glaub nicht, dass es die Attribute in der Strict-Version gibt.

    Also entweder drauf verzichten und das mit CSS realisieren (1.Wahl) oder Transitional angeben.
    Gunnar

    --
    "(Der Student) kann sich so völlig dem hingeben, was er naiv für die Computerwissenschaft hält, also der bloßen Verfeinerung seiner Programmiertechniken, daß er sich auf diese Weise effektiv daran hindert, etwas wirklich Wesentliches zu studieren."
    (Joseph Weizenbaum in "Die Macht der Computer und die Ohnmacht der Vernunft")
    1. Hi,

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      ...

      Glaub nicht, dass es die Attribute in der Strict-Version gibt.

      btw: ist Strict auf diese Weise überhaupt gültig angegeben?

      freundliche Grüße
      Ingo

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        btw: ist Strict auf diese Weise überhaupt gültig angegeben?

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        Gruß,
        Gunnar

        --
        "(Der Student) kann sich so völlig dem hingeben, was er naiv für die Computerwissenschaft hält, also der bloßen Verfeinerung seiner Programmiertechniken, daß er sich auf diese Weise effektiv daran hindert, etwas wirklich Wesentliches zu studieren."
        (Joseph Weizenbaum in "Die Macht der Computer und die Ohnmacht der Vernunft")
        1. Hi,

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          btw: ist Strict auf diese Weise überhaupt gültig angegeben?

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          heißt das jetzt Nein?

          freundliche Grüße
          Ingo

          1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            btw: ist Strict auf diese Weise überhaupt gültig angegeben?

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            heißt das jetzt Nein?

            Ingo,
            ich denke ja.
            Gunnar

            --
            "(Der Student) kann sich so völlig dem hingeben, was er naiv für die Computerwissenschaft hält, also der bloßen Verfeinerung seiner Programmiertechniken, daß er sich auf diese Weise effektiv daran hindert, etwas wirklich Wesentliches zu studieren."
            (Joseph Weizenbaum in "Die Macht der Computer und die Ohnmacht der Vernunft")
    2. Hi,

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
      Autsch.
      Glaub nicht, dass es die Attribute in der Strict-Version gibt.

      Das ist keine Glaubensfrage. Ein kurzer Blick in die DTD (URL steht ja schon da - jetzt sogar verlinkt) hätte genügt, um

      <!ATTLIST table
        %attrs;
        summary     %Text;         #IMPLIED
        width       %Length;       #IMPLIED
        border      %Pixels;       #IMPLIED
        frame       %TFrame;       #IMPLIED
        rules       %TRules;       #IMPLIED
        cellspacing %Length;       #IMPLIED
        cellpadding %Length;       #IMPLIED
        >

      vorzufinden. Alle 4 verwendeten Attribute sind erlaubt.

      cu,
      Andreas

      --
      MudGuard? Siehe http://www.Mud-Guard.de/
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Glaub nicht, dass es die Attribute in der Strict-Version gibt.

        Das ist keine Glaubensfrage. Ein kurzer Blick in die DTD ... hätte genügt ... Alle 4 verwendeten Attribute sind erlaubt.

        Andreas,
        Hast mal wieder Recht. Aber was haben die da zu suchen?

        Ich glaube, dass es die Attribute in der Strict-Version nicht geben sollte.

        Die haben doch nur mit der Darstellung zu tun. War das W3C beim Ausmisten nicht konsequent genug?

        Gruß,
        Gunnar

        --
        "(Der Student) kann sich so völlig dem hingeben, was er naiv für die Computerwissenschaft hält, also der bloßen Verfeinerung seiner Programmiertechniken, daß er sich auf diese Weise effektiv daran hindert, etwas wirklich Wesentliches zu studieren."
        (Joseph Weizenbaum in "Die Macht der Computer und die Ohnmacht der Vernunft")