nance: Probleme im Opera

Hallo!

Ich vermute ein schwerwiegenderes Problem dahinter, als es den Anschein hat. Ich habe eine Tabelle, in deren Tabellenkopf Formulare zwecks Neusortierung liegen. Diese Formulare bestehen nur aus Absendebuttons. Im Opera (7.54) stehen diese Buttons aber nach oben aus dem Formular heraus. Da die Buttons zum Teil Schrift und Bild enthalten habe ich ein div reingelegt, das ich nicht auf die gesamte Breite ausdehnen kann, um dann den Inhalt zu zentrieren. In IE, und Mozilla funktioniert es so, wie ich es gern hätte.

Der Code schaut folgendermaßen aus:
[code lang = css]
.tabelle {
  width: 99%;
  margin: 0px;
  padding: 0px;
  font-size: 1em;
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  border-spacing: 5px;
  empty-cells: show;
}
.tabelle td, .tabelle th {
  border-width: 1px;
}
.tabelle th {
  border-style: solid;
}
.tabelle td {
  border-style: none solid;
}
.tabellenkopf button, .tabellenkopf div {
  width: 100%;
  border-style: none;
  border-width: 0px;
}
.tabellenkopf button, .tabellenkopf {
  font-size: 1em;
  vertical-align: middle;
  text-align: center;
}
[/code]

[code lang = html]
    <tr>
      <th class="tabellenkopf" style="border: solid 1px blue;">
        <form name="sortieren" style="border: solid 1px red;" method="get" action="{../Link}">
          <button name="{Name}" type="submit" value="2">
            <div>
              Name
              <br/>
              <img src="../gemein/pic/1.png" alt="aufsteigend" height="9" width="9" border="0"/>
            </div>
          </button>
        </form>
      </th>
      <th class="tabellenkopf" style="border: solid 1px blue;">
        <form name="sortieren" style="border: solid 1px red;" method="get" action="{../Link}">
          <button name="{Name}" type="submit" value="1">
            <div>
              Nachname
            </div>
          </button>
        </form>
      </th>
    </tr>
[/code]

Falls jemandem was auffällt: Ich bin für jeden Hinweis dankbar.

Gruß
nance

  1. Hallo,

    Wieso ist .tabelle nicht width:100% ? Außerdem vermisse ich dort ein position:absolute.

    Mit freundlichen Grüßen,
    Klaus Weingart

    1. Hallo Klaus,

      Wieso ist .tabelle nicht width:100% ? Außerdem vermisse ich dort ein position:absolute.

      [code lang = css]width: 100%[/code] sprengt das Layout im IE. [code lang = css]position: absolute[/code] bringt leider auch nichts.

      gruß
      nance

      1. Hallo Klaus,

        Wieso ist .tabelle nicht width:100% ? Außerdem vermisse ich dort ein position:absolute.
        width: 100% sprengt das Layout im IE. position: absolute bringt leider auch nichts.

        Aber nur wenn du padding, margin, border > 0 hast. Nimm ein div mit width:100; und darin dann ein div mit padding irgendwas.

        1. Hi!

          Aber nur wenn du padding, margin, border > 0 hast. Nimm ein div mit width:100; und darin dann ein div mit padding irgendwas.

          Das ist aber eine Tabelle, der man das auch ansieht - der Rahmen muss also bleiben. Da verzichte ich lieber auf die zwei divs und behalte meine width:99%;. Bei meinem eigentlichen Problem hilft mir das glaub ich auch nicht weiter

          gruß
          nance

  2. Ich habe eine Tabelle, in deren Tabellenkopf Formulare zwecks Neusortierung liegen. Diese Formulare bestehen nur aus Absendebuttons.

    Warum machst Du da überhaupt ein Formular, wenn Du gar kein Formular hast. Spar Dir die mehreren verschachtelten Block-Elemente und mach einfach einen Link da rein.
    Ich würde immer erst überflüssigen Ballast entfernen und grundsolides HTML mit sinnvoller Semantik zugrundelegen, bevor ich nach Darstellungsproblemen suche.

    Ach ja, weil ich weiß, was für eine Frage kommt...wenn Du unbedingt Buttons willst, dann formatierst Du Dir Deine Links so, dass sie aussehen wie ein Button. Mittels :hover bekommst Du auch den Effekt beim anklicken hin (border: inset/outset).

    1. Hallo Efchen!

      Warum machst Du da überhaupt ein Formular, wenn Du gar kein Formular hast. Spar Dir die mehreren verschachtelten Block-Elemente und mach einfach einen Link da rein.

      Wie schon gesagt, besteht der Button zum Teil aus Schrift und Bild. Das größere Problem ist aber, dass der anklickbare Bereich durch einen Link stark eingeschränkt wird. Zumindest habe ich dafür noch keine Abhilfe schaffen können.
      Trotzdem vielen Dank.

      gruß
      nance

      1. Wie schon gesagt, besteht der Button zum Teil aus Schrift und Bild.

        Das könnte man mit einem Hintergrundbild erreichen.

        Das größere Problem ist aber, dass der anklickbare Bereich durch einen Link stark eingeschränkt wird.

        Das sehe ich als gar kein Problem:

        Zumindest habe ich dafür noch keine Abhilfe schaffen können.

        Indem Du einfach Deinen Link mit display:block; formatierst und dann eine belibige Größe setzt. Andererseits würde u.U. auch schon padding reichen.

        Trotzdem vielen Dank.

        Gerne. Jederzeit wieder. Ich beantworte zwar nicht immer die Fragen direkt, glaube aber, meist gute Einwände parat zu haben, über die es sich lohnt nachzudenken. :-)

        1. Hallo!

          Das könnte man mit einem Hintergrundbild erreichen.

          Nee, die müssen hintereinander. Da hab ich mich wohl n bisschen falsch ausgedrückt.

          Indem Du einfach Deinen Link mit display:block; formatierst und dann eine belibige Größe setzt. Andererseits würde u.U. auch schon padding reichen.

          Ich habs mit display und margin gemacht

          Gerne. Jederzeit wieder. Ich beantworte zwar nicht immer die Fragen direkt, glaube aber, meist gute Einwände parat zu haben, über die es sich lohnt nachzudenken. :-)

          Ich hab drüber nachgedacht - nur ganz kurz - und mich hingesetzt und das alles ein klein wenig geändert. Jetzt ist es so, wie ich es haben wollte, um einiges einfacher, als ich gedacht habe, und sieht auch richtig schnieke aus.

          Also vielen Dank.

          Die besten Grüße
          nance