Browsererkennung und das Boxenlayout

[alfred]

Hi liebe Selfhtml-Komunity

Ich habe ein kleines Problem und weiß einfach nicht mehr weiter auch das Nachschlagen bei selfhtml oder google habe mir da keine neuen Erkenntniss gebracht.

Ich arbeite ehrenamtlich an einer Seite die Contrexx als MS benutzt. Dort ist mir aufgefallen das der Suchenbutton beim IE an ner anderen Stelle hängt als beim Firefox. Beim nachlesen stellte ich fest das sich da wohl nicht jeder Browser an den Standard hält. Also habe ich in Javascript den Browser abgefragt und wollte dann in einer if() else() Anweisung die entsprechenden Pixelangaben machen. leider scheint der Browser das nicht zu interpretieren. Kann mir jemand sagen was ich falsch gemacht habe? Ist evtuell die Stelle an der es steht falsch? Habe schon einige Stellen ausprobiert.

Ich habe das bisschen Javascript mal unten mit hingeschrieben.

gruß alfred
und vielen dank für hilfreiche Tips

<script type="text/javascript">
          v = navigator.appName;
          <!-- wenn Internet Explorer, dann -->
          if (v == 'Microsoft Internet Explorer')
          {
            <style type="text/css">
        margin-top:84px;
                margin-left:0px;
                border:0px;
            </style>
          }
          <!-- wenn alle anderen Browser, dann wie im Standard steht verfahren -->
          else
          {
            <style type="text/css">
                margin-top:44px;
                margin-left:2px;
                border:0px;
            </style>
          }
  </script>

[Der Martin]

Hallo Alfred,

Also habe ich in Javascript den Browser abgefragt und wollte dann in einer if() else() Anweisung die entsprechenden Pixelangaben machen.

der Ansatz ist aus zwei Gründen schlecht, die Umsetzung noch dazu fehlerhaft.
Also, warum ist das Unsinn, was du machen möchtest?

Erstens ist das Problem, das du angehen möchtest, ein Darstellungsproblem, hat also mit CSS zu tun, nicht mit Javascript. Daher sollte man es auch im CSS angehen und nicht mit einer anderen Technik auszubügeln versuchen.

Zweitens kann Javascript jederzeit deaktiviert sein, damit würde deine Korrektur -wenn sie denn richtig wäre- gar nicht wirksam werden.

leider scheint der Browser das nicht zu interpretieren.

Richtig, er müsste dich mit Fehlermeldungen regelrecht niederbrüllen.

<script type="text/javascript">
    v = navigator.appName;

Gefährlich irreführend: Du fragst den Namen des Browsers ab, nichts seine Fähigkeiten. Was, wenn jemand den Browsernamen zum Spaß in "Internet Exploder" umkonfiguriert hat? Oder ihn, wie ich, komplett umbenannt hat?
In deinem Fall ist das, wie schon erwähnt, eh nicht der optimale Ansatz. Aber wenn ich Unterschiede in der Javascript-Implementierung berücksichtigen möchte, dann frage ich doch nicht den Browsernamen ab, sondern das Vorhandensein bestimmter Methoden oder Eigenschaften, die ich nutzen möchte.

if (v == 'Microsoft Internet Explorer')
          {
            <style type="text/css">
        margin-top:84px;
                margin-left:0px;
                border:0px;
            </style>
          }

Das geht ja so *überhaupt nicht*. Du kannst nicht innerhalb eines Scripts plötzlich wieder HTML/CSS-Code notieren. Wenn schon, dann müsstest du diese Zeilen mit document.write() ausgeben.

else
          {
            <style type="text/css">
                margin-top:44px;
                margin-left:2px;
                border:0px;
            </style>
          }

Dasselbe in Grün. Und wie schon angedeutet: Wenn jemand Javascript deaktiviert hat, bekommt er keine der beiden CSS-Varianten!

So, nun zur Sache. ;-)
Als erstes würde ich mich fragen: Ist es wirklich so schlimm, wenn ein Button nicht in allen Browsern exakt an derselben Stelle sitzt? Je nach Fenstergröße und Schriftgröße tut er das möglicherweise sowieso nicht, aber das kann ich nicht genau sagen, ohne deinen Code zu kennen. Auf jeden Fall erkennt man an deinen CSS-Angaben, dass du ein pixelgenaues Layout versuchst, was nicht unbedingt empfehlenswert ist, gerade *weil* es so viele Fallstricke dabei gibt.
Am besten du gibst mal einen Link zu deiner Problemseite (ohne die Korrekturen), damit man sich das mal live ansehen kann. Dann sehen wir weiter. Die Lösung könnte in einer CSS-Weiche liegen; vielleicht kann man aber auch ein paar Styles so umdefinieren, dass alle Browser damit klarkommen und eine Unterscheidung gar nicht mehr nötig ist.

