Seite im Broweservergleich

revils · 18. April 2011

Hey Leute,

nun bin ich auch soweit und wollte mal fragen wie sich meine Seite in euren Browsern verhält.

Bild im Firefox 4
[Blockierte Grafik: http://img580.imageshack.us/img580/9809/unbenanntli.jpg]

Wichtig ist mir zu wissen wie sie im IE angezeigt wird. Da ich selbst kein IE benutze ist mir die Möglichkeit dies zu sehen nicht gegeben.

Dann kommt auch schon die Frage:

Wie oder was muss ich in meiner CSS ändern um das Design im IE so aussehen zu lassen wie im Firefox?

CSS

Code

html,




#seitenbegrenzung   {
                        margin: 0 auto;             /* Zentrierung mitte */     
                        max-width: 1300px;
                        min-width: 900px;
                        width: 100%;                                
                    }




img {
        border: 0;
    }







/* Textstyle, Hintergrund allgemein */
body    {                                     
            font-family: Times;
            font-size: 16px;             
            background-color: black;
            color: white;                      
        }




h1  {
        font-family: Palace Script MT;
        font-size: 72px;
        font-weight: lighter;
    }




h2  {
        font-weight: lighter;
    }




h4  {
        font-weight: lighter;
        font-size: 20px;
    }




#kopfbereich    {
                    padding: 10px;
                    background-color: black;
                    color: white; 
                }







/*Fußzeile definieren*/                
#fusszeile      {                           
                    position: relative;  
                    height: 20px;
                    margin: 0 auto;                     
                    text-align: center; 
                    font-size: 11px; 
                    color: #808080; 
                    max-width: 1140px;
                    min-width: 900px;
                    width: 100%;  

                }




#inhalt     {
                background-color: black;
                color: white;
                margin-left: 160px;
                padding: 10px;
                margin-top: 2px;
                border-style: solid;
                border-width: thin;
                border-color: #808080; 
            }




#eintrag    {
                background-color: black;
                color: white;
                margin-left: 160px;
                padding: 10px;
                margin-top: 2px;
                border-style: solid;
                border-width: thin;
                border-color: #808080;
            }

#video  {
            background-color: black;
            color: white;
            text-align: center;
            padding: 10px;
            border: none;
        }




#steuerung  {
                float: left;
                width:150px;
                padding: 2px;
                margin-top: 2px;
                background-color: black;
                border-style: solid;
                border-width: thin;
                border-color: #808080;
            }




/*Navigation mit Dropdownmenü*/




* {margin: 0; padding: 0;}




/* Grundkram, also Design der Navi,.. */
ul#navi {
        list-style: none;
        font-size: 15px;
        }




/* Wie soll ein normales Listenelement aussehen?
* und natÃ¼rlich nach Links gefloatet, damit die neben einander liegen */
ul#navi li  {
            float: left;
            background: black;            
            }




/* Die Hyperlinks
* Display: block; damit auch schÃ¶n die gesamte FlÃ¤che der <li> anklickbar ist */
 ul#navi li a   {
                display: block;
                padding: 3px 30px;
                color: white;
                text-decoration: none;
                font-size: 15px;
                }




/* Das AufklappmenÃ¼
* Wichtig ist hier, dass normal display: none; ist,
* damit wir das spÃ¤ter per hover einblenden kÃ¶nnen */
ul#navi li ul   {
                display: none;
                list-style: none;
                position: relative;
                padding: 3px 30px;
                }




/* Aussehen der unterpunkte verÃ¤ndern
* float: none; damit diese Punkte untereinander angezeigt werden
* (Der oben definierte Stylekram muss ggf. hier Ã¼berschrieben werden) */
ul#navi li ul li    {
                    float: none;
                    border: none;
                    font-weight: 500;
                    font-size: large;
                    }




/* Die Hyperlinks in der Subnavi */
ul#navi li ul li a  {
                    float: none;
                    padding: 5px 10px;
                    }




