wayne: Browserunabhängige Schaltflächen?

hallo zusammen,

ich habe eine webseite in PHP unter verwendung von HTML und CSS geschrieben und diese dabei ständig unter dem IE6 verifiziert. nun bin ich damit fertig und möchte sie so umprogrammieren, daß sie für andere browser auch funktioniert, bestenfalls genau so aussieht. mein einziges problem sind die von mir verwendeten navigationselemente. ich habe unter anderem auf der hauptseite einige flächen verteilt. diese sind vom hintergrundbild etwas hervorgehoben und verändern ihre färbung, sobald man mit der maus darübergeht. realisiert habe ich dies mittels CSS, auf JavaScript möchte ich gänzlich verzichten.

hier der entsprechende HTML-code dieser seite, wie er von meinem PHP-script generiert wird:
<table align="center" border="0" cellspacing="0" cellpadding="0"
       width="100%" height="100%">
    <colgroup>
        <col width="15px">
        <col width="385px">
        <col width="15px">
        <col width="385px">
        <col width="15px">
    </colgroup>
    <tr height="385px">
        <td background="images/mainX0.jpg">&nbsp;</td>
        <td id="X1">
            <a href="main.php?p=Page1&amp;b=0" target="main">
                Zu Page 1
            </a>
        </td>
        <td background="images/mainX2.jpg">&nbsp;</td>
        <td id="X3">
            <a href="main.php?p=Page2&amp;b=0" target="main">
                Zu Page 2
            </a>
        </td>
        <td background="images/mainX4.jpg">&nbsp;</td>
    </tr>
</table>

oben drüber steht als CSS:
html body {
    overflow:hidden;
}
a {
    line-height:1.5em;
    background-repeat: no-repeat;
    font-family: arial;
    font-size: 16px;
    text-decoration: none;
    text-align: left;
    color: #000000;
    cursor: hand;
    overflow:visible;
    padding-top: 5px;
    padding-left:5px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
}
#X1 a, #X1 a:link, #X1 a:active, #X1 a:focus, #X1 a:visited {
    background: url(images/mainX1Link.jpg) top;
}
#X1 a:hover {
    background: url(images/mainX1Hover.jpg) top;
}
#X3 a, #X3 a:link, #X3 a:active, #X3 a:focus, #X3 a:visited {
    background: url(images/mainX3Link.jpg) top;
}
#X3 a:hover {
    background: url(images/mainX3Hover.jpg) top;
}

soweit, so gut. unter dem IE6 funktioniert das wunderbar, aber unter Opera und Firefox erhält der jeweilige link nur die fläche, die der beinhaltende text benötigt. letzteres ist wohl auch korrekt nach HTML-standard, wie ich mittlerweile gelesen hab. deshalb hab ich bereits versucht dem link die größe des jeweiligen bildes zu geben, indem ich ihm anstatt dem text erst mal ein table mit einer zeile und mit genau einer zelle als inhalt gegeben hab, welche dann den text beinhaltete. den CSS-code habe ich entsprechend angepasst, also aus "#X1 a:hover" wurde dann "#X1 a:hover table tr td". das spielchen klappt soweit, daß mir damit Opera und Firefox die seite korrekt darstellen und alles korrekt funktioniert. im IE6 sieht ebenfalls alles korrekt aus, nur funktionieren die links nicht mehr. obwohl diese so generierten schaltflächen als link definiert wurden und sich, gemessen am hover-verhalten, auch so benehmen, kann man sie anklicken, was man will, es tut sich nichts (unter IE6, unter Opera und Firefox reagieren sie).

übrigends hatte ich ursprünglich anstatt für den normalen link und den gehoverten link jeweils ein bild zu verwenden, für beides ein und das selbe bild, welches doppelt so hoch war und beide zustände untereinander abbildete. anstatt im css das bild auszutauschen hatte ich die y-position verändert. das funktionierte im IE6 klasse, aber sonst halt nirgends, weshalb ich mich auf anderen seiten in deren quelltext kundig gemacht hab und festgestellt hab, daß ganz seriöse seiten, wie beispielsweise xing, diese lösung hier verwenden (obwohl ja in selfhtml extra davon abgeraten wird, da ja extra für den hover-effekt nachgeladen werden muss). xing hat aber leider keine solchen schaltflächen, sodaß ich mit deren quelltext auch nicht weiter kam, ausgenommen, daß ich nun weiß, daß ich mittels XHTML wohl unter den verwendeten browsern unterscheiden kann.

