{"id":1624,"date":"2009-08-03T13:07:49","date_gmt":"2009-08-03T11:07:49","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=1624"},"modified":"2017-12-03T11:06:32","modified_gmt":"2017-12-03T09:06:32","slug":"safari-problem-mit-3-spaltigem-layout-safari-hack","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2009\/08\/safari-problem-mit-3-spaltigem-layout-safari-hack\/","title":{"rendered":"Safari Problem mit 3-spaltigem Layout &#8211; Safari hack"},"content":{"rendered":"<p><strong>Kurz notiert:<\/strong> Auf einer Typolight-Installation mit einem flexiblem 3-spaltigem Layout wollte Safari wohl nicht so, wie ich es wollte. Die beiden \u00e4u\u00dferen Spalten floaten, die mittlere schiebt sich dazwischen. F\u00fcr #main gibt man i.d.R. keine Breite an, dadurch schiebt sich das Layout bei 1024 an sich gut zusammen. Nicht so jedoch beim Safari-Browser &#8211; der stellte nur die H\u00e4lfte der Breite von #main dar.<br \/>\nDer Grund: Safari braucht hier f\u00fcr #main &#8211; anscheinend &#8211; eine Breitenangabe, in diesem Fall 60%. Damit waren aber sowohl FF als auch IE gemeinschaftlich nicht einverstanden. Frage war jetzt wie ich die 60% nur f\u00fcr den Safari verf\u00fcgbar mache?<\/p>\n<p>L\u00f6sung: <a href=\"http:\/\/www.bongard.net\/blog\/2007\/05\/18\/css-hacks_safari-icab-ie5_mac\/\">http:\/\/www.bongard.net\/blog\/2007\/05\/18\/css-hacks_safari-icab-ie5_mac\/<\/a><\/p>\n<p>im .css zuerst #main {width:60%;} notieren und dann <strong>nachfolgend<\/strong> \u00fcberschreiben mit {width: auto;#} Die Raute nach dem Semikolon bewirkt, dass Safari diese Notierung ignoriert und somit seine 60% Breite bekommt.<\/p>\n<p>Edit: nachdem es erst so schien, dass das mit dem Hack klappt, war es dann aber doch nicht so. Da ich den Safari eigentlich von der Seite gar nicht kenne, bin ich dann mal davon ausgegangen, dass ein anderer Fehler im CSS sein muss. Sieht so aus, dass es das overflow:hidden; f\u00fcr #main war. Nachdem ich das entfernt hatte, sieht alles ok aus. Overflow:hidden ist eben auch kein Allheilmittel und mit Vorsicht zu genie\u00dfen. Fragt sich jetzt nur, warum das overflow drin war und warum es hineingekommen ist &#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kurz notiert: Auf einer Typolight-Installation mit einem flexiblem 3-spaltigem Layout wollte Safari wohl nicht so, wie ich es wollte. Die beiden \u00e4u\u00dferen Spalten floaten, die mittlere schiebt sich dazwischen. F\u00fcr #main gibt man i.d.R. keine Breite an, dadurch schiebt sich das Layout bei 1024 an sich gut zusammen. Nicht so jedoch beim Safari-Browser &#8211; der  &#8230; <a title=\"Safari Problem mit 3-spaltigem Layout &#8211; Safari hack\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2009\/08\/safari-problem-mit-3-spaltigem-layout-safari-hack\/\" aria-label=\"Mehr Informationen \u00fcber Safari Problem mit 3-spaltigem Layout &#8211; Safari hack\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[93,360,408,409],"yst_prominent_words":[],"class_list":["post-1624","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-contao","tag-typolight","tag-safari","tag-safari-hack"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1624"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":4012,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1624\/revisions\/4012"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1624"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}