Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Mausi89 · 03.07.2013

Hallo,

ich hab meine Webseite bis jetzt Komplet mit Browser (Safarie, Firefox, Chrome) auf Mac gebaut. Das Aussehen hat überall so ausgesehen, wie es soll.

Jetzt hab ich gedacht testest mal deine Webseite mit Windows Browsern (Firefox, Internet Explorer, Chrome) und da zerhaut es mir mein Menü.

Die Abstände zwischen meinen Menüpunkten, die ich mit Margin deklariert habe, sind unter Windows größer als unter Mac.

Weiß jemand vielleicht warum die Margin abstände unter Windows größer sind als unter Mac?

So sollte es aussehen:

So sieht es unter Windows aus:

Hier, mein CSS dazu:

Code:

@charset "UTF-8";


/* ___________________________ Reset ___________________________ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    letter-spacing: 0;
    overflow: visible;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*body {
    line-height: 1;
}*/

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



/* __________________________________________ Schrift ________________________________________________ */


@font-face {
    font-family: Lucida Grande, Lucida Sans;
    src: url('Schrift/Lucida_Grande/lucidagrande.woff'),
         url('Schrift/Lucida_Grande/lucidagrande.eot'),
         url('Schrift/Lucida_Grande/lucidagrande.ttf'),
         url('Schrift/Lucida_Grande/lucidagrande.otf'),
         url('Schrift/Lucida_Grande/lucidagrande.svg'),
        
         url('Schrift/Lucida_Sans/l_10646.ttf'),
         url('Schrift/Lucida_Sans/lsans.ttf'),
         url('Schrift/Lucida_Sans/lsansd.ttf'),
         url('Schrift/Lucida_Sans/lsansdi.ttf'),
         url('Schrift/Lucida_Sans/lsansi.ttf'),
         url('Schrift/Lucida_Sans/lsansuni.ttf'),
        
         url('Schrift/Lucida_Sans/l_10646.woff'),
         url('Schrift/Lucida_Sans/lsans.woff'),
         url('Schrift/Lucida_Sans/lsansd.woff'),
         url('Schrift/Lucida_Sans/lsansdi.woff'),
         url('Schrift/Lucida_Sans/lsansi.woff'),
         url('Schrift/Lucida_Sans/lsansuni.woff'),
        
         url('Schrift/Lucida_Sans/l_10646.eot'),
         url('Schrift/Lucida_Sans/lsans.eot'),
         url('Schrift/Lucida_Sans/lsansd.eot'),
         url('Schrift/Lucida_Sans/lsansdi.eot'),
         url('Schrift/Lucida_Sans/lsansi.eot'),
         url('Schrift/Lucida_Sans/lsansuni.eot'),
        
         url('Schrift/Lucida_Sans/l_10646.otf'),
         url('Schrift/Lucida_Sans/lsans.otf'),
         url('Schrift/Lucida_Sans/lsansd.otf'),
         url('Schrift/Lucida_Sans/lsansdi.otf'),
         url('Schrift/Lucida_Sans/lsansi.otf'),
         url('Schrift/Lucida_Sans/lsansuni.otf'),
        
         url('Schrift/Lucida_Sans/l_10646.svg'),
         url('Schrift/Lucida_Sans/lsans.svg'),
         url('Schrift/Lucida_Sans/lsansd.svg'),
         url('Schrift/Lucida_Sans/lsansdi.svg'),
         url('Schrift/Lucida_Sans/lsansi.svg'),
         url('Schrift/Lucida_Sans/lsansuni.svg'),
}


/* __________________________________________ Hintergrund __________________________________________ */

body {
    behavior: url(PIE-1.0.0/PIE.htc);
    background-image: url(Bilder/Band_Hinten.png), url(Bilder/hintergrund.jpg);
    background-repeat: repeat-x, repeat;
    background-position: left 135px, left top;
    -pie-background: url('Bilder/Band_Hinten.png') left 135px repeat-x, 
                     url('Bilder/hintergrund.jpg') left top repeat, ;
    overflow: hidden;
    min-width: 100%;
    min-height: 100%;
}


.content { 
    background-image: url(Bilder/Hauptfenster.png);
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    margin: auto;
    height: 841px;
    width: 1021px;
    font-family: Lucida Grande, Lucida Sans;
    font-style: normal; 
}
    


/* __________________________________________ Menü __________________________________________ */


/* ______________ Hauptmenü ______________ */

nav {
    margin: auto;
    width: 763px;
    height: 60px;
    top: 69px;
    position: relative;
}


.menu {
    margin: auto;
    width: 560px;
    height: 60px;
}