ich weiß, daß durch einfärben das alles wesentlich einfacher ginge, allerdings würde dies dann im aktuellen layout unmöglich aussehen. meine schaltflächen sind aktuell ausschnitte eines bildes, welches sich über die ganze seite erstreckt (also mainX0.jpg, mainX1Link.jpg, mainX2.jpg, usw. sind zusammen ein großes im nachhinein gesplittetes bild). die jeweiligen hover-varianten sind eingefärbte versionen der entsprechenden ausschnitte, also keine einfarbigen flächen.

ich habe ausserdem bereits versucht im CSS anstatt 100% pixelangaben zu verwenden, erfolglos. ausserdem versuchte ich bereits layer in den jeweiligen link einzubetten, was auch nicht funktioniert hat. buttons würden dem ganzen von der funktion her entsprechen, jedoch habe ich damit das problem, daß ich deren aussehen zu wenig beeinflussen kann (sagt mir, wenn ich mich hier irren sollte). zumindest denke ich, daß es mir nicht möglich ist, im mouseover-fall einem button beizubringen, ein anderes bild bzw. das gleiche bild mit anderem y-offset als darstellung seiner selbst zu verwenden, oder?

mittlerweile weiß ich gar nicht mehr, was ich machen soll, damit das browserübergreifend funktioniert und gleich aussieht, ohne daß ich JavaScript verwende oder XHTML und dann für jeden browser eine eigene seite bereit stelle oder mein gesamtes layout verwerfe und neu gestalte. deshalb hier die frage an euch, ob mir jemand nen tip geben kann, wie ich das mit HTML+CSS lösen kann.

vielen lieben dank

