Media Queries werden von Safari und IE teilweise ignoriert

[knecht2010]

Hallo zusammen,
ich versuche gerade eine Webseite responsiv zu erstellen. Dazu habe ich eine css datei für die normalen Stylesheets eingebunden und danach eine css datei für die Mediaqueries in der die Änderungen für die verschiedenen Viewports stehen.
Im Firefox, Opera und Chrome passt alles soweit aber im Safari und im IE werden Teile der Media Queries ignoriert.
Füge ich aber die nicht beachteten Styles unten in der CSS für die normalen Styles ein dann funktionieren sie auch im Safari und IE. Sobald ich aber alle Media Queries unten in der Normalen CSS einfüge werden diese Teile von Safrai und IE wieder ignoriert.
Hier ein Link zu der Testseitehttp://www.whs-werbetechnik.de/test/index.html
Danke schon mal
Gruß
Werner

 

[knecht2010]

Nach langem Suchen habe ich es doch noch selbst gefunden, es fehlten zwei schließende Klammern. Obwohl ich gefühlte 1000 mal das Stylsheet durchgegangen bin habe ich die Fehler erst gefunden als ich alles in einem anderen Editor angeschaut habe.
Gruß
Werner

 

[Alex55]

Kann dir Bootstrap und das dazugehörige Grid system empfehlen!

 

[Tronjer]

Mit Sass/Compass wäre das nicht passiert. Da hätte das Stylesheet direkt beim kompilieren einen Fehler geworfen.

Bootstrap würde ich auch empfehlen, das liefert neben dem Grid auch noch diverse Komponenten mit. Ohne BS wirst du für die Navigation auf Mobile Devices Click-Events mit jQuery schreiben müssen.

Nebenbei bemerkt sollte jQuery nicht doppelt eingebunden werden.

 

[Tronjer]

Ach, und noch eins: merge die beiden Stylesheets. Dadurch sparst du einen unnötigen HTTP-Request.

 

[knecht2010]

Danke für die Antworten,
Sass/Compass kenne ich zwar nicht, werde ich aber mal googeln.

Ohne BS wirst du für die Navigation auf Mobile Devices Click-Events mit jQuery schreiben müssen.

Was meinst du damit? Ich bin nicht so bewandert in html und css, ich versuche nur unsere Firmenseite etwas aufzufrischen. Es wäre nett wenn du mir das noch kurz erklären könntest.
Ich hab es auf einem Nokia Lumia 520 und einem Ipad getestet und dort hat die Navigation funktioniert, mehr Geräte hab ich leider nicht ausser noch den Opera Mobile Emulator und auch dort funktioniert alles soweit ich das sehe. Wobei beim IPad ja das Menü noch ausgeklappt ist falls du damit meinst dass das Menü sich beim Iphone nicht öffnet. Diese Navigation habe ich von einer Gallileo Schulungs DVD und dort war nicht davon die Rede dass es auf bestimmten Geräten nicht funktioniert. Es ist ein Fallback eingebaut dass falls Javascript nicht aktiviert ist, das Menü aufgeklappt bleibt.
jQuery ist doppelt? Habe ich auch nicht gemerkt vor lauter probieren, werde ich aber einmal entfernen. Mit Stylesheets mergen meinst du dass ich beide mit Winmerge vergleichen soll um doppelte Angaben zu finden oder? Das werde ich noch tun wenn alles soweit passt. Bootstrap hatte ich mir auch kurz angeschaut aber es ist für das bisschen was ich auf unserer Site brauch halt sehr umfangreich und man hat halt viel css dass ich eigentlich nicht brauche, so glaube ich wenigstens. aber wie gesagt ich mach sowas nicht oft und wenn die Seite fertig ist wirds wieder dauern bis sie wieder größere Änderungen erfährt.
Danke und Gruß
Werner