nav .ober {
    color: #d5d5d5;
    font-size: 15px;
    text-align: justify;
    text-transform: uppercase;
    list-style: none;
    position: relative;
    top: 9px;
}


nav ul .posi {
    list-style: none;
    line-height: 45px;
    display: inline-block;
}


nav ul .posi1 {
    margin: 0 0 0 46px;
    list-style: none;
    line-height: 45px;
    display: inline-block;
}


nav ul li a {
    text-decoration: none;
    color: #BDBDBD;
}


nav ul li a:focus {
    text-decoration: none;
    color: #9C4C6B;
}


nav ul li a:hover {
    text-decoration: none;
    opacity: 0.5;  
}


nav ul li a:active {
    text-decoration: none;
    color: #9C4C6B;
}

.activ {
    text-decoration: none;
    color: #000000;
}



/* ______________ Untermenü ______________ */

nav .unter {
    position: absolute;
    top: 30px;
    padding: 5px 0 0 0;
    top: -9999px;
    margin: 0;
}


nav ul .sub1 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_mittel_1.jpg);
}


nav ul .sub2 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_mittel_2.jpg);
}


nav ul .sub3 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_mittel_3.jpg);
}


nav ul .sub4 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_mittel_4.jpg);
}


nav ul .sub5 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_lang_1.jpg);
}


nav ul .sub6 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_lang_2.jpg);
}


nav ul .sub7 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_lang_3.jpg);
}


nav ul .sub8 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_lang_4.jpg);
}


nav ul .sub9 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_kurz_1.jpg);
}


nav ul .sub10 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_kurz_2.jpg);
}


nav ul .sub11 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_kurz_3.jpg);
}


nav ul .sub12 {
    float: none;
    margin: 2px 0 0 -15px;
    text-align: left;
    list-style: none;
    background: url(Bilder/subnavi_kurz_4.jpg);
}


.sublink {
    color: #BDBDBD;
    font-size: 13px;
    display: block;
    margin: 0 0 0 0;
    line-height: 24px;
    padding: 0 15px 0 15px;
}


nav ul li:hover .unter {
    top: auto;
}



/* __________________________________________ Content __________________________________________ */


/* ____________ Haupttext ____________ */

.sectiontenor {
    margin: auto;
    width: 763px;
    height: 336px;
    top: 210px;
    position: relative; 
}


.text {
    color: #333333;
    font-family: Lucida Grande, Lucida Sans;
    display: inline-block;
    margin: 26px 0 0 41px;
    width: 320px;
    height: 283px;
}


h1 {
    font-size: 16px;
    font-style: normal;
    line-height: none;
    padding: 0 0 14px 0;
}



p {
    font-size: 12px;
    font-style: normal;
    line-height: 17px;
}


.aufzählung {
    font-size: 12px;
    font-style: normal;
    line-height: 17px;
    margin: 0 0 0 35px;
    list-style-position: outside;
    list-style-type: disc;
}




/* _____________ Bild _____________ */

figure {
    height: 336px;
    width: 338px;
    display: inline-block;
    margin: -113px 0 0 491px;
    padding: 0 0 0 55px;
}



/* __________________________________________ Footer __________________________________________ */

footer {
    margin: auto;
    width: 763px;
    height: 64px;
}


address {
    color: #666666;
    font-size: 12px;
    line-height: normal;
    font-family: Lucida Grande, Lucida Sans;
    font-style: normal;
    list-style: none;
    margin: 19px 0 0 41px;
}


address .posi2 {
    display: inline-block;
}


address .posi3 {
    margin: 0 0 0 56px;
    display: inline-block;
}

Grüße
Mausi89

Myhar · 03.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Zuerst schnapp dir einen HTML Inspektor wie Firebug und analysiere die Seite mal unter Windows, ob auch alle Stile aufs Element angewandt werden. Sollte ja passen, aber lieber mal ausschließen, dass es daran liegt.
Ich denke, es liegt eher am unterschiedlichen Font-Rendering von Mac und Windows. Was du dagegen tun kannst: Keine fixen Höhen+Breiten angeben sondern damit rechnen, dass unterschiedliche Benutzer mit unterschiedlichen Einstellungen (wie in dem Problem mit Win/Mac) daherkommen. Es ist nämlich so, dass User nie die selbe Konfiguration wie man selber verwendet um sich Websites anzusehen.
Was heißt das jetzt konkret für dich: Alle Elemente, die du mit width und height in fixe und starre Container gepresst hast gibst du in flexible Container. Entweder du beschränkst sie in der Breite, dann können sie in der Höhe wachsen oder umgekehrt. Du kannst mit min- und max- width/height arbeiten, aber das starre Grundgerüst, welches du aufgebaut hast, ist nicht wirklich optimal.