wayne

  1. Liebe(r) wayne,

    ich habe eine webseite [...] geschrieben und diese dabei ständig unter dem IE6 verifiziert. nun bin ich damit fertig und möchte sie so umprogrammieren, daß sie für andere browser auch funktioniert

    ohne den Rest gelesen zu haben muss ich schon jetzt sagen, dass das der komplett falsche Weg war. Faustregel: Der IE hält sich nicht an Standards und ist daher als Entwicklungsumgebung völlig ungeeignet!! Benutze "richtige" Browser wie Opera, Safari oder am besten Firefox!

    Wenn eine Seite korrekt erstellt wurde, wird sie nach meinen Erfahrungen in allen genannten "richtigen" Browsern korrekt dargestellt. Darstellungsfehler im IE kann man dann gesondert angehen.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. ok, heißt meine lösung für opera und firefox soll ich nehmen aber was mach ich eben mit dem internet explorer. das ist ja eben die frage, ob es eine lösung für alle browser gibt dergleichen darzustellen oder ob ich definitiv eine  fallunterscheidung bezüglich der webbrowserbenötige. wobei die nächste frage wäre, welche möglichkeiten zur fallunterscheidung es überhaupt gibt?

      Liebe(r) wayne,

      ich habe eine webseite [...] geschrieben und diese dabei ständig unter dem IE6 verifiziert. nun bin ich damit fertig und möchte sie so umprogrammieren, daß sie für andere browser auch funktioniert

      ohne den Rest gelesen zu haben muss ich schon jetzt sagen, dass das der komplett falsche Weg war. Faustregel: Der IE hält sich nicht an Standards und ist daher als Entwicklungsumgebung völlig ungeeignet!! Benutze "richtige" Browser wie Opera, Safari oder am besten Firefox!

      Wenn eine Seite korrekt erstellt wurde, wird sie nach meinen Erfahrungen in allen genannten "richtigen" Browsern korrekt dargestellt. Darstellungsfehler im IE kann man dann gesondert angehen.

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      1. Hallo

        ok, heißt meine lösung für opera und firefox soll ich nehmen aber was mach ich eben mit dem internet explorer.

        War das eine Frage.

        das ist ja eben die frage, ...

        also doch

        ... ob es eine lösung für alle browser gibt dergleichen darzustellen oder ob ich definitiv eine  fallunterscheidung bezüglich der webbrowserbenötige. wobei die nächste frage wäre, welche möglichkeiten zur fallunterscheidung es überhaupt gibt?

        Da die Browser in unterschiedlichem Maße CSS beherrschen -am unterschiedlichsten verhält sich der MSIE- kommst du eventuell (je nach verwendeten CSS-Eigenschaften) nicht um eine Weiche herum. Allerdings ist die unterschiedliche Beherrschung von CSS an dieser Stelle auch die Lösung. Am (Un-)Vermögen, mit bestimmten Möglichkeiten von CSS umzugehen, kann man die verschiedenen Browser erkennen und demnach zielgenau bedienen.

        Und bitte lasse das TOFU.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.2
        1. vielen dank auge :-)

          über die seite von selfhtml bezüglich der browserweiche war ich bislang noch nicht gestolpert. damit hab ich erst mal die nächsten tage wieder was zum probieren.

          und sorry wegen dem TOFU ... bislang (in den 17 jahren meiner informatikerkariere) war mir dieser begriff unbekannt sowie das unding des "Text oben, Fußnote unten" nicht störend aufgefallen. aber danke für den hinweis, ich werd's zukünftig unterlassen.

          wayne

          1. Lieber wayne,

            und sorry wegen dem TOFU ... bislang (in den 17 jahren meiner informatikerkariere) war mir dieser begriff unbekannt sowie das unding des "Text oben, Fußnote unten" nicht störend aufgefallen. aber danke für den hinweis, ich werd's zukünftig unterlassen.

            in Mails ist TOFU (auch nicht immer) sinnvoll, in einem Forumsposting dagegen überhaupt nicht. In Mails mag der vorausgegangene Austausch mit TOFU zurückverfolgt werden, in einem Forum hat man die vorausgegangene Diskussion ja "vor Ort" zum Recherchieren da und braucht sie nicht auch noch im Posting selbst.

            Liebe Grüße aus Ellwangen,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Hallo Felix,

              in Mails ist TOFU (auch nicht immer) sinnvoll, in einem Forumsposting dagegen überhaupt nicht.

              Viel schlimmer dagegen finde ich "TUFO", also Text unten und Fullquote oben.

              Jonathan

              1. Hallo,

                in Mails ist TOFU (auch nicht immer) sinnvoll, in einem Forumsposting dagegen überhaupt nicht.
                Viel schlimmer dagegen finde ich "TUFO", also Text unten und Fullquote oben.

                das finde ich zwar auch nicht gerade toll, aber nicht ganz so schlimm - weil man wenigstens fortlaufend lesen kann und nicht dauernd auf und ab springen muss.

                Ciao,
                 Martin

                --
                Idealismus wächst mit der Entfernung zum Problem.
                1. Hallo Der,

                  das finde ich zwar auch nicht gerade toll, aber nicht ganz so schlimm - weil man wenigstens fortlaufend lesen kann und nicht dauernd auf und ab springen muss.

                  Wieso?

                  Bei TOFU ist doch der untere Teil einfach nur Zitat, den kann man dann einfach überlesen und muss nicht viel rumspringen. Bei "TUFO" dagegen muss man immer den Quote am Anfang wegscrollen.

                  Jonathan

                  1. Hallo,

                    [Fullquote oben, Text unten]

                    das finde ich zwar auch nicht gerade toll, aber nicht ganz so schlimm - weil man wenigstens fortlaufend lesen kann und nicht dauernd auf und ab springen muss.

                    Wieso?
                    Bei TOFU ist doch der untere Teil einfach nur Zitat, den kann man dann einfach überlesen und muss nicht viel rumspringen.

                    aber nur dann, wenn *zusätzlich* zum TOFU vernünftig inline zitiert wird (was das TOFU an sich dann überflüssig macht). Wenn nicht, muss ich doch immer wieder in den zitierten Teil springen, um den Zusammenhang herstellen zu können.

                    Bei "TUFO" dagegen muss man immer den Quote am Anfang wegscrollen.

                    Und den Zusammenhang, den "Aufhänger" auch. Damit steht der neu geschriebene Text ohne Zusammenhang da und ist wertlos. Liest man den zitierten Teil dagegen mit, ist man wieder im Kontext und kann trotzdem normal linear lesen.

                    Ciao,
                     Martin

                    --
                    Okay, Alkohol ist keine Antwort.
                    Aber manchmal vergisst man beim Trinken wenigstens die Frage.
            2. Hallo Felix,

              in Mails ist TOFU (auch nicht immer) sinnvoll, ...

              nein, ganz entschieden: Nein. Auch (und gerade) in Mails ist TOFU eine Pest, die das Erfassen der Zusammenhänge wahnsinnig schwer macht, weil der Lesefluss kreuz und quer springt:

              in einem Forumsposting dagegen überhaupt nicht.

              Worin besteht deiner Meinung nach der Unterschied?

              In Mails mag der vorausgegangene Austausch mit TOFU zurückverfolgt werden, in einem Forum hat man die vorausgegangene Diskussion ja "vor Ort" zum Recherchieren da und braucht sie nicht auch noch im Posting selbst.

              Auch in Mails habe ich ja auch die vorangegangenen Nachrichten, um darauf zurückgreifen zu können; die wichtigen Passagen werden sowieso inline zitiert.

              Schönen Abend noch,
               Martin

              --
              Der Mensch denkt, Gott lenkt.
              Der Mensch dachte, Gott lachte.
              1. in Mails ist TOFU (auch nicht immer) sinnvoll, ...

                Nein. Auch (und gerade) in Mails ist TOFU eine Pest

                Immer noch besser als die typisch Outlook’sche Kammzitat-Tubercolumnose.

                Roland, ohne jegliche Administratorenrechte in MS-Monokultur werkend

                --
                Top Fives // »Falco († 06.02.1998)«
                1. Hallo Roland,

                  Nein. Auch (und gerade) in Mails ist TOFU eine Pest
                  Immer noch besser als die typisch Outlook’sche Kammzitat-Tubercolumnose.

                  die kenne ich nur vom Hörensagen, habe sie aber noch nie live erlebt. *puh*

                  Davon abgesehen: Die Thunderbird'sche Art, mit Zitaten umzugehen, finde ich auch grausam: Dem T-Bird-User farbige Balken am Rand sauber umgebrochener Absätze zeigen, in Wirklichkeit aber endlos lange Zeilen ohne einen einzigen Umbruch erzeugen und nur ein einzelnes "> " voranstellen.

                  So long,
                   Martin

                  --
                  Realität ist eine Illusion, die durch Unterversorgung des Körpers mit Alkohol entstehen kann.
                  1. Outlook’sche Kammzitat-Tubercolumnose.

                    die kenne ich nur vom Hörensagen, habe sie aber noch nie live erlebt. *puh*

                    Kennst du keine Leute, die Witze dritter Klasse per CC in die Welt blasen? Nennt man euch Freunde. ;-)

                    Die Thunderbird'sche Art, mit Zitaten umzugehen, finde ich auch grausam: Dem T-Bird-User farbige Balken am Rand sauber umgebrochener Absätze zeigen, in Wirklichkeit aber endlos lange Zeilen ohne einen einzigen Umbruch erzeugen und nur ein einzelnes "> " voranstellen.

                    Das ist eine Frage der Einstellung:

                    Thunderbird-Zitat

                    Siehe mail.quoted_graphical = false

                    Roland

                    --
                    Top Fives // »Falco († 06.02.1998)«
                    1. Hallo,

                      Outlook’sche Kammzitat-Tubercolumnose.
                      die kenne ich nur vom Hörensagen, habe sie aber noch nie live erlebt. *puh*
                      Kennst du keine Leute, die Witze dritter Klasse per CC in die Welt blasen?

                      äh, doch - aber eben nur als TOFU. Outlook (Express) macht doch von sich aus gar keine "richtigen" Zitatzeichen. Zumindest konnte ich OE bzw. Outlook noch nicht dazu bringen, nur manchmal (keine Ahnung, wovon das abhängt) zitieren die Bösewichte mit ">" vornedran.

                      Die Thunderbird'sche Art, mit Zitaten umzugehen, finde ich auch grausam:
                      Das ist eine Frage der Einstellung:

                      Danke, werde ich mal ausprobieren. Wobei mich die bunten Balken eigentlich nicht so sehr gestört haben, sondern mehr die Tatsache, dass mein T-Bird gern überlange Zeilen ohne Umbruch produziert und sie dann auch nachher im Mail-Fenster nicht umbricht, sondern einige Meter horizontal scrollt.

                      Aber nur beim Zitieren, wenn ich eine Nachricht beantworte/weiterleite. Wenn ich selbst eine neue Nachricht verfasse, wird auch ordentlich dynamisch an den Fensterrändern umgebrochen.

                      Kriege ich das eventuell mit der "flowed"-Geschichte hin? Das habe ich nämlich noch nicht begriffen.

                      --
                      Frauen sind wie Elektrizität: Fasst man sie an, kriegt man eine gewischt.
                      1. Tach,

                        Danke, werde ich mal ausprobieren. Wobei mich die bunten Balken eigentlich nicht so sehr gestört haben, sondern mehr die Tatsache, dass mein T-Bird gern überlange Zeilen ohne Umbruch produziert und sie dann auch nachher im Mail-Fenster nicht umbricht, sondern einige Meter horizontal scrollt.
                        Aber nur beim Zitieren, wenn ich eine Nachricht beantworte/weiterleite.

                        Zitate werden erst beim Versenden umgebrochen, oder wenn man Edit->Rewrap ausführt.

                        mfg
                        Woodfighter

                        1. Guten Morgen,

                          Zitate werden erst beim Versenden umgebrochen, [...]

                          KNACK!

                          File libe Griese,

                          Sto*scnr*nie

                          --
                          It's no good you trying to sit on the fence
                          And hope that the trouble will pass
                          'Cause sitting on fences can make you a pain in the ass.
                          Und im Übrigen kennt auch Stonie Wayne.
                          1. Hi Stonie,

                            Zitate werden erst beim Versenden umgebrochen, [...]

                            KNACK!

                            das war mir allerdings auch nicht bekannt – und es hört sich irgendwie besch***en an ;-). Aber so ist das manchmal mit dem korrekten Deutsch. Ich wusste bis vor kurzem auch nicht, dass es standardsprachlich „gewinkt“ heißt und nicht „gewunken“ …

                            Schönen Sonntag noch!
                            O'Brien

                            --
                            Frank und Buster: "Heya, wir sind hier um umzubrechen!"
                            1. umgebrochen

                              KNACK!

                              das war mir allerdings auch nicht bekannt

                              Tja, SELF ist die Bildung. :-)

                              Roland

                              --
                              Top Fives // »Falco († 06.02.1998)«
                          2. Tach,

                            Zitate werden erst beim Versenden umgebrochen, [...]

                            KNACK!

                            I break together.

                            mfg
                            Woodfighter

                        2. Hallo,

                          [...] dass mein T-Bird gern überlange Zeilen ohne Umbruch produziert und sie dann auch nachher im Mail-Fenster nicht umbricht, sondern einige Meter horizontal scrollt.
                          Zitate werden erst beim Versenden umgebrochen, oder wenn man Edit->Rewrap ausführt.

                          hey, das ist mal ein guter Vorschlag! Ehrlich, der Befehl ist mir im Menü noch nie aufgefallen. Könnte daran liegen, dass ich die Befehle im Edit-Menü so gut wie nie brauche bzw. nur über ihre Tastatur Shortcuts aufrufe. Allerdings die alten, klassischen, also z.B. Ctrl-Ins (Copy), Shift-Ins (Paste), Alt-Backspace (Undo). Das Gerümpel mit Ctrl-X, Ctrl-C usw. kann ich mir einfach nicht merken. ;-)

                          Schönen Abend,
                           Martin

                          --
                          Wer schläft, sündigt nicht.
                          Wer vorher sündigt, schläft besser.
                      2. gudn tach!

                        Danke, werde ich mal ausprobieren. Wobei mich die bunten Balken eigentlich nicht so sehr gestört haben, sondern mehr die Tatsache, dass mein T-Bird gern überlange Zeilen ohne Umbruch produziert und sie dann auch nachher im Mail-Fenster nicht umbricht, sondern einige Meter horizontal scrollt.

                        abgesehen vom bereits genannten alt-e,w gibt's auch noch die moeglichkeit, einen externen editor zu verwenden.

                        http://globs.org/download.php?lng=en External Editor Version 0.7.3
                        (vorsicht: hat bei mir reproduzierbar konquerer zum absturz gebracht. im firefox funzte's aber.)

                        und dann z.b. "gvim -f" als externen editor angeben. dann hat man endlich auch gescheites syntaxhighlighting fuer e-mails. ach ja, und mit "gq" kann man dann in vim textpassagen formatieren.

                        prost
                        seth

  2. Hi!

    Was hast du denn getan, um die Groesse der Links mit CSS zu formatieren und warum ging das nicht? Zu den Tabellen lasse ich micht nicht weiter aus, bis auf dies: Nimm bitte wenigstens die Tabellen aus den Links!

  3. Yerf!

    unter dem IE6 funktioniert das wunderbar, aber unter Opera und Firefox erhält der jeweilige link nur die fläche, die der beinhaltende text benötigt. letzteres ist wohl auch korrekt nach HTML-standard, wie ich mittlerweile gelesen hab.

    Scheinbar hast du die Lösung des Problems dabei übersehen. Das ein <a> keine Breite und Höhe annimmt, weil es inline ist, ist die eine Sache. Aber es hindert dich niemand daran, dies mittels diplay:block zu ändern.

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->