Safari macht riesige Zeilenumbrüche in meiner Site!?!

[Tease]

Hallo zusammen,

ich bin gerade am entwerfen meiner neuen Site und habe nun nachdem ich es in verschiedenen Browsern getestet habe, das klassiche Problem, dass mein Design auf unterschiedlichen Browsern eben auch unterschiedlich aussieht. Ich weiß, dass das grundsätzlich ein Problem ist und auch dass man das mit Browser-Hacks umgehen kann, nur bräuchte ich ganz konkret mal einen Tip, wieso bei mir im Safari auf MacOS die Zeilenabstände anders dargestellt werden. Dadurch rutscht per Absatz mein Text immer weiter nach unten und das Problem wird immer gravierender.
Siehe:

1.Problem: Oben Zeilenabstan zwischen den beiden H2s.
2. Problem: Am Anfang des Textes ist schon ne leer Zeile und pro Absatz rutscht alles weiter nach unten und somit letztendlich aus dem designten Rahmen.

Wenn's hilft, hier der Code: (Auszug)

<div id="inhalt">
<h2><span class="mpp">media powerplant</span> <span class="bereich">Videoproduktion</span></h2>
<h2 class="unterüberschrift">Zeigen Sie was Sie können!</h2>
<div id="haupthintergrundvideo">
<div id="fließtextvideo">
<p>Nutzen sie Webvideos als günstige und effektive Möglichkeit ihr Unternehmen einer großen Öffentlichkeit zu präsentieren. <br>
Nutzen Sie diese zeitgemäßen Marketingsinstrumente um schneller und direkter ihre künftigen Kunden und Partnern anzusprechen.</p>
<p>&nbsp;</p>
<p>Media Powerplant kann die Produktion eines Videofilms nicht für einen Pauschalpreis anbieten, ohne zu wissen, was Sie wollen! Erst wenn wir ihre Vorstellungen kennen, können wir das Konzept in Ihren zur Verfügung stehenden Budgetrahmen einpassen. </p>
<p>Sie werden sehen: Qualität muss nicht teuer sein!</p>
<p>Mit Kreativität und dem dazugehörigen Know-how lassen sich heutzutage mit geringen Budgets hochwertige und wirkungsvolle Filme und Web-TV-Sendungen realisieren! </p>
</div>

Gibt's eigentlich grundsätzlich nen Überblick, welcher Browser was anders darstellt und wie man das beheben kann. Ich les nur immer so ganz allgemein gehaltene Sachen, wie dass der IE Padding/Margin anders darstellt. Aber gibt's da auch konkrete Hinweise?

Wie immer dankbar für jede Hilfe!
MfG
Tease

 

[taffrot]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

ich hab kein safari, aber zu deiner anderen Frage weiß ich rat.

Hier teste ich meine Seiten bevor sie publiziert werden: Check Browser Compatibility, Cross Platform Browser Test - Browsershots

cheers

 

[centipete]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

moin,
"Sie werden sehen: Qualität muss nicht teuer sein!" und "Mit Kreativität und dem dazugehörigen (...)" schiebts bei safari 3.1.2 und auch mozilla 3.5 (mac 10.4) unter den div "fließtextvideo".
nimm bei #fließtextvideo mal die höhe raus, dann dehnt sich mit dem text aus.
den absatzabstand (p) über padding-bottom definieren.

statt <h2><span class=... und <h2 class="... würd ich nur <h1> und <h2> verwenden.
frohes schaffen!

ne übersicht über die bugs such ich auch ...

 

[rr52]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

Nutzen Sie diese zeitgemäßen Marketingsinstrumente um schneller und direkter ihre künftigen Kunden und Partnern anzusprechen.</p>
<p>&nbsp;</p>
<p>Media Powerp

Ersetzte doch mal den rot markierten Bereich durch <br clear="all">. Das ist auch nicht mehr aktuell hilft aber vielleicht auf die Schnelle.

Rudolf

 

[SineTempore]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

Hi,

sorry, dass ich jetzt nichts zu deinem Problem beitragen kann. Aber ich rate dir deine Seite auch für Leute ohne JavaScript zugänglich zu machen. Es gibt Firmen, die das aus Sicherheitsgründen abschalten. Nur so nebenbei

 

[Tease]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

Zuerst mal Danke für eure Tips.
Leider war allerdings bis jetzt noch nicht die Lösung für mein Problem dabei, aber vielleicht könnt ihr mich ja weiterhin unterstützen. Mit eurer Hilfe wird das was, da bin ich mir sicher.

Ich habe mal eine Screenshot gemacht, der verdeutlichen soll, wo genau das Problem liegt, denn wenn man das immer umschreiben muss, verwirrt man die Leute meistens noch mehr.

A / B Vergleich Firefox / Safari:

Das Problem scheint eindeutig zu sein, dass Safari am Beginn und am Ende eines Absatzes eine zusätzliche Leerzeile reinschreibt. Die Frage ist nun halt, wieso und wie kann ich das abstellen?

Den html-Code habe ich oben bereits gepostet, aber hier nochmal kurz, damit niemand groß scrollen muss:

<div id="inhalt">
<h2><span class="mpp">media powerplant</span> <span class="bereich">Videoproduktion</span></h2>
<h2 class="unterüberschrift">Zeigen Sie was Sie können!</h2>
<div id="haupthintergrundvideo">
<div id="fließtextvideo">
<p>Nutzen sie Webvideos als günstige und effektive Möglichkeit ihr Unternehmen einer großen Öffentlichkeit zu präsentieren. <br>
Nutzen Sie diese zeitgemäßen Marketingsinstrumente um schneller und direkter ihre künftigen Kunden und Partnern anzusprechen.</p>
<p>&nbsp;</p>

Nun auch noch der dazugehörige css-Code:

#inhalt {
float: left;
width: 750px;
height: 665px;
margin-top: 15px;
color: #D5D6EB;
font-size: 10px;
text-align: left;
margin-left: 30px;
}
h2 {
font-size: 14px;
}
.mpp {
font-size: 18px;
color: #C3DDE6;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
}
.bereich {
font-size: 18px;
color: #113F5D;
font-weight: 400;
}
.unterüberschrift {
font-size: 14px;
color: #114266;
font-weight: normal;
padding-top: 2px;
}
#haupthintergrund {
width: 782px;
height: 360px;
background-image: url(Bilder/texthintergrund.jpg);
background-repeat: repeat;
color: #092D43;
border: 2px solid #FFF;
margin-top: 10px;
padding-left: 5px;
padding-right: 5px;
}
#fließtextvideo {
background-color: #E5E4E4;
height: 135px;
width: 770px;
border: 1px solid #fff;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
background-image: url(Bilder/texttotal.jpg);
background-repeat: repeat-x;
font-size: 12px;
}
p {
font-size: 12px;
color: #092D43;
}

Das Inhalt Div liegt in:

#mitte {
float: left;
width: 900px;
background-image: url(Bilder/mppDesignNeu.jpg);
margin-top: 1px;
height: 806px;
background-position: 1px;
padding-left: 70px;
}
#hauptfenster {
width: 1024px;
margin-right: auto;
margin-left: auto;
}

Komme alleine leider gerade überhaupt nicht mehr weiter und wäre euch echt dankbar, wenn ihr mir mit Rat zur Seite stehen würdet.

Vielen Dank und schönes Wochenende noch!
Tease

 

[centipete]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

du kannst am anfang des css mal resets einbauen:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:         0;
    padding:         0;
    border:         0;
    outline:         0;
    font-weight:         inherit;
    font-style:         inherit;
    font-family:         inherit;
    vertical-align:     baseline;
}

ol, ul {
    list-style:         none;
}

table {
    border-collapse:     separate;
    border-spacing:     0;
}

caption, th, td {
    text-align:         left;
    font-weight:         normal;
}

 

[Tease]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

Juhuuuuuuu! Danke vielmals! :mrgreen:
Das hat das Problem tatsächlich gelöst! Ich dachte immer mein Reset
* {
margin:0;
padding:0;
}
am Anfang der css-Datei wäre ausreichend, aber scheinbar gibt's da schon noch einige anderes Sachen, die beim Browser Defaultmäßig eingestellt sind.
Jetzt ist zwar mein Inhalt nicht mehr mittig, aber das krieg ich schon wieder hin.

Echt, vielen Dank!
Du bist mein Held!

 

[centipete]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

bitte bitte, gern geschehen

 

[Tease]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

Hallo, ich hol den Thread wieder hoch, weil ich nun doch immer noch das Problem habe, dass meine Seite nun nicht mehr zentriert dargestellt wird, was zuvor der Fall war. Scheinbar ist irgendwas in dem Reset Befehl, der nun meine Einstellung überschreibt.
Kann mir jemand nen Tip geben, wie die Seite nun wieder mittig bekomme?

Vielen Dank schon mal im voraus!

MfG
Tease

 

[highjanni]

AW: Safari macht riesige Zeilenumbrüche in meiner Site!?!

ich setze immer alle vordefinierten browser-css-anweisungen auf null und definiere sie dann so wie ich sie brauchen.
dann hat man zumindest in den gängigen browsern ein nahezu gleiches ergebniss.
wenn ich das richtig sehe war genau das dein problem.