Darstellungsproblem von Buttons im Safari

[Michi]

Hi zusammen,

beim Testen in verschiedenen Browsern ergab sich, dass die Buttons auf meiner Seite in den Browsern Firefox und Internet Explorer wie gewünscht dargestellt werden, im Safari (Mac) jedoch nicht. Dieser stellt sie in der Breite sehr gequetscht dar.

1. Frage: Ist es bekannt, dass dieser Browser so seine persönlichen Darstellungsprobleme hat, nachdem es mit den großen Standardbrowsern ja wunderbar klappt?

2. Gibt es eine Möglichkeit, den Code doch so zu schreiben, dass auch Safari was damit anfangen und ihn wie die anderen genannten darstellen kann?

Hier der Code-Ausschnitt:

______________________________________________________________

// den Pool mit den ganzen Abfragen aufbauen
echo "<table border="0" width="100%" style="margin:0px; border:0px; padding-right:5px;" cellpadding="0" cellspacing="0"><tr><td>"; // Tabelle um Form
echo "<form action="nach_daten_in_pool_suchen.php" method="post" style="margin:2px;">";
if ( isset ($para) )
  echo "<input type="hidden" name="para" value="". $para . "">";
echo "<table border="0" width="100%" style="margin:0px; border:0px;" cellpadding="0" cellspacing="0"><tr>";
echo "<td width="100%">";
pool_aufbauen ();
echo "</td><td width="100%">";
echo "<input type="submit" name="suchen" value="suchen" style="width:100%"><br>";
echo "<input type="submit" name="kriterium_loeschen" value="Kriterium&nbsp;l&ouml;schen" style="width:100%"><br>";
echo "<input type="submit" name="pool_loeschen" value="Pool&nbsp;l&ouml;schen" style="width:100%">";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</form>  ";
echo "</td></tr></table>"; // Ende Tabelle um Form

______________________________________________________________

(Hab das mal bisschen platzsparend zusammengezogen.)

Es geht eben um die drei Buttons "suchen", "Kriterium löschen" und "Pool löschen". Im Safari werden diese extrem gequetscht dargestellt und dass es sich um Buttons handelt, kann man vielleicht vermuten, was drauf steht, jedoch nicht. ;)
Wie müssen die Tabelle, die Zelle und die Buttons definiert (CSS bzw. width-Tag) werden, damit man auch im Safari was erkennt? :)

MfG
Michi

[Elya]

Hallo Michi,

Hier der Code-Ausschnitt:

______________________________________________________________

// den Pool mit den ganzen Abfragen aufbauen
echo "<table border="0" width="100%" style="margin:0px; border:0px; padding-right:5px;" cellpadding="0" cellspacing="0"><tr><td>"; // Tabelle um Form

Sei doch bitte so gut und gib uns den Code, der beim Browser ankommt - nur der ist relevant für die Darstellung. PHP hilft uns hier nicht weiter.

Gruß aus Köln-Ehrenfeld,

Elya

[Michi]

Hallo, der reine HTML-Code:
________________________________________________________________

<table border="0" width="100%" style="margin:0px; border:0px; padding-right:5px;" cellpadding="0" cellspacing="0">
<tr>
  <td>
   <form action="nach_daten_in_pool_suchen.php" method="post" style="margin:2px;">
   <table border="0" width="100%" style="margin:0px; border:0px;" cellpadding="0" cellspacing="0">
    <tr>
     <td width="100%">
      <select name="pool" class="Bereich" size="4">
      <option value="1">&nbsp;</option>
      </select>
     </td>
     <td width="100%">
      <input type="submit" name="suchen" value="suchen" style="width:100%"><br>
      <input type="submit" name="kriterium_loeschen" value="Kriterium&nbsp;l&ouml;schen" style="width:100%"><br>
      <input type="submit" name="pool_loeschen" value="Pool&nbsp;l&ouml;schen" style="width:100%">
     </td>
    </tr>
   </table>
   </form>
  </td>
</tr>
</table>
_______________________________________________________________

Ciao!
Michi

[Cyx23]

Hallo Michi,

Vererbung von Grössen und Bezug auf 100% ist m.E. immer noch ein Risiko,
zumal mit form-Tags.

Bei deinem Code scheint das Problem aber schon dann vermeidbar wenn
der letzte Button keine entspr. Styleangabe erhält:

<input type="submit" name="pool_loeschen" value="Pool&nbsp;l&ouml;schen">

Grüsse

Cyx23

[Gernot Back]

Hallo Cyx23,

Bei deinem Code scheint das Problem aber schon dann vermeidbar wenn
der letzte Button keine entspr. Styleangabe erhält:

<input type="submit" name="pool_loeschen" value="Pool&nbsp;l&ouml;schen">

Das hilft dann auch gegen das offensichtlich identische Problem bei Opera 7.54 am PC. Das ist ja seltsam.

Ich hatte mit min-width experimentiert, was auch Effekte zeigte, aber letztlich wahrscheinlich mit zusätzlich erforderlichen Angaben und Workarounds für die anderen Browser komplizierter wäre.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

<input type="submit" name="pool_loeschen" value="Pool&nbsp;l&ouml;schen">

Es geht wohl doch nicht ohne Fummelei, denn jetzt hat Michi ein Problem mit Mozilla, wo der Button nicht mehr bündig auf 100% der Weite der übrigen gestreckt wird.

Gruß Gernot

[at]

Hallo.

Es geht wohl doch nicht ohne Fummelei, denn jetzt hat Michi ein Problem mit Mozilla, wo der Button nicht mehr bündig auf 100% der Weite der übrigen gestreckt wird.

Die Fummelei hat bei mir die Form width: 100%; max-width: 100%;. Vielleicht hilft es ja auch hier.
MfG, at

[Michi]

Hallo.

Es geht wohl doch nicht ohne Fummelei, denn jetzt hat Michi ein Problem mit Mozilla, wo der Button nicht mehr bündig auf 100% der Weite der übrigen gestreckt wird.

Die Fummelei hat bei mir die Form width: 100%; max-width: 100%;. Vielleicht hilft es ja auch hier.
MfG, at

Hi at,

Habs vor paar Tagen auf die Schnelle mal gelöst, indem ich die beiden Zellen (Form links, Buttons rechts) im Breitenverhältnis (z.B. 85:15) formatiert habe. Nimmt zwar ein wenig Flexibilität, aber schaut dennoch fast perfekt aus.

Werde Deinen Tip mit "max-width" aber auch ausprobieren.

Danke!
Michi

[Gernot Back]

Hallo Michi,

<tr>
     <td width="100%">

Fehler ist  ^^^^hier^^^^

<select name="pool" class="Bereich" size="4">

Wenn du die Tabellenzelle, die deinen Buttons vorausgeht, auf 100% ausdehnst, brauchst du dich nicht zu wundern, wenn sie die Nachbarzelle mit den Buttons zusammenstaucht.

Gruß Gernot

[Cyx23]

Hallo Gernot,

Wenn du die Tabellenzelle, die deinen Buttons vorausgeht, auf 100% ausdehnst, brauchst du dich nicht zu wundern, wenn sie die Nachbarzelle mit den Buttons zusammenstaucht.

wobei aber ja gerade die übliche Flexibilität solcher Tabellenkonstrukte
oft erwünscht ist, einfachstes Beispiel die Probleme mit min-width,
max-width beim meistgenutzten Browser, oder die Schwierigkeiten per
CSS irgendwas flexibel an Bildschirmunterkante _und_ Seitenende zu
positionieren.

Grüsse

Cyx23

[Gernot Back]

Hallo Cyx23, hallo Michi

Wenn du die Tabellenzelle, die deinen Buttons vorausgeht, auf 100% ausdehnst, brauchst du dich nicht zu wundern, wenn sie die Nachbarzelle mit den Buttons zusammenstaucht.

wobei aber ja gerade die übliche Flexibilität solcher Tabellenkonstrukte
oft erwünscht ist, einfachstes Beispiel die Probleme mit min-width,
max-width beim meistgenutzten Browser, oder die Schwierigkeiten per
CSS irgendwas flexibel an Bildschirmunterkante _und_ Seitenende zu
positionieren.

Ich würde dir, Michi dann aber empfehlen, dass du zumindest für die Nachbarzelle nicht auch noch eine prozentuale Angabe vorsiehst. Zumal wenn zwei Zellen mit je 100% Weite nebeneinander liegen, müssen die Browser diesen per se unlösbaren Konflikt nach eigenem Gutdünken entscheiden. Durch die gleichberechtigte Prozentangabe in beiden Zellen erhalten sie auch keinen Hinweis, welche Zelle zu bevorzugen ist.

width:100% in der linken Tabellenzelle width:Xem in der rechten (je nach Schriftart und Größe in "em", die für die Buttons gewählt wird), das Ganze  innerhalb einer einzigen Tabelle, deren Weite auf 100% gesetzt ist (da braucht es auch keine Tabellenschachtelung mehr); für diesen Konfliktfall haben die von mir unter Win 98 getesteten Browser Mozilla 1.7.2, Opera 7.54 und IE6 einheitliche Prioritäten.

Wie es allerdings am Safari aussieht, kann ich nicht testen.

Gruß Gernot