|
|||
CSS Layout: Probleme mit Mac IE und Safari
Hallo liebe Forumler,
leider bin ich noch nicht ganz so firm im Layouten mit CSS. Aktuell habe ich Probleme eine Layout-Varinate für den Mac (unter Win und Linux, ist alles mit anderen CSS schon so, wie es sein soll) korrekt hinzubekommen. Liegt zum Teil auch daran, dass ich keine eigene Testumgebung für Mac habe. Unten der Code, normal habe ich alle CSS extern und hier hab ich alles ein bisschen reduziert. Das Problem ist einmal das IE Mac die div mehrspalten nicht nebeneinander darstellt und zum zweiten ist das ganze nicht zentriert. Wie sieht das ganze denn in Safari aus? Wahrscheinlich komplett zerschossen. Bin für jede Hilfe dankbar Jochen Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Seitentitel</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { font-family:"Times New Roman", Times, serif; font-size:1em; background-color:#000033; color: #000099; line-height:1.1em; letter-spacing:0.02em; } a:link, a:visited, a:active, a:hover { text-decoration:none; font-weight:bold; color:#000099; } a:active, a:hover { text-decoration:underline; } #wrapper{ width:780px; margin:0px auto 0px; text-align:left; background-image: url(akademie-images/back_blau_basis.gif); background-repeat:repeat-y; background-position: center 0px; min-height:580px; } #navigation{ color:#ffffff; background:#000099; margin:0; float:left; width:106px; height:580px; border-right: 0px solid #FFFFFF;} #content{ width:669px; height:496px; margin:0 0px 0 105px; padding:0px; color: #000099; border-left: 0px solid #FFFFFF; border-right: 0px solid #FFFFFF; } #subnavigation { height:30px; width:672px; float:right; background-color: #000099; border-top: 0px solid #000000; border-right: 0px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; color: #FFFFFF; } #subtitle { height:54px; width:672px; float:right; background-color:#3366CC; border-top: 0px solid #000000; border-right: 0px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1.4em; color: #FFFFFF; letter-spacing: 0.1em; font-weight: bold; line-height: 2.2em; } #unsichtbar { width: 780px; height: 20px; margin:0px auto 0px; background-color: #000033; } #spalte { width:660px; float:right; border-bottom: 1px solid #FFFFFF; padding-top: 0px; padding-left: 10px; padding-right: 10px; } #mehrspalten { float:left; padding-left: 10px; padding-top: 10px; background-color:#C7CDE7; } p { margin: 0.1em; padding: 0.1em; } --> </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id=unsichtbar></div> <div id="wrapper"> <div id="navigation" style="clear:right;"> <p style="margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;">Hier steht die Navigation</p> </div> <div id="subnavigation"> <p style="margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;">Hier steht die Subnavi</p> </div> <div id="subtitle"> <div align="center">Überschrift</div> </div> <div id="content"> <div id="mehrspalten" style="width:47%;">[img]bild_dummy.jpg[/img] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat.</P> </div> <div id="mehrspalten" style="width:47%;">[img]bild_dummy.jpg[/img] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat.</P> </div> <div id="spalte"></div> </div> <div id="unsichtbar" style="height: 0px; clear:both;"></div> </div> <div id="unsichtbar" style="height: 20px;"></div> </body> </html> |
Sponsored Links |
|
|||
Warum sollte das ganze in Safari zerschossen aussehen? Bis auf ein paar kleine Ungereimtheiten, unterscheidet sich die Safari-Engine (welche auf KHTML basiert) in der Darstellung nicht sehr stark von der Gecko-Engine.
Den Mac IE brauchst du glaube nicht zu testen, weil den glaube ich keiner mehr benutzt; er wird auch nicht mehr weiterentwickelt. |
Sponsored Links |
|
|||
Zitat:
Safari scheint Probleme mit der Redefinition von CSS-Eigenschaften zu haben, die per Kurzschreibweise deklariert wurden: Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> /*<![CDATA[*/ <!-- p { font:normal normal 12pt/16pt arial,verdana,sans-serif; } p { font-weight:bold; } --> /*]]>*/ </style> </head> <body> <p>Test</p> </body> </html> Den Text im P kann man mit der Maus markieren, aber angezeigt wird er nicht. Dumm für Leute, die wie ich sehr ausgiebigen Gebrauch von der Kurzschreibweise machen. P.S. Den Safari 3 Public Beta kann man sich jetzt auch für Windoof herunterladen: Apple - Safari 3 Public Beta - Download
__________________
Es gibt Menschen, die gar nicht yrren, weil sie sich nichts Vernünftiges vorsetzen. |
|
||||
Zitat:
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
@fricca: Ich benutze den neuen Beta 3.0 für Windows
@BlackHawk: Die Screenshots für die Vesion 2.2 auf BrowsrCamp liefern das gleiche Ergebnis wie der Beta. Ich möchte den Safari ja nicht madig machen. Unter Umständen sieht es ja am Mac alles toll aus.
__________________
Es gibt Menschen, die gar nicht yrren, weil sie sich nichts Vernünftiges vorsetzen. |
|
|||
Dass die Public Beta besonders auf nicht-englischsprachigen Systemen massive Probleme hat, haben schon viele festgestellt.
Es hat keinen Sinn, sich jetzt über diese Fehler Gedanken zu machen - ganz besonders lassen sich daraus keine Rückschlüsse auf "den Safari" ziehen. Warte auf die Final, ehe du dich ereiferst. BTW: Mein Safari 2.0.2 unter OSX hat keine Probleme mit deinem Code. |
|
|||
Das freut mich zu hören.
Den Beta habe ich seit 3 Stunden auf dem Rechner und er ist mir schon zweimal abgestürzt - bin aber trotzdem froh, das ich ihn habe. Bis jetzt war ich immer allein auf die Screenshots von browsrcamp.com angewiesen, und das macht echt keinen Spaß, seine CSS so umständlich zu testen. Anscheinend kann man sich aber nicht so 100% auf die Darstellung verlassen, wenn der Safari nicht unter OSX läuft. Würde mich interessieren, warum die Testergebnisse von meinem Code auf browsrcamp dann so aussehen, da läuft es wohl auf einem Mac. Kann man denen denn auch nicht trauen?
__________________
Es gibt Menschen, die gar nicht yrren, weil sie sich nichts Vernünftiges vorsetzen. Geändert von Yrr (12.06.2007 um 19:17 Uhr) Grund: edit: kleine Ergänzung (Mac) zur Verdeutlichung |
|
|||
Zitat:
Zitat:
Zitat:
|
Sponsored Links |
|
|||
Ok, da habe ich mich etwas falsch ausgedrückt, klar habe ich da auch schon getestet.
Schade, dass man den Beta wohl vergessen muss.
__________________
Es gibt Menschen, die gar nicht yrren, weil sie sich nichts Vernünftiges vorsetzen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tool in CSS Layout einbauen | chris_54 | CSS | 10 | 07.11.2013 22:23 |
Probleme mit Safari und einem CSS Menü | webfabrik | CSS | 4 | 08.01.2008 12:43 |
3 Zeilen Layout CSS macht Probleme | SimonT | CSS | 2 | 15.12.2006 15:08 |
CSS Layout Probleme | ViktorR | CSS | 6 | 03.12.2006 16:15 |
Navigations CSS - am Mac schön, auf dem PC kaputt | Spider24 | CSS | 7 | 10.03.2006 13:19 |