Anzeige

CSS hilfe für IE 5 und 6

CSS hilfe für IE 5 und 6 | PSD-Tutorials.de

Erstellt von Vansoul, 07.02.2011.

  1. Vansoul

    Vansoul Noch nicht viel geschrieben

    Dabei seit:
    16.09.2010
    Beiträge:
    20
    Geschlecht:
    männlich
    Ort:
    Lauenburg
    CSS hilfe für IE 5 und 6
    Hallo Leute,
    vielleicht kann mir einer das Mal erklären, sodass ich Anfänger das auch verstehe.
    Ich bin gerade dabei für eine Freundin Ihre Webseite neu zu erstellen und habe ein kleines Problem mit der Darstellung im IE 5 und 6. Das ist meine erste Seite mit reinem CSS und nicht wie sonst Tabellenlayout in Kombination mit Ebenen.
    Die Nachmittage mit Google haben zwar mir was zum Lesen gebracht und probieren, aber zum Erfolg hat es nicht gelangt. Ich weiß ich könnte auch sagen, wer noch alte Browser hat, der hat Pech. Aber dass wollen wir ja auch nicht.
    Falls jemand einen Tipp hat wäre ich Ihn dankbar.

    Gruß Rogér

    Hier zur Seite

    CSS
    Code (Text):
    1. *{
    2. margin:0;
    3. padding:0;
    4. }
    5.  
    6. body {
    7.     background-image: url(../Hompage-Bilder/Backgroundpic.gif);
    8.     background-repeat: repeat;
    9.     width: 100%;
    10.     height: 100%;
    11.     margin: 0;
    12.     padding: 0; }
    13.  
    14. h1 {
    15.     color: #bacd9a;
    16.     font-size: 18px;
    17.     font-family: Verdana, Arial, Helvetica, sans-serif;
    18.     font-weight: bold;
    19.     font-style: normal;
    20.     line-height: 22px;
    21.     text-align: left;
    22.     margin: 50px 0 16px;
    23.     padding: 10px 0 5px 0;
    24.     border-bottom: 1px solid #333; }
    25.    
    26. h2 {
    27.     color: #bacd9a;
    28.     font-size: 16px;
    29.     font-family: Verdana, Arial, Helvetica, sans-serif;
    30.     font-weight: bold;
    31.     font-style: normal;
    32.     line-height: 18px;
    33.     text-align: left;
    34.     margin: 30px 0 16px;
    35.     padding: 0 0 5px 0;
    36.     border-bottom: 1px solid #333; }
    37.    
    38. h3 {
    39.      color: #bacd9a;
    40.      font-size: 12px;
    41.      font-family: Verdana, Arial, Helvetica, sans-serif;
    42.      font-weight: normal;
    43.      font-style: normal;
    44.      line-height: 14px;
    45.      text-align: left;
    46.      margin: 1px 0 10px;
    47.      padding: 0; }
    48.      
    49. p {
    50.     color: #fff;
    51.     font: 11px/14px Verdana, Arial, Helvetica, sans-serif;
    52.     text-align: left;
    53.     margin: 0 0 20px;
    54.     padding: 0; }
    55.  
    56. #box {
    57.     background-image: url(../Hompage-Bilder/Mainpic.gif);
    58.     width: 980px;
    59.     height: auto;
    60.     margin: 0 auto; }
    61.  
    62.  
    63.  
    64. #header {
    65.     background-image: url(../Hompage-Bilder/Headpic.gif);
    66.     background-repeat: no-repeat;
    67.     width: 980px;
    68.     height: 260px; }
    69.  
    70.  
    71.  
    72. #content {
    73.     width: 980px;
    74.     height: auto; }
    75.  
    76.  
    77.  
    78. #sidebar {
    79.     width: 180px;
    80.     height: auto;
    81.     float: left;
    82.     margin-top: 0;
    83.     margin-left: 100px;
    84.     padding: 0; }
    85.  
    86.  
    87.  
    88. #contentarea {
    89.     width: 560px;
    90.     height: auto;
    91.     float: right;
    92.     margin-right: 80px; }
    93.  
    94. #box1 {
    95.     text-align: left;
    96.     width: 150px;
    97.     height: 160px;
    98.     margin:10px 0 10px 10px;
    99.     padding: 0 0 0 10px;
    100.     float: left; }
    101.  
    102. #box1l {
    103.     text-align: left;
    104.     width: 150px;
    105.     height: 160px;
    106.     margin:10px 0 10px 10px;
    107.     padding: 0 0 0 10px;
    108.     float: left;
    109.     border-left: 1px solid #333; }
    110.  
    111. #box2 {
    112.     text-align: left;
    113.     width: 200px;
    114.     height: 300px;
    115.     margin: 0;
    116.     padding: 0;
    117.     float: right; }
    118.  
    119. div.clear {
    120.     clear: both;
    121.     height: 0;
    122.     font-size: 0;
    123.     margin: 0;
    124.     padding: 0; }
    125.  
    126.  
    127.  
    128. #footer {
    129.     background-image: url(../Hompage-Bilder/Footerpic.gif);
    130.     background-repeat: no-repeat;
    131.     clear: both;
    132.     width: 980px;
    133.     height: 130px; }
    134.  
    135.  
    136. #navcontainer
    137. { width: 180px; padding: 0; color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; height: auto; margin-top: 50px; }
    138.  
    139. #navcontainer ul
    140. { height: 35px; list-style: none; margin: 0; padding: 0; }
    141.  
    142. #navcontainer li
    143. { height: 35px; margin: 2px 0 0; }
    144.  
    145. #navcontainer li a
    146. { display: block; color: #bacd9a; background-image: url(../Hompage-Bilder/button_vert.gif); background-repeat: no-repeat; text-decoration: none; width: 100%; height: 35px; margin-top: 2px; padding-top: 10px; padding-left: 20px; }
    147.  
    148. html>body #navcontainer li a { width: auto; }
    149.  
    150. #navcontainer li a:hover
    151. { color: #fff; background-image: url(../Hompage-Bilder/button_vert_over.gif); background-repeat: no-repeat; height: 35px; margin-top: 2px; }
    152.  
    153.  
     
    #1      
  2. jaderbass

    jaderbass Noch nicht viel geschrieben

    Dabei seit:
    14.01.2010
    Beiträge:
    45
    Geschlecht:
    männlich
    Ort:
    Erfurt
    Software:
    Adobe CC / Corel X4
    Kameratyp:
    Canon EOS 500D
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Hallo Rogér,

    ja das ewige Problem mit dem Internet-Explorer... Es ist so, dass der IE in den verschiedensten Versionen (am schlimmsten ist die Version 6) die Abstände bei Platz einnehmenden Tags wie div, p img etc. anders berechnet als die "üblichen" Browser. Mir hat es immer geholfen für die unterschiedlichen Versionen des IE verschiedene CSS-Dateien einzubinden. Es gibt dafür einen Hack. Und so könnte das aussehen:
    HTML:
    1. <link rel="stylesheet" media="all" type="text/css" href="styles/normale.css" />
    2. <!--[if IE 5]>
    3. <link rel="stylesheet" media="all" type="text/css" href="styles/ie5.css" />
    4. <![endif]-->
    5. <!--[if lte IE 6]>
    6. <link rel="stylesheet" media="all" type="text/css" href="styles/ie6plus.css" />
    7. <![endif]-->
    8. <!--[if IE 7]>
    9. <link rel="stylesheet" media="all" type="text/css" href="styles/ie7.css" />
    10. <![endif]-->
    Zur Erklärung: Das spezielle Tag
    HTML:
    1. <!--[if IE X]>
    kennt nur der Internet-Explorer und wird von anderen Browsern ignoriert. Hier kann man die einzelnen Versionen direkt ansprechen wie im Beispiel den IE5 und den IE7 bzw. kann Einstellungen festlegen ab welcher Version diese spezielle CSS-Datei gelten soll (im Beispiel der IE6). Weitergehende Infos zu diesem Hack findest du sicher über Google.

    Wenn man die "normale" Version der CSS-Datei zuerst einbindet und danach die speziellen IE-Versionen muss man in den einzelnen CSS-Dateien auch nicht noch einmal alle Einstellungen angeben. Man kann dann nur die Einstellungen entsprechend angeben, für die die anderen Werte notwendig sind weil: Einstellungen einer später eingebundenen CSS-Datei überschreiben die von früher eingebundenen Dateien.

    Hoffe ich konnte helfen.

    Gruß
    Jörg
     
    #2      
  3. Evilmachine

    Evilmachine Webprogrammierer

    Dabei seit:
    07.02.2011
    Beiträge:
    14
    Geschlecht:
    männlich
    Ort:
    Hameln
    Software:
    Fireworks, Dreamweaver,InDesign, Illustrator, Photoshop, Notepad++, Eclipse
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Wobei man sich überlegen sollte den IE 5 und 6 außen vor zu lassen.

    Diese Versionen werden selbst von großen Firmen nicht mehr beachtet, unter anderem von Microsoft selbst.

    Bei uns in der Firma haben wir den IE6 Support auch eingestellt und viele Kunden fragen schon gar nicht mehr danach oder verzichten von Anfang an drauf.
     
    #3      
  4. Vansoul

    Vansoul Noch nicht viel geschrieben

    Dabei seit:
    16.09.2010
    Beiträge:
    20
    Geschlecht:
    männlich
    Ort:
    Lauenburg
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Danke euch beiden für die schnellen Antworten. Aber jaderbass, ist das nicht bissel umständlich. Ich müsste dann immer probieren wie es in den IE 5 - 9 ausschaut und so lange probieren bis es passt :(
    Ich persönlich benutze seit Jahren nur den FF und Schau mir die Seiten immer nur per IE-Tester an.
    Nun steht die Frage, machen wie jaderbass und sich mit Hacks auseinander setzen oder IE 5 und 6 ... wie macht man es: Ein wink über die Schulter.
     
    #4      
  5. Evilmachine

    Evilmachine Webprogrammierer

    Dabei seit:
    07.02.2011
    Beiträge:
    14
    Geschlecht:
    männlich
    Ort:
    Hameln
    Software:
    Fireworks, Dreamweaver,InDesign, Illustrator, Photoshop, Notepad++, Eclipse
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Die Seite für IE5 und 6 anzupassen ist zeitaufwendig und vor allem teilweise sehr mühsam.

    Du müsstest jede CSS Datei extra für die Browser anpassen was deutlich mehr Arbeit bedeutet.

    Die Frage ist wie wichtig ist es für den Kunden die Seite auch im IE5 und 6 funktional zu haben.

    Die Verteilung dieser beiden Versionen ist mittlerweile nicht mehr so groß.

    IE6 kommt gerade noch auf 4,5 %. Webbrowser – Wikipedia

    IE5 wird da gar nicht mehr aufgeführt.
     
    #5      
  6. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    4,5 also fast 5 % finde ich persönlich zu hoch um dort keine Anpassungen vorzunehmen. Je nach Auftrag, Seite und Kundenwunsch sollten man handeln. Ich selber bin froh wenn der IE6 endlich verschwunden ist.

    IE5 würde ich nicht optimieren. Bis IE6 kann ich ja noch verstehen. Alles darunter sollte unter den Tisch fallen. Ich würde höchstens eine Nachricht anzeigen und den Besucher fragen was er mit so einer alten Krücke und Sicherheitslücke im Internet macht. ;)

    Zu guter Letzt. Für den schnellen und einfachen Weg die Seite an den IE anzupassen kann man auch die "Bugfixes" verwenden. Ist der Weg über JavaScript. Zwar blöde wenn dies dekativiert ist, dafür aber ein schneller und einfacher weg einzelne Bugs des IE auszugleichen. Einfach über die Conditional Comments den IE ansprechen und das JavaScript einbinden.

    Hier zum nachlesen: Conditional Comments

    Grüße Otto
     
    #6      
  7. midgard18

    midgard18 Nicht mehr ganz neu hier

    Dabei seit:
    24.08.2007
    Beiträge:
    142
    Geschlecht:
    männlich
    Kameratyp:
    UnFotoGen
    CSS hilfe für IE 5 und 6
    #7      
  8. Evilmachine

    Evilmachine Webprogrammierer

    Dabei seit:
    07.02.2011
    Beiträge:
    14
    Geschlecht:
    männlich
    Ort:
    Hameln
    Software:
    Fireworks, Dreamweaver,InDesign, Illustrator, Photoshop, Notepad++, Eclipse
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Der Internet Explorer wird am 27. August 10 Jahre alt.

    Ich finde es schon aus Sicherheitsaspekten verwerflich einen so alten Browser zu nutzen.

    Und das machen wir unseren Kunden auch klar. Google hat seit fast einem Jahr auf sämtlichen Services IE 6 Support beendet.

    Auf allen Seiten die wir designen bauen wir eine Leiste ein die bei der Benutzung aufpoppt und den Hinweis gibt das der Browser der verwendet wird stark veraltet ist.

    Das hatte eine deutliche Reduzierung der Zugriffszahlen mit IE6 auf den meisten Seiten zur Folge.

    Anscheinend haben sich die Leute das zu Herzen genommen.

    Mehr Infos zu der Leiste unter IE6 Update

    @topic: Du musst selber entscheiden ob du den IE6 untersützen willst. Wenn ja kommst du über komplexe Hacks nicht drum rum. Such dir eine Liste der bekannten IE6 Bugs bei Google raus, dann weißt du auch welche Aspekte der CSS Dateien du anpassen musst.
     
    #8      
  9. mobi

    mobi Noch nicht viel geschrieben

    Dabei seit:
    30.01.2007
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Photoshop
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Wir haben unsere neue HP auch nicht mehr für den IE 6 angepasst.
    Das wäre einfach vom Aufwand alleine schon zviel.Am besten lass es wirklich sein für den IE6 bzw. soagr den 5er.
    Der Anteil ist einfach viel zugering, als das sich der Aufwand lohnt
     
    #9      
  10. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Dieses Konzept sollte sich in meinen Augen so schnell wie möglich Schule machen. Ich meine damit das andere Webseitenbetreiber dies genauso handhaben. Somit lässt sich der IE6, der ja das Hauptaugenmerk ist schnell aus dem Internet löschen. Es wäre auch sehr zu begrüßen wenn Microsoft von sich aus mehr in dieser Richtung unternehmen würde. Schließlich stellt diese Version wie auch schon oben erwähnt eine Sicherheitslücke da.

    Zum TE:
    Das einzige was ich dir noch mit auf den Weg geben möchte ist das Coden mit validen HTML und CSS. Dies sollte immer eingehalten werden. Mit den verschiedenen Erweiterungen (Addons) für den Firefox kann man direkt beim erstellen alles genau nachvollziehen. Der Mensch ist nun einmal nicht Fehlerfrei. Mit den passenden Tools kann man also schnell Fehlerquellen aufspüren und natürlich beheben.

    Folgende Addons weiß ich seid längerem sehr zu schätzen. Unter anderem wäre das die Web Developer Toolbar, Firebug + Erweiterungen (php etc.), der integrierte HTML-Validator (Neben dem eigentlichen validieren auf der W3C). Zu guter Letzt sollte man vielleicht auch gleich eine Rechtschreibkorrektur aktiv haben. Es passiert ja schnell das man eine Tippfehler macht.

    Ich wünsche nun viel Erfolg bei der weiteren Umsetzung und natürlich einen sicheren Webauftritt.

    Grüße Otto

    Edit:
    Auch die Google Toolbar ist ein sehr nützliches Werkzeug. Vor allem wenn es um das Thema SEO - also die Suchmaschinen Optimierung geht. Unter anderem kann man mit dieser Toolbar die einzelnen Pageranks sehen. Dies hilft einem auch etwas bei der Orientierung. Ansonsten kann ich nur sagen das man so sauber wie eben möglich arbeiten sollte. Keine Hauruck-Webseiten die mal eben dahin geklatscht wurden. Am Ende soll sich doch der Besucher wohlfühlen und natürlich die bereitgestellten Inhalte so schnell es geht abrufen können.

    Ich habe hier noch zwei interessante Links. Hauptsächlich was die Accessibility und die Usability angeht. Also das barrierefreie Gestalten bzw. Umsetzen einer Webseite.

    Web Accessibility Initiative (WAI)
    Usability – Wikipedia

    Hier auch noch einmal etwas auf deutsch: Seite besuchen
     
    Zuletzt bearbeitet: 08.02.2011
    #10      
  11. Vansoul

    Vansoul Noch nicht viel geschrieben

    Dabei seit:
    16.09.2010
    Beiträge:
    20
    Geschlecht:
    männlich
    Ort:
    Lauenburg
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Moin und danke für die ganzen Infos und ich habe wohl eine kleine Diskussion ausgelöst zwecks muss man oder muss man nicht die alten IE beachten. Die Seite ist für eine Freundin die Hunde besitzt, züchtet und eine alte Frame Seite noch hat.
    Nun ja ich persönlich sage mir ja auch, dass der alter Browser wie der IE5 unter Win95 nicht mehr der neuste und ich somit keine Beachtung schenken sollte.
    Für den IE6 habe ich zwar eine Lösung gefunden mit kleiner Einschränkung in der Navigation (2px stehen die Button auseinander).
    Ich habe im CSS unter der Sidebar ein Inline eingefügt und nun sind die divs wieder nebeneinander angeordnet.

    Gibt es so was wie einen Code, wenn ein User die Seite mit einem IE6 öffnet, das automatisch ein Fenster aufpoppt mit dem Hinweis „ Sie benutzen ….“.
     
    Zuletzt bearbeitet: 08.02.2011
    #11      
  12. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.078
    Geschlecht:
    männlich
    Ort:
    Ö
    CSS hilfe für IE 5 und 6
    AW: CSS hilfe für IE 5 und 6

    Das stimmt so nicht. Google und Facebook unterstützen IE6 (und kleiner) nicht mehr, das stimmt. Leider gibt es noch genügend Firmen die den IE6 noch unterstützen. Firmen, die IE5 wirklich noch unterstützen sind mir zum Glück noch nicht untergekommen. Und ja, es wäre schön, wenn ich IE6 nicht mehr berücksichtigen müsste beim Webseitenentwickeln.
    Die Möglichkeit mit Conditional Comments ist da aber meiner Meinung nach auch die Beste die verschiedenen IE Versionen anzusprechen.

    Wieso willst du das machen? Das bringt doch dem Benutzer der Webseite nichts?
    Aber ja so etwas gibt es.
     
    #12      
x
×
×