Allgäuflyer · 04.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

deswegen mach ich gern reine html-seiten und lediglich navigation in css.
allerdings stellt sich auch immer wieder die frage nach der gesamtgröße. denn einige user haben andere auflösungen. dann kommen natürlich die webseiten bei einer anderen auflösung auch nicht auf den ganzen bildschirm......entweder zu groß, meistens kleiner....
daher auch mac oder windows.
wenn man auf apple arbeitet sollte man gleichzeitig auch nen pc stehen haben um es sofort in einem test-ordner im hintergrund (aus dem server) ansehen zu können. (wie z.b. eine baustelle in flash von mir www.art-of-avalon.de/test )

heikehk · 04.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Hallo Mausi,
das Menu sieht recht ansprechend aus. Ich bin zwar nicht auf eine Lösung gekommen, frage mich aber die Ganze Zeit, warum Du in diesem Fall mit Margin arbeitest. Ich hätte hier spontan ein padding eingestellt. Es geht ja um den Abstand des Elements zur Box in der es angezeigt wird und nicht um den Abstand nach außen. Ich weiß zwar nicht, warum das bei MAC funktioniert, aber ich könnte mir vorstellen, dass das einfach von MAC anders interpretiert wird.
Kann sein, dass ich völlig auf dem Holzweg bin. Aber ich würde kein margin nutzen.

Zum Testen habe ich auf meinem MAC eine vmWare am laufen und das ist optimal zum Testen. Das würde ich mir an Deiner Stelle, falls Du sowas häufiger machst, überlegen.

Alles Liebe
Heike

Myhar · 04.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Allgäuflyer schrieb:
deswegen mach ich gern reine html-seiten und lediglich navigation in css.

Der Satz ergibt keinen Sinn, man kann keine Navigation in CSS machen. Man kann lediglich das Aussehen einzelner Elemente (wie der Navigation) im CSS beeinflussen, "machen" kann man sie nur im HTML.
Betreffend anderer Auflösungen: Deshalb verwendet man auch variable Breiten in Kombination mit media-queries, dann passt sich das Layout an unterschiedliche Displaygrößen automatisch an.

Allgäuflyer schrieb:
www.art-of-avalon.de/test )

Willst du dazu wirklich ein Kommentar?

Mausi89 · 04.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Hallo,

Wegen dem Test auf Mac und Windows, ich hab die VMWare drauf, da ich aber meine Webseite mit PHP erstellt habe konnte ich sie nur mit Xampp oder einer alternative anschauen und diese Programme wollte ich nicht überall in der Arbeit Installieren, hat sich jetzt aber erledigt, da ich es jetzt trotzdem machen musste.

Ich hab Margin genommen weil dann nur meine Menüpunkt aktiv ist, würde ich jetzt Padding nehmen wäre der Abstand dehn ich eingestellt habe auch schon aktiv zum Klicken. Das hab ich nämlich auch schon ausprobiert.

Wegen festen Größen hab ich das Problem mit meinem Untermenü. Dieses lässt beim Aufklappen z.b. bei Kontakt das logo das im Hintergrund ist mit sichtbar werden, damit es so aussieht als würde das Untermenü aus dem weißen Balken geschnitten werden, und wenn das nicht hundertprozentig passt, dann fällt es voll auf.

Ich finde es halt etwas komisch das die anderen Größen von meinem Layout stimmen nur beim Menü nicht.

heikehk · 04.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Versuche mal, dass Du Margin mit padding ersetzt und schau, ob das was ändern würde. Ich könnte mir vorstellen, dass das so ist. Falls dem so ist kann man sich ja Gedanken darüber machen, ob es so schlimm ist, wenn das Menu etwas früher anspricht. Wenn Du einen Hintergrund wechsel dabei machst, fällt ja auf, welcher Menupunkt ausgewählt ist.
Gruß
Heike

PS: nur qualifiziert aus dem Bauchgefühl heraus geraten

heikehk · 12.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

und, hast du es ausprobiert?

afr0kalypse · 12.07.2013

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Geht es um
nav ul .posi1?
auf welches element hast du die klasse definiert? auf <li> oder auf <a> ?
wenn du die klasse auf das li element definierst, kannst du auch mit padding arbeiten. dann ist weiterhin nur dein link klickbar (das <a> element) und sonst nix.
Hier noch ein Link mit den bekanntesten IE Bugs:
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/