/* Die eigentliche Aufklappfunktion:
* Wenn ein Listenelement Ã¼berfahren wird,
* soll das sich darin befindliche <ul> angezeigt werden
* <Das ist die eigentliche Kustn bei dem ganzen xD> */
ul#navi li:hover ul {
                    display: block;
                    }

Alles anzeigen

neuling11 · 19. April 2011

Hallo,

es gibt Portable Versionen von (fast) allen Browsern.
Als "Besitzer einer Homepage" kommt man nicht rum mind. 2 Browser zu haben.
Außerdem ist der IE ja eh auf allen Windows OS schon vorinstalliert...

Hier mal ein Bild vom Ie8 im Kompatibilitätsmodus (verhält sich wie Ie7/Ie6):
[attachment=0]riens.jpg[/attachment]

Ich könnte Dir später gerne auch noch ein paar Bilder mit Linux posten,
da sich dort oftmals andere Schriften drauf sind.

Was mir spontan auffält, sind die Links unten,
denen solltest du eine Farbe vergeben,
da der Browser sonste die Standartfarbe vergibt.
Die ist beim Ff ein normalhelles Blau, kann man noch lesen,
aber beim IE ein sehr dunkles Blau.

Da der Rahmen beim IE ein wenig dicker ausfällt,
würde ich beim border anstatt

Code

#inhalt     {
                background-color: black;
                color: white;
                margin-left: 160px;
                padding: 10px;
                margin-top: 2px;
                border-style: solid;
                border-width: thin;
                border-color: #808080;
            }

das machen:

Code

#inhalt     {
                background-color: black;
                color: white;
                margin-left: 160px;
                padding: 10px;
                margin-top: 2px;
                border: 1px/*breite/dicke*/ solid/*Borderart*/ #808080/*farbe*/;

            }

PS: Sehr zu emfehlen ist übrigens browsershots.org .

Sören · 19. April 2011

Zum Testen der IE-Versionen ist der IETester zu empfehlen.

Da hast du alle IE-Versionen von 5 bis 8.

revils · 19. April 2011

Hmm..naja. IE hab ich bei mir deaktiviert...

Ist diese kleine Änderung in der "#inhalt" so groß?
Das wäre ja krass.

Nun bleibt noch offen wie ich das dann mit den Bereichsüberschriften machen kann...

Ist bei IE "Arial" und sollte aber wie im Firefox "Palace Script MT"

Sarkkan · 19. April 2011

Gucke du hia: <a class="postlink" href="http://www.font-face.com/#green_content">http://www.font-face.com/#green_content</a>
Un dazu empfiehlt sich noch: <a class="postlink" href="http://www.google.com/webfonts">http://www.google.com/webfonts</a> (Da bekommt jeder Browser seinen richtigen Schriftart-Typ)

revils · 19. April 2011

Zitat von "Sarkkan"

...(Da bekommt jeder Browser seinen richtigen Schriftart-Typ)

Ja, nur nicht den, den ich will

Sarkkan · 19. April 2011

Ging da gerade auch mehr um den Dateityp

revils · 19. April 2011

Krass, font-face wurde gehacked^^

Trotzdem verstehe ich noch nicht so ganz wie das mit

@font-face gehen soll.
Kann ich nicht einfach den Schrifttyp als Datei auf den Server laden und wenn jemand mit dem IE auf meine Seite geht
ihn darüber laden?
Wie bei der Captcha-Clock

Sarkkan · 19. April 2011

Beim Captcha generiert der Server ein Bild.
Du musst dort also nur den Schrifttypen verwenden, der der Server versteht.

Der IE aber ist ein Dr**** Browser, der nur einen bestimmten Font-Dateityp mag.
Alles andere wird Arial o.Ä. angezeigt

revils · 19. April 2011

ICh mag IE auch nicht...

Seite im Broweservergleich

Jetzt mitmachen!

Teilen