[GELÖST]Probleme bei der Darstellung im Safari

[PatriziaF]

Hallo liebe Kollegen,

es ist mir schon sehr peinlich, aber ich muss schon wieder posten.

und zwar wird die site nicht korrekt im safari angezeigt - ich weiß das nutzen nicht wirklich viele leute - kann mir aber leider trotzdem nicht helfen.

Das Problem liegt darin dass das main-div nicht die gesamte breite "nutzt":
www.gunytronic.com/index.php

Danke im Voraus

LG Patrizia

[mike-r]

http://validome.org/ und http://jigsaw.w3.org/css-validator zuerst klären, erst dann kann man über browserspezifische Probleme philosophieren.

[antibart]

Da hat er recht...

Auch deinen HTML Code solltest Du noch mal validieren lassen. Für FF gibt es den Validator als Extension. Den würde ich sowieso immer laufen lassen.

Sowohl in deinem HTML als auch in deien CSS befinden sich 3 Fehler.... ob die das Problem lösen, ist einen andere Frage. Aber jene sollten erstmal behoben werden.

Da ist ein News-Div in einem Absatz und ein paar nicht gültige CSS-Angaben. Vielleicht ist es das schon...Evlt könnstest Du der #main neben der #sidebar auch noch ein float:left gönnen... aber ich hab auch nur eben mal kurz drüber geschaut - vielleicht hab ich auch was missgedeutet.

[PatriziaF]

also ich hab jetzt die fehler ausgebessert die einfluss darauf hätten.
die fehler die jetzt noch stehen sind irrelevant.

Bitte daher dringend um Hilfe.

LG Patrizia

[faglork]

Moin!

Nur zur Info:

und zwar wird die site nicht korrekt im safari angezeigt

Auch in OPERA 9.62 nicht ...

Und in CHROME und FLOCK funktioniert fast nichts.


Servus,
Alex

[PatriziaF]

sehr aufbauend

lg patrizia

[antibart]

Naja - ich sehe die Fehler immer noch ...

Wenn Du selbst nicht weiter kommst, kannst Du auch nicht wissen, was relevant ist und was nicht...

Ansonsten finde ich Deine CSS viel zu kompliziert.

Wenn Du sowieso mit einer festen Breite arbeitest (1000px), warum nimmst Du dann für den float #sidebar 26% und #main 100%? Wenn die Gesamtfäche 100% ist, dann kann nicht ein Teil 26% und der andere 100% sein. Da würde ich als Browser auch nichts mit anfangen können.

Warum nicht zB 200px und 750px und noch ein paar für margin?

On das den fehler verursacht, kann ich nicht versprechen, da ich selbst mestens ENTWEDER mit % ODER mit festen pixel-größen  arbeite. Gerade bei so einem einfachen Layout würde ich es mir doch nicht so schwer machen.

Und der float:left im #main fehlt immer noch...

[PatriziaF]

danke für den tipp.

hab jetzt fixe pixelangaben gemacht und anscheinend funktioniert das.

sry bin schon etwas genervt von dem ganzen weil zuerst hatte ich alles in prozentangaben (mache ich normalerweise immer so) und dann wollte ers wieder andersrum

aber DANKE!

LG Patrizia

[antibart]

JA - aber nicht in Opera:

Du hast ein #sidebar mit float:left, dann ein Div ohne ID im Template mit style=float:right (für Printlink), dann ein Div #main ohne float und ohne clear für den Text, der unter dem Printlink stehen soll ... Das kommt mir etwas anfällig vor.

Du solltest um die Box mit dem Printlink / language und dem #main ein Div rumbauen und das links an der #sidebar floaten. Also zwei Boxen nebeneinander und in der zweiten zwei untereinander.

Also ganz plump ZB so:

Code: Select all

<div id="sidebar">News</div>
<div id="rechte-spalte">
<div id="printlink">Printlink</div>
<div id="main">Text</div></div>

css

Code: Select all

#sidebar {
width:200px;
float:left;
display:inline; (für de ahle IE double-foat-margin-bug)
}

#rechte-spalte{
width:750px;
margin-left:25px; (oder so)
float:left;
display:inline;
}

#printlink {
width: auto;
text-align:right;
padding: wasauchimmer;
} 

#main {
width:auto;
padding:wasauchimmer;
}

Und ein DIV gehört nicht in einen Absatz und ein Image auch nicht unbedingt. Irgendwo führt sowas dann doch zu Problemen. In einen Absatz gehört nur Fließtext...

[NaN]

Und ein DIV gehört nicht in einen Absatz und ein Image auch nicht unbedingt. Irgendwo führt sowas dann doch zu Problemen. In einen Absatz gehört nur Fließtext...

Alternativ kann man in einem Absatz auch verwenden.

[antibart]

Alternativ kann man in einem Absatz auch verwenden.

Jou - in diesem speziellen Fall erfüllen die allerdings gar keinen besonderen Zweck...

[mike-r]

Und ein DIV gehört nicht in einen Absatz und ein Image auch nicht unbedingt. Irgendwo führt sowas dann doch zu Problemen. In einen Absatz gehört nur Fließtext...

In diesem Fall dürfte das mal wieder daran liegen, dass ein Modul/ Tag  im Tiny eingegeben wurde. Irgendwie sollte es egtl. ziemlich einfach zu lösen sein, dem Tiny zu sagen, dass bei geschweiften Klammern kein Absatz generiert werden darf, ohne die Quellcode-ansicht bemühen zu müssen.

Zu dem Bild muss ich Dir widersprechen, generell ist ein Bild inline, und dürfte nur in Ausnahmefällen ausserhalb eines Absatzes positioniert werden müssen. (Korrelation Bildinhalt-> Absatzinhalt  <- inline)



Block ^^

[antibart]

In diesem Fall dürfte das mal wieder daran liegen, dass ein Modul/ Tag  im Tiny eingegeben wurde. .

In diesem Fall denke ich nicht. Dann das hieße, dass (diese) Seite zur Hälfte im Editor gelayoutet wurde. Das wäre ja Wahnsinn. Es sei denn, sie nutzt mehrere Content-Blöcke - dann passts wieder.

Zu dem Bild muss ich Dir widersprechen, generell ist ein Bild inline, und dürfte nur in Ausnahmefällen ausserhalb eines Absatzes positioniert werden müssen. (Korrelation Bildinhalt-> Absatzinhalt  <- inline)

Da haste nu wieder ganz recht. Zumindest innerhalb des Content und im Text.  Im Layout-Template wie es bei dieser Seite passiert dagegen würde ich Bilder nicht unbedingt mittels Absätzen positionieren, sonder eher mit margin usw...

[mike-r]

ok, da hast Du Recht, mein Fehler, ich bin vom Content ausgegangen und hatte nicht genau in den Code geschaut.