So long,
 Martin

[alfred]

Hi Martin

Am besten du gibst mal einen Link zu deiner Problemseite (ohne die Korrekturen), damit man sich das mal live ansehen kann. Dann sehen wir weiter.

http://www.bsk-agy.de/content/

Das Problemkind ist der Suchbutton mit dem Textfeld, der am unteren linken Rand der Grafik sein sollte.

Gruß Alfred

[Struppi]

http://www.bsk-agy.de/content/

Das Problemkind ist der Suchbutton mit dem Textfeld, der am unteren linken Rand der Grafik sein sollte.

Das Problem dürfte eher der  Quellcode an sich sein. Wenn der CSS Code ähnliche Qualitäten hat, solltest du lieber veruschen dieses Problem zu lösen, anstatt auf dieser Basis einen workaround zu finden.

Struppi.

[Alfred]

@Der Martin

Yo, und das ist nicht das einzige "Problemkind".
Als erstes fällt auf, dass du angeblich HTML schreibst, aber leere »» Tags mit '/>' schließt, wie es eigentlich in XHTML gedacht ist.
Entscheide dich doch bitte für eine Variante. Außerdem wimmelt
dein Quellcode von Fehlern, der Validator kann da ein Lied davon »» singen.

Als erstes das ist nicht mein Quellcode sondern der des Contrexx, das als CMS benutzt wird. Warum das Contrexx solche Dinge macht weiß ich nicht.

Nicht falsch, aber schlechter Stil ist außerdem, dass du einerseits CSS benutzt, andererseits aber noch jede Menge HTML-Attribute zur Formatierung verwendest.

Ich habe leider nicht alles, genauer fast nix, in den einstellungen gefunden. Deshalb ist viel von Hand verändert ...oO vielleicht nicht die beste Lösung.

So, nun zu dem, was du als Problemkind siehst.

<p class="search">
<form action="?section=search" method="post">
<input class="search" name="term" value="" maxlength="100" />
<input class="sbutton" value="Suchen" name="Submit" type="submit">
</form>
</p>

Auf die Formularelemente darin (Textfeld, Button) trifft folgender »» Selektor zu:

input,select,textarea {
    top:10px;
    right:10px;
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    COLOR: #000000;
    font-size: 12px;
    font-color: #000000;
   background-color: #d3d3d3;
}

Die Eigenschaften top und right haben keine Wirkung, weil die  Elemente weder absolut, noch relativ positioniert sind. Warum du alle
Rahmenlinien separat definierst, anstatt sie zusammenzufassen, wissen die Götter, und weiter ist nichts drin, was die Position der
Elemente festlegt. Sie werden also im regulären Textfluss angezeigt.

Dann haben wir noch den Selektor für die Klasse "search", der auf »» den umschließenden Absatz sowie auf das Textfeld zutrifft.
Allerdings ist er hochgradig fehlerhaft und muss daher komplett ignoriert werden:

.search {
<!-- Browser erkennen und Boxlayout anpassen -->
  <script type="text/javascript">
  [...]
  </script>
}

Weder HTML-Kommentare noch Javascript hat irgendwas in CSS verloren!

So, nachdem wir nun festgestellt haben, dass die Position des Suchformulars nirgends definiert ist, ergibt sie sich also aus dem umgebenden HTML-Code: Das Formular ist in einer Tabelle eingebettet, die zur Positionierung ebenfalls keine konkreten Angaben macht, also erscheint der Inhalt vertikal zentriert (Standardausrichtung für td).  Und genau da erscheinen die Felder bei mir auch sowohl im IE als auch  im Firefox: Ungefähr auf halber Höhe der Hintergrundgrafik.
Sollen sie unten stehen, solltest du der umgebenden Zelle vielleicht ein vertical-align spendieren. Das können die Browser alle ungefähr gleich gut, eine Unterscheidung wäre dann gar nicht mehr nötig. Toll, was?

