• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seltsames Browserverhalten

G

gabbalo

Neues Mitglied
Hallöchen zusammen.

Ich bin mir nicht sicher, ob es sich bei meinem Problem nun um eines im html Part oder im CCS Part handelt. Darum poste ich mal in das html Subforum und hoffe das Beste ^^
Wenns nicht passt, kann man das ja sicher verschieben.

Zum Problem:

Ich bastle gerade an einer kleinen Landingpage für eine Domain.
Die Adresse zur Seite ist g a b b a l o . n e t /// D E V - D e p .
Das Problem, welches sich mir stellt ist, das die Seite koreekt funktioniert, solange ich mich im IE 10, FF 15 oder Opera 28 bewege. Wenn ich meinen Chrome 28 starte (der aufmerksame Leser hat festgestellt, das es sich überall um die aktuellsten Versionen handelt ;) ), dann wird das Menü gar nicht mehr dargestellt. Es ist nur noch der statische Banner vorhanden.
Kurioser Weise habe ich bereits zwei Freunde gefragt, dies zu testen, und beide kommen zu ganz anderen Problemen.
Beim einen z.B. gehts im Chrome, dafür im IE und in Opera nicht. Es könnte hier am IE9 liegen (wobei mich ein WorkAround sehr interessieren würde) , aber Opera ist ebenfalls aktuell. Zudem ist es die exakt gleiche Chrome Version.

Ich habe es auch schon mit geleerten Browserdaten versucht und ich drück immer fleissig STRG+F5 für ein cachefreien Reload. Hilft alles nix.

Hier der HTML Code

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>    
<link rel="stylesheet" type="text/css" href="menu_style.css">     
<title>g a b b a l o . n e t  ///  D E V - D e p .</title>    
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">    
</head>
<body>
<div class="menubar">  
<div class="socialstuff">        
<a href="#" data-s="Facebook" class="icon-facebook"></a><span></span>        
<a href="#" data-s="Google+" class="icon-googleplus"></a><span></span>        
<a href="#" data-s="Twitter" class="icon-twitter"></a><span></span>        
<a href="#" data-s="LinkedIn" class="icon-linkedin"></a><span></span>        
<a href="#" data-s="Xing" class="icon-xing"></a><span></span>        
<a href="#" data-s="Soup.IO" class="icon-stackoverflow"></a><span></span>        
<a href="#" data-s="Email me" class="icon-email"></a><span></span>    
</div>    
<h1>g a b b a l o . n e t</h1>
</body>
</html>

Und die CSS

Code: 
/*Schriften-Deklaration*/

