Antworten auf deine Fragen:
Neues Thema erstellen

Webseiten aussehen in Windows und Mac Browsern unterschiedlich

M

Mausi89

*Mausi*

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
 
Zuletzt bearbeitet:

Myhar

Myhar

Hat es drauf

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

Allgäuflyer

Noch nicht viel geschrieben

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

heikehk

die freundliche Eule

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

Myhar

Hat es drauf

AW: Webseiten aussehen in Windows und Mac Browsern unterschiedlich

Allgäuflyer schrieb:
deswegen mach ich gern reine html-seiten und lediglich navigation in css.
Zum Vergrößern anklicken....

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 )
Zum Vergrößern anklicken....
Willst du dazu wirklich ein Kommentar?
 
M

Mausi89

*Mausi*

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

heikehk

die freundliche Eule

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
 
afr0kalypse

afr0kalypse

Allwissendes Karmameerschweinchen!

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 271 (Mitglieder: 5, Gäste: 266)
Robots: 1.103

Statistik des Forums

Themen
118.564
Beiträge
1.538.064
Mitglieder
67.487
Neuestes Mitglied
MichaelSEivy
Oben