sebastian1992: IE 7 Darstellung katastrophal

Hallo Leute,

habe nun mal angefangen, an nem Seiten Layout zu basteln, und als dann die ersten Ansätze fertig wären, dachte ich mir, probier ich es einfach mal im IE 7 aus, dass es große Probleme gibt, damit habe ich nicht gerechnet.

Doch dann traff mich der Schlag, fast du komplette Darstellung war eine Katastrophe.

Mein Code (CSS wird erst bei fertigem Design sinnvoll in verschiedene CSS Dokumente verteilt):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>Goalie-Portal</title>

<style type='text/css'>

*{
margin: 0px;
padding: 0px;
}

html{
background-color: beige;
color: #708090;
font-family: arial;
}

#logo{
font-size: 2em;
color: grey;
margin: 3px;
padding: 3px;
text-decoration: none;
}

#logo a, #logo a:visited, #logo a: active, #logo a:hover{
text-decoration: none;
color: grey;
}

.blau{ color: #B0E0E6; }
.gross{ font-size: 1.5em; }

#navi li{ display:inline; }

#navi{
font-size: 1em;
list-style-type: none;
padding-left: 8px;
width: 50%;
background-color: white;
}

#navi li:before{
content: "»";
padding: 2px;
}

#navi a, #navi a:visited, #navi a:active{
text-decoration: none;
color: #708090;
}

#navi a:hover{
color: orange;
}

</style>

</head>

<body>

<a href='./index' title='Home' id='logo'>
<span class='blau gross'>G</span>oalie <span class='blau gross'>P</span>ortal
</a>

<ul id='navi'>
<li><a href='#' title='Home'>Home</a></li>
<li><a href='#' title='Ausrüstung'>Ausrüstung</a></li>
<li><a href='#' title='Tipps'>Tipps</a></li>
<li><a href='#' title='Videos'>Videos</a></li>
</ul>

</body>

</html>

Man könnte Denken, bei einem Link und einer Liste kann nicht viel verkehrt laufen, jedoch haben beide Designfehler.

Im Link wird trotz deklaration die Farbe auf Blau gesetzt, in der Liste wird der .before content nicht umgesetzt und von der allgemeinen schlechten Darstellung im bezug auf Font glättung vom Browser, an der ich wohl nichts ändern kann, möchte ich garnicht reden.

Wiso macht er so schlimme Darstellungsfehler??

Gruß Sebastian

  1. Hi,

    *{
    margin: 0px;
    padding: 0px;
    }

    schläächte Idee. Es gibt diverse Elemente, die legitimerweise einen (oft browserindividuellen) Abstand insbesondere (aber nicht nur) innen haben - beispielsweise diverse Formularelemente.

    font-family: arial;

    *EXTREMSTST* schlechte Idee. Von der Kleinschreibung einer Schrift mit großem Anfangsbuchstaben mal ganz abgesehen fehlen hier noch mindestens ein oder zwei Alternativschriftarten, zuzüglich der *immer* *unbedingt* erforderlichen generischen Schriftart.

    #logo a, #logo a:visited, #logo a: active, #logo a:hover{

    Der IE hat in diversen Versionen diverse Probleme mit fehlenden Leerzeichen, besonders vor der öffnenden geschweiften Klammer. Darüber hinaus wird er absolut zu Recht diese ungültige Regel ignorieren: Selbst wenn es in Deinem Dokument ein <active>-Element gibt, ist "a:" unbekannt. Was soll das sein, ein Laufwerk?

    .blau{ color: #B0E0E6; }
    .gross{ font-size: 1.5em; }

    Bitte eliminiere diese komplett, absolut und uneingeschränkt sinnlosen Bezeichner vollständig und endgültig.

    #navi li:before{

    Der IE 8 wird das voraussichtlich können, seine Vorgänger stehen da wie der Ochs vorm Berg und fragen sich, was dieser wohl ruft.

    <a href='./index' title='Home' id='logo'>

    Wozu eigentlich die Singlequotitis?

    Man könnte Denken, bei einem Link und einer Liste kann nicht viel verkehrt laufen,

    Du hast noch nicht viel mit dem IE zu tun gehabt, gell?

    Im Link wird trotz deklaration die Farbe auf Blau gesetzt,

    Hierfür konnte ich spontan keinen Grund erkennen, aber behebe erst mal die offensichtlichen Fehler.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      Im Link wird trotz deklaration die Farbe auf Blau gesetzt,

      Hierfür konnte ich spontan keinen Grund erkennen

      grey ist nicht gray - jedenfalls im IE.

      freundliche Grüße
      Ingo

      1. Hi,

        Im Link wird trotz deklaration die Farbe auf Blau gesetzt,

        Hierfür konnte ich spontan keinen Grund erkennen
        grey ist nicht gray - jedenfalls im IE.

        freundliche Grüße
        Ingo

        Denke mal, die beste lösung wäre einfach alle Farben in HEX anzugeben, oder??

        1. Hallo,

          grey ist nicht gray - jedenfalls im IE.
          Denke mal, die beste lösung wäre einfach alle Farben in HEX anzugeben, oder??

          wäre eine gute Alternative - zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).

          So long,
           Martin

          --
          why the heck do you jerk think, that wir ein doppelposting nicht bemerken, wenn you zwischendurch the sprache wechselst?
            (wahsaga)
          1. Hi!

            wäre eine gute Alternative - zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).

            Also ich kann mir unter 'goldenrod' schon was vorstellen... *hust*

            --
            Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
             
            1. Hi!

              wäre eine gute Alternative - zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).

              Also ich kann mir unter 'goldenrod' schon was vorstellen... *hust*

              was stellst du dir unter plum oder tan vor??

              gruß Sebastian

              1. Hi!

                wäre eine gute Alternative - zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).

                Also ich kann mir unter 'goldenrod' schon was vorstellen... *hust*

                was stellst du dir unter plum oder tan vor??

                Weniger exotisches als unter goldenrod... :D

                Naja. Spass beiseite. Wie goldenrod sind das ganz normale Farbnamen. Goldenrod halt bezogen auf die Pflanze namens Goldrute. Plum halt Pflaume und Tan natuerlich was hellbraunes. Was es halt bedeutet.

                Powderblue, Gainsboro (is ne stadt) oder auch Dodgerblue sind da schon etwas nichtssagender. Dodgerblue ist einem vielleicht als Amerikaner mit Baseballwissen ein Begriff.

                --
                Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
                 
            2. Hallo,

              zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).
              Also ich kann mir unter 'goldenrod' schon was vorstellen... *hust*

              ich nicht - aber bei #BE9838 kann ich ablesen, dass das ein "schmutziger" Gelborangeton sein müsste (nur so als Beispiel).

              Ciao,
               Martin

              --
              Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?
              1. Hi!

                zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).
                Also ich kann mir unter 'goldenrod' schon was vorstellen... *hust*

                ich nicht - aber bei #BE9838 kann ich ablesen, dass das ein "schmutziger" Gelborangeton sein müsste (nur so als Beispiel).

                Anspielung verpasst, wuerd ich sagen. ;)

                Aber ja. Mit etwas Uebung kann man sich bei Hexwerten den Farbton schon gut vorstellen.

                --
                Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
                 
          2. Glück auf!

            wäre eine gute Alternative - zumal man dann auch bei etwas ausgefallenen Farben sofort am Quelltext erkennen kann, wie sie ungefähr aussehen könnten, was man bei den teilweise recht abgedrehten Farbbezeichnungen oft nicht kann (wenn man nicht gleichzeitig in der Modebranche tätig ist).

            Oder in der Automobilbranche; Dacia[1] bspw. unterscheidet allen Ernstes zwischen feuerrot und flammenrot... Man kann zwar nen Unterschied erkennen, aber die Bennenungen sind, na ja, IMHO ziemlich albern.

            Gruß,
            der Juve

            [1] Da ist ein Flash auf der Seite, daran kann man's ausprobieren.

    2. Hi,

      Hallo

      *{
      margin: 0px;
      padding: 0px;
      }

      schläächte Idee. Es gibt diverse Elemente, die legitimerweise einen (oft browserindividuellen) Abstand insbesondere (aber nicht nur) innen haben - beispielsweise diverse Formularelemente.

      Das habe ich gemacht, da ich so alle Abstände selbst setzten kann und somit schonmal die unterschiedliche Darstellung in diesem Punkt verringern kann.

      font-family: arial;

      *EXTREMSTST* schlechte Idee. Von der Kleinschreibung einer Schrift mit großem Anfangsbuchstaben mal ganz abgesehen fehlen hier noch mindestens ein oder zwei Alternativschriftarten, zuzüglich der *immer* *unbedingt* erforderlichen generischen Schriftart.

      in font-family: Arial, serif, sans-serif; geändert

      #logo a, #logo a:visited, #logo a: active, #logo a:hover{

      Der IE hat in diversen Versionen diverse Probleme mit fehlenden Leerzeichen, besonders vor der öffnenden geschweiften Klammer. Darüber hinaus wird er absolut zu Recht diese ungültige Regel ignorieren: Selbst wenn es in Deinem Dokument ein <active>-Element gibt, ist "a:" unbekannt. Was soll das sein, ein Laufwerk?

      Das ist eigentlich unsinnig, hatte vorher das logo einen <div> gepackt und vergessen, dass ich, wenn ich es einfach so als <a> mache ja die extra formatierung für die Links entfernen kann, das a: war ein vertipper und sollte eigentlich zusammen sein

      .blau{ color: #B0E0E6; }
      .gross{ font-size: 1.5em; }

      Bitte eliminiere diese komplett, absolut und uneingeschränkt sinnlosen Bezeichner vollständig und endgültig.

      Fält dir ne bessere Idee ein??

      #navi li:before{

      Der IE 8 wird das voraussichtlich können, seine Vorgänger stehen da wie der Ochs vorm Berg und fragen sich, was dieser wohl ruft.

      Das ist schwach, dannn werde ich die wohl einfach so reinschreiben müssen vor die <a> und den Punkt streichen, was ich allerdings sehr schade finde.

      <a href='./index' title='Home' id='logo'>

      Wozu eigentlich die Singlequotitis?

      Die Seite wird im Endeffekt über php laufen und wenn ich es über echo ausgeben sollte, etc. muss ich eh alle in ' oder " ändern, deshalb habe ich mir angewöhnt, sie direkt als ' zu schreiben.

      Man könnte Denken, bei einem Link und einer Liste kann nicht viel verkehrt laufen,

      Du hast noch nicht viel mit dem IE zu tun gehabt, gell?

      Ich habe mich immer gedrückt :)

      Im Link wird trotz deklaration die Farbe auf Blau gesetzt,

      Hierfür konnte ich spontan keinen Grund erkennen, aber behebe erst mal die offensichtlichen Fehler.

      Werde ich machen, vielleicht findet sich ja ne Lösung

      Cheatah

      Sebastian

      1. Hallo,

        in font-family: Arial, serif, sans-serif; geändert

        Bist du dir sicher, dass die Reihenfolge Sinn macht ;-)

        Gruß

      2. Hi,

        schläächte Idee. Es gibt diverse Elemente, die legitimerweise einen (oft browserindividuellen) Abstand insbesondere (aber nicht nur) innen haben - beispielsweise diverse Formularelemente.
        Das habe ich gemacht, da ich so alle Abstände selbst setzten kann und somit schonmal die unterschiedliche Darstellung in diesem Punkt verringern kann.

        nein, Du erhöhst sie. Gerade bei Formularelementen wird die selbe Darstellung durch unterschiedliche Angaben bewirkt.

        in font-family: Arial, serif, sans-serif; geändert

        Also in "Arial, serif", was eine serifenlose respektive (irgend-)eine serifenbehaftete Schriftart ist.

        .blau{ color: #B0E0E6; }
        .gross{ font-size: 1.5em; }
        Fält dir ne bessere Idee ein??

        Ja. Schritt 1: Erstelle den HTML-Code *ohne an die Darstellung zu denken*. Dann ist es weitgehend unmöglich, dass irgend ein Element über eine HTML-Klasse "blau" oder "gross" verfügt.

        Schritt 2: Beende erst mal Schritt 1.

        Schritt 3: Nutze die vorhandene Struktur, um die von Dir gewünschte Darstellung zu erreichen.

        Schritt 4: Gehe *nicht* zurück zu Schritt 1 oder 2.

        Das ist schwach, dannn werde ich die wohl einfach so reinschreiben müssen vor die <a> und den Punkt streichen, was ich allerdings sehr schade finde.

        Nö. Du kannst ältere und unfähigere Browser einfach mit einer für sie bestmöglichen Darstellung versorgen. Diese darf sehr, sehr gerne anders sein als die bei anderen - das ist schließlich einer der Grundpfeiler des World Wide Web.

        <a href='./index' title='Home' id='logo'>
        Wozu eigentlich die Singlequotitis?
        Die Seite wird im Endeffekt über php laufen und wenn ich es über echo ausgeben sollte, etc. muss ich eh alle in ' oder " ändern, deshalb habe ich mir angewöhnt, sie direkt als ' zu schreiben.

        Warum hast Du es Dir nicht einfach umgekehrt angewöhnt? Warum benutzt Du keine Template-Engine, Here-Docs, oder einfach spezifische Ausgabe *nur* der PHP-bezüglichen Daten mittels PHP?

        Du hast noch nicht viel mit dem IE zu tun gehabt, gell?
        Ich habe mich immer gedrückt :)

        Feigling ;-)

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. Hi!

    Im Link wird trotz deklaration die Farbe auf Blau gesetzt, in der Liste wird der .before content nicht umgesetzt und von der allgemeinen schlechten Darstellung im bezug auf Font glättung vom Browser, an der ich wohl nichts ändern kann, möchte ich garnicht reden.

    Hab hier nur nen IE6, aber ich werd trotzdem mal was schreiben:
    #logo a, #logo a:visited, etc haben keine Auswirkungen, weil das Element mit der ID 'logo' keine <a> Elemente enthaelt.
    .before kennt der IE7 wohl genausowenig wie seine Vorgaenger.
    Bei der schlechten Darstellung der Fontglaettung weiss ich nicht genau was Du meinst.

    Wiso macht er so schlimme Darstellungsfehler??

    Weil MS sich nie um gueltige Standards geschert hat.

    --
    Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
     
    1. Hallo,

      Bei der schlechten Darstellung der Fontglaettung weiss ich nicht genau was Du meinst.

      Ich glaube er meint das Subpixel-Antialiasing der IE-Engine. Das ist wirklich gewöhnungsbedürftig, wenn man knackige Schrift gewöhnt ist.

      Gruß

  3. Doch dann traff mich der Schlag, fast du komplette Darstellung war eine Katastrophe.

    Da schuf Gott das Rechteck und die Rechtschreibung...

    mfg Beat

    --
                     /|
      <°)))o><      / |    /|
                ---- _|___/ |     ><o(((°>
               OvVVvO    __ |         ><o(((°>
    <°)))o><  /v    v\/  |
     <°)))o>< ^    ^/_/_         ><o(((°>
               ^^^^/___/
    ><o(((°>    ----       ><o(((°>
       <°)))o><                      ><o(((°>o
    1. Doch dann traff mich der Schlag, fast du komplette Darstellung war eine Katastrophe.

      Da schuf Gott das Rechteck und die Rechtschreibung...

      mfg Beat

      Ich weiß absolut nicht, was du mir damit sagen willst.

  4. So,

    habe die Fehler behoben und das ganze Ding hochgeladen:

    http://goalie-portal.bplaced.net/variante2/

    Wollte mal wissen, wie ihr es findet und ob der Quellcode so gut ist, etc.

    Der 'wirkliche' Inhalt kommt natürlich erst, wenn das Layout steht.

    Gruß Sebastian

    1. http://goalie-portal.bplaced.net/variante2/

        
      <div>  
        <a href='./index' title='Home' id='logo'>  
        
          <span class='blau gross'>G</span>oalie <span class='blau gross'>P</span>ortal  
        </a>  
      </div>  
      
      

      würde ich machen:

        
      <h1>  
        <a href='./index' title='Home' id='logo'>  
        <big class='blau gross'>G</big>oalie <big class='blau gross'>P</big>ortal  
        </a>  
      </h1>  
      
      

      mfg Beat

      --
                       /|
        <°)))o><      / |    /|
                  ---- _|___/ |     ><o(((°>
                 OvVVvO    __ |         ><o(((°>
      <°)))o><  /v    v\/  |
       <°)))o>< ^    ^/_/_         ><o(((°>
                 ^^^^/___/
      ><o(((°>    ----       ><o(((°>
         <°)))o><                      ><o(((°>o
      1. http://goalie-portal.bplaced.net/variante2/

        <div>
          <a href='./index' title='Home' id='logo'>

        <span class='blau gross'>G</span>oalie <span class='blau gross'>P</span>ortal
          </a>
        </div>

        
        >   
        > würde ich machen:  
        > ~~~html
          
        
        > <h1>  
        >   <a href='./index' title='Home' id='logo'>  
        >   <big class='blau gross'>G</big>oalie <big class='blau gross'>P</big>ortal  
        >   </a>  
        > </h1>  
        > 
        
        

        mfg Beat

        es kann sein, dass das stilistisch besser ist, jedoch würde dies doch denn Code unnötig länger machen. So kann ich ja direkt den a tag formatieren und muss nicht erst eine unnötigen Tag öffnen und in dem formatieren, wobei ich dann den Link nochmal extra formatieren muss.

        1. Nabend!

          es kann sein, dass das stilistisch besser ist, jedoch würde dies doch denn Code unnötig länger machen. So kann ich ja direkt den a tag formatieren und muss nicht erst eine unnötigen Tag öffnen und in dem formatieren, wobei ich dann den Link nochmal extra formatieren muss.

          Mich duenkt, er redet wirr.

          Von welchem Extratag sprichst Du hier grad? Beat hat nur Tags ausgetauscht, keine dazugefuegt.

          --
          Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
           
          1. Nabend!

            es kann sein, dass das stilistisch besser ist, jedoch würde dies doch denn Code unnötig länger machen. So kann ich ja direkt den a tag formatieren und muss nicht erst eine unnötigen Tag öffnen und in dem formatieren, wobei ich dann den Link nochmal extra formatieren muss.

            Mich duenkt, er redet wirr.

            Von welchem Extratag sprichst Du hier grad? Beat hat nur Tags ausgetauscht, keine dazugefuegt.

            Ich finde das eine Frechheit, dass ihr mich hier als irre hinstellt. Was ich meine ist, dass ich lieber nur den a tag direkt über die id logo formatiere und wegen der validität nach w3c es in einen id / class losen <div> container packe, als #logo a und alle a ableger + #logo ansich zu formatieren.

            1. Nabend.

              Ich finde das eine Frechheit, dass ihr mich hier als irre hinstellt. Was ich meine ist, dass ich lieber nur den a tag direkt über die id logo formatiere und wegen der validität nach w3c es in einen id / class losen <div> container packe, als #logo a und alle a ableger + #logo ansich zu formatieren.

              Huch?! oO

              Hab ich dich irgendwie auf dem falschen Fuss erwischt? War nicht geplant. Ich hab es auf die HTML Tags bezogen. Wo da jetzt der grosse unterschied im CSS ist, erschliesst sich mir allerdings grad auch nicht.

              Du defnierst doch an dem Link nicht mehr als vorher und ein big anstelle zweier Klassen.

              --
              Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
               
        2. Ich weiss nicht, was du palaverst. Aber hier eine noch besser Variante.

            
          <h1 id=logo>  
          <a href='./index' title='Home'><big>G</big>oalie <big>P</big>ortal</a>  
          </h1>  
          
          

          mfg Beat

          --
                           /|
            <°)))o><      / |    /|
                      ---- _|___/ |     ><o(((°>
                     OvVVvO    __ |         ><o(((°>
          <°)))o><  /v    v\/  |
           <°)))o>< ^    ^/_/_         ><o(((°>
                     ^^^^/___/
          ><o(((°>    ----       ><o(((°>
             <°)))o><                      ><o(((°>o