@font-face { /* -- Schriften sind im Anhang -- */
    font-family: 'rondo';
    src: url('fonts/rondo.eot?#') format('eot'),
        url('fonts/rondo.svg#rondo') format('svg'),
        url('fonts/rondo.woff') format('woff'),
        url('fonts/rondo.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
}


@font-face { /* -- Schriften sind im Anhang -- */
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('fonts/Great Vibes'), local('fonts/GreatVibes-Regular'), url(fonts/great_vibes-regular.woff) format('woff');
}


html, body {margin:0;text-align:center;background:#FFF;}


h1 {
  display:block;
  background:#00B3B3;
  padding:5px;
  margin:0;
  position:relative;
  border-top:1px solid #007474;
  border-bottom:1px solid #007474;
  box-shadow:0 1px 2px rgba(0,0,0,0.7);
}
.menubar {
  font-family: 'Great Vibes';
  cursive;color:white;
  position:fixed;
  z-index:10;
  width:100%;
  top:1%;
}
.shadow {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-size:100% 100%;
}
.socialstuff {position:relative;margin:0 0 -20px 0;}
.menubar:hover .socialstuff, .menubar .onload  {margin:0 0 15px 0;}
.menubar:hover .socialstuff a, .menubar .onload a { /* Icons bei Menü-Mouseover */
    margin:0 10px;
    font-size:50px; 
    color:#00B3B3; }
.socialstuff a {
  display:inline-block;
  position:relative;
  margin:0 5px;
  color:#00B3B3; /* Schriftfarbe Normal */
  text-decoration:none;
  font-size:40px;
}
.socialstuff, .socialstuff a {
  transition:all .5s cubic-bezier(.5,1.3,.2,1);
  -webkit-transition:all .5s cubic-bezier(.4,1.6,.2,1);
  -moz-transition:all .5s cubic-bezier(.5,1.3,.2,1);
  -o-transition:all .5s cubic-bezier(.5,1.3,.2,1);
  -ms-transition:all .5s cubic-bezier(.5,1.3,.2,1);
}
.socialstuff a:hover {
  color:#A60000 !important; /* Schriftfarbe Icon Mouseover */
}
.socialstuff a:hover span:before {
  content:"";
  display:block;
  position:absolute;
  width:0;
  height:0;
  border-right:10px solid transparent;
  border-top:6px solid white;
  top:-13px;
  left:16px;
  color: #00B3B3 /* !!! UNBEKANNTE FARBE !!! */
  z-index:1;
}
.socialstuff a:hover:after {
  content:attr(data-s);
  padding:3px 8px;
  font-family:arial, san-serif;
  font-size:14px;
  color:#343434; /* Schriftfarbe Textbox Mouseover */
  text-shadow:0 1px rgba(255,255,255,.7);
  position:absolute;
  left:30px;
  top:52px;
  white-space:nowrap;
  z-index:1;
  border-radius:0px 4px 4px 4px;
  background:white;
  box-shadow:-1px 5px 15px rgba(0,0,0,0.6);
}


/* Icon-Definitionen */


[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'rondo';
    font-style: normal;
    speak: none;
    /* Enable Ligatures */
    -webkit-font-feature-settings:"liga","dlig";
    -moz-font-feature-settings:"liga=1, dlig=1";
    -moz-font-feature-settings:"liga","dlig";
    -ms-font-feature-settings:"liga","dlig";
    -o-font-feature-settings:"liga","dlig";
    font-feature-settings:"liga","dlig";
    text-rendering:optimizeLegibility;
    }
}


[data-s="Email me"], [data-s="Soup.IO"], [data-s="Xing"], [data-s="LinkedIn"], [data-s="Twitter"], [data-s="Google+"], [data-s="Facebook"] {
    font-family: 'Arial';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-email:before {
    content: "\65\6d\61\69\6c";
}
.icon-stackoverflow:before {
    content: "\73\74\61\63\6b\6f\76\65\72\66\6c\6f\77";
}
.icon-xing:before {
    content: "\78\69\6e\67";
}
.icon-linkedin:before {
    content: "\6c\69\6e\6b\65\64\69\6e";
}
.icon-twitter:before {
    content: "\74\77\69\74\74\65\72";
}
.icon-googleplus:before {
    content: "\67\6f\6f\67\6c\65\70\6c\75\73";
}
.icon-facebook:before {
    content: "\66\61\63\65\62\6f\6f\6b";
}
}

Hat hier jemand eine Idee, woran es liegen kann? Und vor allem, wie man das auch wieder beheben kann xD
 

Anhänge

gabbalo schrieb:
solange ich mich im IE 10, FF 15 oder Opera 28 bewege. Wenn ich meinen Chrome 28 starte (der aufmerksame Leser hat festgestellt, das es sich überall um die aktuellsten Versionen handelt ;) )
Zum Vergrößern anklicken....

Nein. IE10 ist aktuell, FF22 wäre aktuell (nicht 15), Opera hat auch noch nicht die 28 erreicht.

Der HTML-Code deiner Seite ist fehlerhaft, was durchaus ein Grund für Fehldarstellungen sein kann:
[Invalid] Markup Validation of http://www.gabbalo.net/dev/ - W3C Markup Validator

Besonders fragwürdig ist, dass Du den XHTML-Doctype angibst, aber in HTML5 schreibst. Entscheide dich für einen Standard.
 
Du hast Recht, was die Versionsnummer angeht ... da habe ich einiges durcheinander gebracht. Es sind auf jeden Fall alle Browser auf dem aktuellsten Stand :)
Bei mir zu Hause hat die Seite auch im Chrome funktioniert, ich vermute also, das es weniger an der Seite sondern eher am Chrome hier auf Arbeit liegen könnte.

Was den DOCTYPE angeht, so bevorzuge ich es, keinen DOCTYPE zu verwenden, der noch gar nicht als entsprechender Standard eingeführt wurde, und somit ggf. Probleme auf nicht aktuellen Browsern hervorrufen könnte. Wie sehen das die alten Hasen hier? Als Anfänger habe ich sicherlich weniger Ahnung davon als Andere ;)

Ich habe jetzt im Validator alle bis auf einen Fehler ausgemerzt, bei dem habe ich jedoch keine Ahnung, wie ich den weg bekommen kann :/
Any ideas?
 
gabbalo schrieb:
Was den DOCTYPE angeht, so bevorzuge ich es, keinen DOCTYPE zu verwenden, der noch gar nicht als entsprechender Standard eingeführt wurde, und somit ggf. Probleme auf nicht aktuellen Browsern hervorrufen könnte.
Zum Vergrößern anklicken....

Was sind für dich "alte" Browser? Statistisch gesehen fängt das schon beim IE8 an, vor allem wenn man bedenkt, dass ab nächstem Jahr für den Browser seitens Microsoft kein Support mehr geleistet wird. Andere Browserhersteller haben andere Updateverfahren, weshalb es sich kaum noch lohnt auch solche alten Browser zu berücksichtigen.

Gegen HTML5 (insbesondere den Doctype) spricht daher eigentlich nichts mehr. Nur gegen die Verwendung einzelner HTML5-spezifischer Elemente müsste man sich ggfs. Sorgen machen, da deren Unterstützung durchaus unterschiedlich ist. Das betrifft aber ausschließlich Formularfelder wie "date".

Ich habe jetzt im Validator alle bis auf einen Fehler ausgemerzt, bei dem habe ich jedoch keine Ahnung, wie ich den weg bekommen kann :/
Any ideas?
Zum Vergrößern anklicken....

Ich sehe keinen Fehler mehr.

bdt600 schrieb:
Einspruch, euer Ehren ;) FF 23 ist aktuell :D
Zum Vergrößern anklicken....

Hellsehen kann ich noch nicht ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben