Safari – Fehler in der Darstellung

nonpareille8 · 24.11.2009

Hallo,

ich verzweifle bald.

Habe eine Website erstellt.
Sie funktioniert wunderbar in FF, Opera und Camino.

Nur Safari bildet die Ausnahme.
Beim Verkleinern oder Vergrößern (Apfel- bzw. Apfel +)
zerhackt Safari 4.04 die Zeilenabstände, verschiebt Textblöcke nach Lust und Laune.

Gibt es dafür irgendwelche Hacks ?

Atarimaster · 24.11.2009

Vermutlich hängt das irgendwie mit den CSS zusammen – ohne den Quellcode der Seite kann aber niemand die genaue Ursache ausmachen.

nonpareille8 · 24.11.2009

Atarimaster schrieb:
Vermutlich hängt das irgendwie mit den CSS zusammen – ohne den Quellcode der Seite kann aber niemand die genaue Ursache ausmachen.

Schon verständlich, aber die Seite ist noch nicht veröffentlicht.
Deshalb will ich den Code auch nicht hier einstellen...

Womit könnte es denn zusammenhängen ?

Galanos · 24.11.2009

Am Dokumenttyp (HTML-, XHTML- oder XML-Version, Strict oder Transitional), an Floats, absoluter oder relativer Positionierung, am Versuch, pixelgenaue Layouts zu bauen, aber viele variable Elemente zu ignorieren (mein Tipp) und an vielem, vielem mehr kann es liegen.

Sorry, aber schmeiss einfach deine Inhalte raus und stelle die Quelltexte hier offen, sonst kann dir niemand helfen. Evtl. kann man anhand eines Screenshots mit geschwaerzten Bildern und Blindtext "genauere" Vermutungen anstellen.

nonpareille8 · 24.11.2009

Danke schonmal vorab für die Tipps.

Ich schaue mal, was sich machen lässt

Der Code ist jedenfalls validiert und (fast) fehlerfrei.

nonpareille8 · 29.11.2009

Hallo,

bitte dringend um Hilfe, ich habe verzweifelt Stunden nach
dem Fehler gesucht – vergeblich

Hier die Index.html (index_test.html)

<?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" xml:lang="de" lang="de">
<head>
<title>test.de</title>
<link rel="stylesheet" type="text/css" href="test.css" media="screen"></link>
<link rel="stylesheet" href="test.css" type="text/css" />


</head>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<img src="../images/test.gif" height="194" width="956" alt="test.gif" title="Headline und Logo" />
</div>


<div id="Navigation">
<ul>
<li id="navi01"><a href="test.html" title="Test">Test</a></li>

</ul>
</div> 
<div id="linke_spalte">
<p>
<img src="../images/test_2.jpg" height="146" width="172" alt="test_2.jpg" title="test" />
</p>
</div> 
<h3 class="test"><strong>Webdesign ist ein komplexes Ding <br />da
<span>eine korrekte CSS-Technik</span></a>
einiges an Erfahrung <br />benötigt.
</strong></h3>
<div id="Inhalt">
<h1>Leider funktioniert diese Seite<br />
nicht so wie sie soll
</h1>
<h3>Perem hitinve rferuptatus, sequam, te re magnihil imos eatem faccae exerempore,</h3><br />
<h3>conemquias ducipis coratquam, ad quamus untor secaborepero que voluptatus</h3>
<br />
<h3>doleser chicitatis adi re, se voluptam rem quod quunduciis voluptur minihitiscit</h3><br />
<h3>mosandebis reicates dolupta tempell ignihitam qui untis nimagnihil in ratempostrum volorit empello entium aut a qui omnis delest accat.</h3>
<br />
<h3>suntur, cullistrume con non ni quos sectoreperum earum niscitiuria consequos atur aped mintio cus et et et, adicias <br />
plibusam explit, audit auditio moditaquo min recum reris delibusantem eum quam, offictis
</h3>
</div> 

<table id="Abb" width="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../images/test_03.png" width="110" height="237" alt="test" />
</td>
</tr>
<tr>
<td>
<a href="xxx.html"><img src="../images/test_04.png" width="110" height="23" alt="test" /></a>
</td>
</tr>
</table>

<div id="menue">
<ul>
<li><a href="index.html">xxxxx</a></li>
<li><a href="xxx.html">xxxx</a></li>
<li><a href="xxx.html">xxx</a></li>
<li><a href="xxx.html">xx</a></li>
<li><a href="xxx.html">x</a></li>
</ul>
</div> 

</div>

</body>

</html>

und hier das Stylesheet dazu (test.css)

/* ==========================
1. Kalibrierung
============================= */

* { padding: 0; margin: 0; }

h1, h2, p, ol, ul { margin-bottom: 1em; }
ol, ul { margin-bottom: 0; }

/* Tab */
{ border-collapse:collapse;
border-spacing: 0;
}

img {border: 0;}

/* ==========================
2. Allgemeine Styles
============================= */

body {
background-color: #fafafa;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

/* =========================
Klassen, Spans und ID’s */

.pa { margin-top: -0.6em;}

span { color: #c8001e;}

.test {
position: relative;
margin-left: 254px;
margin-top: 286px;
width: 50%;
line-height: 1.32em;
font-weight: 400;
font-size: 1.18em;
color: #c8001e;
}

/*hr.footer {
width: 936px;
color: #e6e6e6;
border-left-color: #e6e6e6;
border-left-style: solid;
border-left-width: 12px;
border-top-style: solid;
border-top-width: 1px;
position: relative;
margin-left: -345px;
margin-top: 85px;
} */

#wrapper {
width: 956px;
margin: 0px auto;
}

#kopfbereich {
padding-top: 8px;

}

#linke_spalte {
position: absolute;
margin-top: 25px;
margin-left: 35px;
}

#Inhalt {
position: relative;
margin-top: -322px;
margin-left: 254px;
margin-right: 225px;
}

h1 {
color: #141414;
font-family: verdana;
font-size: 1.45em;
font-weight: bold;
line-height: 1.34em;
}

h2 {
/* color: #c8001e;
font-family: times;
font-variant: small-caps;
font-weight: 500;
letter-spacing: 0.13em;*/
font-family: verdana;
line-height: 1.32em;
}

h3 {
font-weight: normal;
font-size: 1.08em;
line-height: 1.22em;
margin-top: -.4em;
margin-bottom: -.1em;
}

#Abb {
float: right;
margin-right: 20px;
margin-top: -280px;
width: 150px;
}

strong.a { font-size: .98em;
color: #323232;
}

/* ==========================
4. Navigation
============================= */

#Navigation li {
display: inline;
list-style-type: none;
position: relative;
top: -1px;
left: 95px;
margin-right: 35px;
margin-left: 35px;
}

#Navigation ul {
background-position:left;
left: 40px;
width: 880px;
background-image: url(../images/navi.jpg);
background-repeat: No-Repeat;
margin-top: 10px;
padding-bottom: 10px; padding-left: 5px; padding-right: 5px; padding-top: 8px;
list-style-type: none;
}

#menue {
float: left;
font-size: 10px;
margin-left: 5px;
margin-top: 145px;
width: 500px;
}

#menue ul {
list-style-type: none;
}

#menue ul li {
float: left; border-right: 1px solid #919191;
}

#menue ul li a {
color: #919191; padding: 0px 4px 0px 6px; text-decoration: none;
}

a {
text-decoration: none;
outline: none;
}

a:link { color: #ffffff; }

a:visited { color: #ffffff; }
a:hover, a:focus
{
color: #c8001e;
text-decoration: none;
}

a:active {
color: #ffffff;
text-decoration: none;
}

/* ==========================
ENDE DES STYLESHEETS
============================= */

Wie geschrieben, in FF und Opera sowie Camino funkt. es wunderbar
mit dem Verkleinern.
Aber in Safari eben nicht.
Ganz chaotisch, sprich unbrauchbar wird es mit iCab.

DANKE schonmal im voraus.

Webbiker · 29.11.2009

Hallo

Ohne zu testen.
In der "css" würde ich alles was mit Schriften zu tun hat, einheitlich auf "em" einstellen.

Gruss Hansi

Galanos · 30.11.2009

Obwohl ich es nicht gut finde, dass du kaum kommentierten Datensalat in den Thread k*tzt, habe ich die Texte in 2 Dateien kopiert, den richtigen Ordner fuer die Bilder identifiziert und mich erst mal daran gemacht, herauszufinden, wo dein Problem eigentlich liegt – was dich zu erklaeren wahrscheinlich 20 Sekunden gekostet haette.

Ich nehme an, dich stoert, dass die rot eingefaerbte <h3> mit Klasse "test" ("…Webdesign komplexes Ding …") mit dem <div> mit ID "Inhalt" (Blindtext) kollidiert, wenn man die Schriftgroesse erhoeht.

Beide Elemente stehen mit Relativer Positionierung im <div> mit ID "wrapper", ihre Positionierung verhaelt sich also relativ zu dem Punkt, wo sie urspruenglich stuenden, nicht wie bei Absoluter Positionierung zum Ursprungspunkt des Elternelements.
Da beide Elemente mit fixen Einheiten (Pixel) positioniert sind, verschiebt sich ihre Position nicht, wenn die Schriftgroesse erhoeht wird.

Tiefer mag ich nicht graben, ist mir ein zu grosser Wust an nicht optimal positionierten Elementen.

Loesung? Entweder mit Absoluter Positionierung, Floats oder – teste es mal – variablen Einheiten wie "em". Am besten wird allerdings sein, die Positionierung bei Elementen herauszunehmen, wo es einfach nicht noetig ist. Was spricht dagegen, dass die <h3> ganz simpel an <div id="Inhalt"> anschliesst, als neuer Absatz? Beide Text jeweils in ein <p> setzen, dann hast du auch sinniges Markup.

rm -r * · 30.11.2009

Noch eine Frage an den TE.
Hast Du im Firefox unter Ansicht->Zoom->Nur Text zoomen aktiviert ?

Wenn nicht, dann mach das mal.
Dann verhält sich der Firefox 3.x wieder wie ein 2.x und vergrößert wieder alles "richtig" und nicht mehr Dinge die in px angegeben sind.

Wieso ist Dein CSS ein buntes gemisch aus px und em ?
Schreib mal alles auf em um und guck dann mal was passiert.

nonpareille8 · 30.11.2009

Galanos schrieb:
Obwohl ich es nicht gut finde, dass du kaum kommentierten Datensalat in den Thread k*tzt, ...

Asche auf mein Haupt, stimmt ja.
Es war keine Absicht den Code so zu präsentieren.

nonpareille8 · 30.11.2009

Das Ergebnis der Site entspricht der Historie der Erstellung.

Aus unterschiedl. Gründen musste die Arbeit manchmal für 10 –14 Tage
unterbrochen werden. Dann wusste man wieder nicht was Sache war.
Immer Korrekturtermine im Genick, schnell, schnell... etc.
Unter solchen Umständen werde ich keine Site mehr bauen, das steht fest.

Tja, sowieso noch nicht sattelfest da Newbie, schon kommt es zu so einem relativen Chaos-Code

Aber eure Tipps sind ja mal ein hoffnungsvoller Ansatz.

DANKE, ich werde berichten.

nonpareille8 · 03.12.2009

So, die Site habe ich mal lt. euren Tipps umgestellt.
Sie verhält sich etwas stabiler.
Safari überzeugt in der letzten Verkleinerungsstufe immer noch nicht.
Überrascht hat mich der IE 8. Da ist alles in Butter.

Safari – Fehler in der Darstellung

nonpareille8

unregistriert

Atarimaster

Aktives Mitglied

nonpareille8

unregistriert

Galanos

Aktives Mitglied

nonpareille8

unregistriert

nonpareille8

unregistriert

Anhänge

Webbiker

Mitglied

Galanos

Aktives Mitglied

rm -r *

Aktives Mitglied

nonpareille8

unregistriert

nonpareille8

unregistriert

nonpareille8

unregistriert