Warum antwortest du mit so einem seltsamen unterton? Ich habe zwar um Hilfe gebeten aber ich lasse mich nicht so behandeln. du hast bestimmt schon davon gelesen das an vielen monitoren Menschen sitzen und keine Maschinen.

Aber unabhängig davon würde ich dir dringend empfehlen, wenigstens »» die Fehler im HTML zu beseitigen, vom CSS ganz zu schweigen. Über »» eine sinnvolle Strukturierung des Dokuments will ich mich auch gar »» nicht erst auslassen ...

Meinst du das das w3c vorschlägt alle schlüßelwörter in Großbuchstaben zu schreiben?

@Struppi

Das Problem dürfte eher der  Quellcode an sich sein. Wenn der CSS Code ähnliche Qualitäten hat, solltest du lieber veruschen dieses Problem zu lösen, anstatt auf dieser Basis einen workaround zu finden.

Darf man denn jetzt nicht mal mehr Fehler machen? Was ist hier los?

[Der Martin]

Hallo,

Entscheide dich doch bitte für eine Variante. Außerdem wimmelt dein Quellcode von Fehlern, der Validator kann da ein Lied davon singen.
Als erstes das ist nicht mein Quellcode sondern der des Contrexx, das als CMS benutzt wird. Warum das Contrexx solche Dinge macht weiß ich nicht.

ich auch nicht, aber du hast gefragt, du hast die Seite zur Diskussion gestellt, also musst du auch hinnehmen, dass sie inhaltlich und/oder technisch kritisiert wird. Inhaltlich hab ich sie mir gar nicht näher angesehen, das ist nicht mein Bier. Aber wenn die Seite schon technisch fehlerhaft ist, darf man sich über Darstellungsfehler in einzelnen Browsern nicht wundern.

Nicht falsch, aber schlechter Stil ist außerdem, dass du einerseits CSS benutzt, andererseits aber noch jede Menge HTML-Attribute zur Formatierung verwendest.
Ich habe leider nicht alles, genauer fast nix, in den einstellungen gefunden. Deshalb ist viel von Hand verändert ...oO vielleicht nicht die beste Lösung.

Das weiß ich nicht - vermutlich ist so eine Mischlösung (CMS und Feinschliff von Hand) wirklich keine gute Idee.

Warum antwortest du mit so einem seltsamen unterton? Ich habe zwar um Hilfe gebeten aber ich lasse mich nicht so behandeln. du hast bestimmt schon davon gelesen das an vielen monitoren Menschen sitzen und keine Maschinen.

Was für ein Unterton? Ich mache mir die Mühe, deinen Quellcode zu verstehen, ihn zu analysieren und dir die Probleme zu erklären. Warum machst du jetzt den Eindruck, als würde dich das beleidigen? Zumal ich dir nach mühevoller Kleinarbeit sogar eine gemessen an dem Chaos fast saubere Lösung auf dem Silbertablett präsentiert habe!

Aber unabhängig davon würde ich dir dringend empfehlen, wenigstens die Fehler im HTML zu beseitigen, vom CSS ganz zu schweigen. Über eine sinnvolle Strukturierung des Dokuments will ich mich auch gar nicht erst auslassen ...
Meinst du das das w3c vorschlägt alle schlüßelwörter in Großbuchstaben zu schreiben?

Um Himmels Willen, nein! Eher schon im Gegenteil. In XHTML *müssen* alle Tags und Attribute klein geschrieben werden, und auch in HTML ist das empfohlen - für die meisten Menschen ist der Quellcode dann sogar leichter lesbar. Aber das sind Nebensächlichkeiten, ebenso wie eine Formatierung durch Einrückungen.
Aber das meinte ich gar nicht, sondern einen sauber *strukturierten* HTML-Code, nicht so ein Tabellenmonster. Dabei habe ich allerdings vergessen, dass du den Code nicht von Hand schreibst, sondern über ein CMS generierst und daher wenig Einfluss darauf hast. Insofern ziehe ich den Vorwurf zurück - aber es bleibt dennoch eine Tatsache, dass das Ergebnis eher einem Geschwür als einem geordneten Organismus gleicht.

Das Problem dürfte eher der Quellcode an sich sein. Wenn der CSS Code ähnliche Qualitäten hat, solltest du lieber veruschen dieses Problem zu lösen, anstatt auf dieser Basis einen workaround zu finden.
Darf man denn jetzt nicht mal mehr Fehler machen? Was ist hier los?

