border-radius und der IE

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • border-radius und der IE

    Hallo zusammen

    da der IE bis einschließlich Version 8 kein border-radius beherrscht, habe ich eine border-radius.htc eingebunden. Das klappt auch ganz gut. ABER!!! Wenn z.B. ein div-Element eine Hintergrundgrafik hat, die über repeat-x horizontal gekachelt wird, so klappt das nicht im IE. Da wird das Bild komplett über die gesamte Fläche gekachelt.

    Mittlerweile weiß ich, dass der Hack auf Microsofts Vektor Markup Language beruht. Trotz etlicher Versuche und unzähliger Recherchen habe ich keine Lösung für das Problem gefunden.

    Weiß jemand Rat oder kennt ein Script bzw. einen Hack dafür?
    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

  • #2
    "Hack" dafür - bau dir den Hintergrund als 2 bzw 3 Bilder - ein Bild für den linken Bogen, 1 für den rechten Bogen, 1 für das Stuck dazwischen

    alternativ .. GIB dem Affen Zucker - sprich - die ewig gestrigen mit ihrem Uralt Internet Explodierer bekommen halt keine Bögen, weil deren Browser aus der frühen Jungsteinzeit ( alternativ die Programmierer bei Microsoft aus dieser Geschichtlichen Phase) halt einfach keine Bögen kennt - vielleicht bewirkt es ja den Wunsch in "einigen" der User ENDLICH mal nen Modernen Browser einzusetzen
    [font=Verdana]
    Wer LESEN kann, ist klar im Vorteil!
    [/font]

    Kommentar


    • #3
      Zitat von eagle275 Beitrag anzeigen
      "Hack" dafür - bau dir den Hintergrund als 2 bzw 3 Bilder - ein Bild für den linken Bogen, 1 für den rechten Bogen, 1 für das Stuck dazwischen
      Ich mache das ganze Buhei doch nur, um diese Bilderorgie zu vermeiden.
      Zitat von eagle275 Beitrag anzeigen
      alternativ .. GIB dem Affen Zucker - sprich - die ewig gestrigen mit ihrem Uralt Internet Explodierer bekommen halt keine Bögen, weil deren Browser aus der frühen Jungsteinzeit ( alternativ die Programmierer bei Microsoft aus dieser Geschichtlichen Phase) halt einfach keine Bögen kennt - vielleicht bewirkt es ja den Wunsch in "einigen" der User ENDLICH mal nen Modernen Browser einzusetzen
      Ich hätte kein Problem damit, wenn es nur den IE6/7 beträfe. Aber die Leuete mit den 8er? Da wird der Kunde mosern. Btw: Opera 11.5 beherrscht bei fieldsets auch kein border-radius.

      Peter

      PS: So langsam geht mir der Hype mit CSS3 und HTML5 auf die Nerven. Das wird man produktiv doch eh erst ab 2014 einsetzen können.
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar


      • #4
        das geht auch schon vorher - für alle Konqueror / Firefox / Safari / Chrome User

        mit Abstrichen auch die von Opera - wobei es da wohl eher an der Implementation liegt .

        Meines Wissens nach schaffen nur 2 Browser die Compliance Tests des W3C für CSS3 jetzt schon ... Opera und Konqueror (beide 100% Score) Firefox / Safari / Chrome kommen etwa auf 75 bis 90% Score) - IE 9 . liegt auch nicht zu schlecht mit ca 70% ... der Rest ist halt "Steinzeit"

        Eventuell musst du dann halt ne extensive Browserweiche einbauen - und wenn du wirklich die alten IE-User im Boot haben willst, eben doch mit Bildern arbeiten - mir ist keine andere Lösung für diese Browser bekannt - und richtig besser wirds auch nicht, wenn ich schon wieder diese Beschwerden zum IE 9 lese (von der Geschwindigkeit mal abgesehen .. mein Opera öffnet sich mit 20 Tabs schneller als der IE 9 mit nur 3 ^^)
        [font=Verdana]
        Wer LESEN kann, ist klar im Vorteil!
        [/font]

        Kommentar


        • #5
          Zitat von eagle275 Beitrag anzeigen
          ... der Rest ist halt "Steinzeit"
          Da es den IE9 nicht für XP gibt, kann man den Browser leider nicht ignorieren. Oder willst du mal eben 30 - 40% der Besucher das eigentliche Layout vorenthalten?

          Peter

          PS: Bei meinem privaten Auftritt baue ich es ein. Da liegt der Anteil der IE-Nutzer eh nur bei 9%. Und die können es dann halt eckig haben.
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            css3pie

            Hallo Peter,

            die Loesung mit den Hintergrundbildern muss nicht in eine Bilderorigie ausarten, wenn Du mit einem Sprite arbeitest. Ein Bild mit einer Ellipse reicht. In den Ecken des Elements, fuer das Du abgerundete Ecken haben moechtest, platzierst Du dann vier Divs absolut, die jeweils den richtigen Ausschnitt der Ellipse als Hintergrundbild besitzen.

            Sonst koennte noch "css3pie" fuer Dich interessant sein. Auf der Seite

            Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE

            findet sich bezuglich "border-radius.htc" die Formulierung

            "Unfortunately it is extremely simplistic. It only supports a single border radius value for all corners, doesn't handle rendering background images which are positioned or have repeat values other than 'repeat', ..."

            Kommentar


            • #7
              Zitat von mephisto111 Beitrag anzeigen
              ...platzierst Du dann vier Divs absolut, die jeweils den richtigen Ausschnitt der Ellipse als Hintergrundbild besitzen.
              Ich wollte auch diese div-Orgien vermeiden.
              Zitat von mephisto111 Beitrag anzeigen
              Sonst koennte noch "css3pie" fuer Dich interessant sein. Auf der Seite

              Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE
              Danke für den Hinweis. Schau ich mir mal an.

              Peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Unobtrusive JavaScript

                Hallo Peter,

                die vier Eck-Container bei der Bilderloesung koennen auch auf "unaufdringliche" Weise per JavaScript (z.B. jQuery) an alle Container mit der Klasse "rounded_corners" gebunden werden. Dann bleibt der HTML-Code sauber.

                Kommentar


                • #9
                  Zitat von mephisto111 Beitrag anzeigen
                  die vier Eck-Container bei der Bilderloesung koennen auch auf "unaufdringliche" Weise per JavaScript (z.B. jQuery) an alle Container mit der Klasse "rounded_corners" gebunden werden. Dann bleibt der HTML-Code sauber.
                  Der bleibt eh sauber. Und ein komplettes JS-Frameworks ist doch ein wenig overdressed. Bei meinem eigenen Auftritt ist mir der IE mittlerweile lattens. Hab es da ganz normal über border-radius gemacht. Unserem Kunden werde ich das wohl ausreden. Der ist eh extrem knickerig und wenn ich ihm sage, dass er damit Geld spart, macht der sofort mit.

                  Peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    du übertreibst gern, nicht kropff... da kriegen die pre IE 9 user halt keine abgerundeten Ecken zu sehen - NA UND .. das ist vielleicht 1 % des Layouts.

                    Bei Nachfragen kann man sauber und ehrlich antworten, dass dies an ihrem Browser liegt - der Rest des Layouts funktioniert doch problemlos ....
                    [font=Verdana]
                    Wer LESEN kann, ist klar im Vorteil!
                    [/font]

                    Kommentar


                    • #11
                      Zitat von eagle275 Beitrag anzeigen
                      du übertreibst gern, nicht kropff... da kriegen die pre IE 9 user halt keine abgerundeten Ecken zu sehen - NA UND .. das ist vielleicht 1 % des Layouts.
                      Vertu dich nicht. Wenn ein Auftritt viele Rundungen hat, so wirkt das völlig anders als ohne. Mit sehen die einfach viel weiblicher aus. Und verschiedene Designs? Da drehen die Marketingleute durch.

                      Peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar


                      • #12
                        das SIND NICHT verschiedene Designs - es ist immer noch das gleiche Design - nur der plöde Browser kann es nicht darstellen - wenn du halt die nötigen Verrenkungen scheust.

                        Es ist ja nicht so, dass du die Umwege nicht selbst kennen würdest - Bilder +Divs und soweiter - nur du magst sie nicht ? Dabei ließe sich das wie mephisto schreibt wunderbar automatisieren durch Verwendung von ein wenig geschickt platzierten Javascript

                        Und bevor du mich hier rund laufen lässt - meinem Auftraggeber sind die Probleme dargelegt worden, und die Entscheidung wurde gefällt ... wer den IE6 einsetzt, der kriegts halt "eckig" zu sehen.
                        Und die meisten Webseiten, die Runde Buttons im IE darstellen, haben für jeden einzelnen Button ein Bild - eben der Button ohne Beschriftung mit rundgelutschten Ecken. Bei fieldsets / Tabellen / sonstigen Rundungen wird halt mit div-Schachtelung gearbeitet - auch bei solchen Schwergewichten wie ebay / amazon und co
                        Zuletzt geändert von eagle275; 02.08.2011, 13:54.
                        [font=Verdana]
                        Wer LESEN kann, ist klar im Vorteil!
                        [/font]

                        Kommentar


                        • #13
                          Zitat von eagle275 Beitrag anzeigen
                          das SIND NICHT verschiedene Designs - es ist immer noch das gleiche Design - nur der plöde Browser kann es nicht darstellen...
                          Erklär das einem Designer und nicht mir. Wenn da keine Rundungen sind, ist es für die ein anderes Design.
                          Zitat von eagle275 Beitrag anzeigen
                          Es ist ja nicht so, dass du die Umwege nicht selbst kennen würdest - Bilder +Divs und soweiter - nur du magst sie nicht ? Dabei ließe sich das wie mephisto schreibt wunderbar automatisieren durch Verwendung von ein wenig geschickt platzierten Javascript
                          Da sitze ich gerade dran. Die bisher existierenden htc-Hacks kann man leider vergessen. Auch bei den jQuery-Plugins gibt es massenhaft Probleme.
                          Zitat von eagle275 Beitrag anzeigen
                          Und bevor du mich hier rund laufen lässt - meinem Auftraggeber sind die Probleme dargelegt worden, und die Entscheidung wurde gefällt ... wer den IE6 einsetzt, der kriegts halt "eckig" zu sehen.
                          IE6 alleine wäre auch kein Thema.
                          Zitat von eagle275 Beitrag anzeigen
                          Und die meisten Webseiten, die Runde Buttons im IE darstellen, haben für jeden einzelnen Button ein Bild - eben der Button ohne Beschriftung mit rundgelutschten Ecken. Bei fieldsets / Tabellen / sonstigen Rundungen wird halt mit div-Schachtelung gearbeitet - auch bei solchen Schwergewichten wie ebay / amazon und co
                          Ich wollte halt mal eine saubere und vernünftige Lösung. Scheint es aber nicht zu geben. Vielleicht schaffe ich das mit meiner JS-Programmierung.

                          Peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            Zitat von eagle275 Beitrag anzeigen
                            nur der plöde Browser
                            OffTopic:
                            Wenn schon so, dann auch richtig! Der plöde Prowser. SCNR.

                            Peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar


                            • #15
                              breitgrins .. mit meinen Worten halt der InternetExplodierer
                              [font=Verdana]
                              Wer LESEN kann, ist klar im Vorteil!
                              [/font]

                              Kommentar

                              Lädt...
                              X