Jeder macht Fehler! Anfänger etwas mehr, Fortgeschrittene etwas weniger. Aber wir möchten doch dazu beitragen, dass du diese Fehler erkennst und auch ausbessern kannst. HTML folgt nun einmal klaren Regeln, die der Quellcode deiner Seite mit Füßen tritt, auch wenn du selbst nicht schuld daran bist.

Schönen Abend noch,
 Martin

[Struppi]

@Struppi

Das Problem dürfte eher der  Quellcode an sich sein. Wenn der CSS Code ähnliche Qualitäten hat, solltest du lieber veruschen dieses Problem zu lösen, anstatt auf dieser Basis einen workaround zu finden.

Darf man denn jetzt nicht mal mehr Fehler machen? Was ist hier los?

Wenn du keinen Fehler machen würdest müßtest du ja nicht hier Fragen, wir wollen dir lediglich helfen diese zu finden und dann läßt sich u.U. auch dein Problem lösen.

Struppi.

[Der Martin]

Hallo,

Am besten du gibst mal einen Link zu deiner Problemseite (ohne die Korrekturen), damit man sich das mal live ansehen kann. Dann sehen wir weiter.
http://www.bsk-agy.de/content/
Das Problemkind ist der Suchbutton mit dem Textfeld, der am unteren linken Rand der Grafik sein sollte.

Yo, und das ist nicht das einzige "Problemkind".
Als erstes fällt auf, dass du angeblich HTML schreibst, aber leere Tags mit '/>' schließt, wie es eigentlich in XHTML gedacht ist. Entscheide dich doch bitte für eine Variante. Außerdem wimmelt dein Quellcode von Fehlern, der Validator kann da ein Lied davon singen.
Nicht falsch, aber schlechter Stil ist außerdem, dass du einerseits CSS benutzt, andererseits aber noch jede Menge HTML-Attribute zur Formatierung verwendest.

So, nun zu dem, was du als Problemkind siehst.

<p class="search">
 <form action="?section=search" method="post">
 <input class="search" name="term" value="" maxlength="100" />
 <input class="sbutton" value="Suchen" name="Submit" type="submit">
 </form>
 </p>

Auf die Formularelemente darin (Textfeld, Button) trifft folgender Selektor zu:

input,select,textarea {
    top:10px;
    right:10px;
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    COLOR: #000000;
    font-size: 12px;
    font-color: #000000;
    background-color: #d3d3d3;
 }

Die Eigenschaften top und right haben keine Wirkung, weil die Elemente weder absolut, noch relativ positioniert sind. Warum du alle Rahmenlinien separat definierst, anstatt sie zusammenzufassen, wissen die Götter, und weiter ist nichts drin, was die Position der Elemente festlegt. Sie werden also im regulären Textfluss angezeigt.

Dann haben wir noch den Selektor für die Klasse "search", der auf den umschließenden Absatz sowie auf das Textfeld zutrifft. Allerdings ist er hochgradig fehlerhaft und muss daher komplett ignoriert werden:

.search {
 <!-- Browser erkennen und Boxlayout anpassen -->
  <script type="text/javascript">
  [...]
  </script>
}

Weder HTML-Kommentare noch Javascript hat irgendwas in CSS verloren!

So, nachdem wir nun festgestellt haben, dass die Position des Suchformulars nirgends definiert ist, ergibt sie sich also aus dem umgebenden HTML-Code: Das Formular ist in einer Tabelle eingebettet, die zur Positionierung ebenfalls keine konkreten Angaben macht, also erscheint der Inhalt vertikal zentriert (Standardausrichtung für td). Und genau da erscheinen die Felder bei mir auch sowohl im IE als auch im Firefox: Ungefähr auf halber Höhe der Hintergrundgrafik.
Sollen sie unten stehen, solltest du der umgebenden Zelle vielleicht ein vertical-align spendieren. Das können die Browser alle ungefähr gleich gut, eine Unterscheidung wäre dann gar nicht mehr nötig. Toll, was?

Aber unabhängig davon würde ich dir dringend empfehlen, wenigstens die Fehler im HTML zu beseitigen, vom CSS ganz zu schweigen. Über eine sinnvolle Strukturierung des Dokuments will ich mich auch gar nicht erst auslassen ...

Ciao,
 Martin