nicht angemeldet
Interpretiert Safari prozentuale Breitenangaben anders?
Das CSS meines neuen Layouts validiert (bis auf ein paar Warnungen bezüglich fehlende color-Angaben bei vorhandener Background-Angabe und sowas, Kleinigkeiten, um die ich mich am schluss kümmere). xhtml validiert nicht, aber aufgrund von Doctype-Fehlern und fehlenden inneren Endtags bei Bildern - worum ich mich ebenfalls am Schluss kümmere.
Das Ganze sieht laut "Browsercam" in allen modernen Browsern gut aus - bis auf Safari & Konqueror. Die rechnen die Breiten-Prozentangabe des mittleren floating-divs offenbar nach Abzug der beiden äußeren divs (die auch beide floaten.)
Ist das ein bekanntes Phänomen? Kennt jemand Abhilfe?
Hier ist der Link zu der Seite:
http://www.wortwerkstatt.at/dagbok/index.php/dagbok/index2/
Hier ein Screenshot im Mozilla (also korrekt):
http://www.wortwerkstatt.at/tmp/mozilla.jpg
Hier einer im Safari (also falsch):
http://www.wortwerkstatt.at/tmp/safari.jpg
Und hier noch die css-angaben, die ich verwende:
Linkes div:
#featured {width: 17%;
margin: 0 1% 15px 0;
float: left;
}
Rechtes div:
#rightage{ width: 17%;
margin: 140px 0 15px 1%;
float: right;
}
mittleres div:
#newest { margin: 10px 0 0 0;
text-align: justify;
background: #fff;
overflow: hidden;
font-size: 13px;
line-height: 130%;
width: 60%;
float: left;
}
-
Moin!
Das Ganze sieht laut "Browsercam" in allen modernen Browsern gut aus - bis auf Safari & Konqueror. Die rechnen die Breiten-Prozentangabe des mittleren floating-divs offenbar nach Abzug der beiden äußeren divs (die auch beide floaten.)
Mein Augenmaß bestätigt dies: Die 60% in der Breite der folgenden CSS-Deklaration bezieht der Safari auf den insgesamt für
<div id="newest">zur Verfügung stehenden Platz. Du möchtest aber, dass dieser Bereich 60% des Bildschirms einnimmt, wie mir mein Camino zeigt.#newest { margin: 10px 0 0 0;
text-align: justify;
background: #fff;
overflow: hidden;
font-size: 13px;
line-height: 130%;
width: 60%;
float: left;
}> Ist das ein bekanntes Phänomen? Mir ist es gerade eben aufgefallen und ich finde dies schon ein wenig merkwürdig. > Kennt jemand Abhilfe? Ich hätte einen Workaround anzubieten, da deine beiden Container rechts und links feste Breiten haben: Verzichte auf die Angabe `width: 60%`{:.language-css}, dann sollte der mittlere Bereich die komplette Mitte ausfüllen. Den Abstand nach beiden Seiten kannst du dann mit ~~~css margin-left: 3%; margin-right: 3%festlegen.
Hier ist der Link zu der Seite:
http://www.wortwerkstatt.at/dagbok/index.php/dagbok/index2/Du kannst auch richtige Links setzen, siehe </hilfe/bedienung.htm#verweise-einbinden>, was ich für dich hier mal getan habe.
Viele Grüße,
Robert-
Hi,
erst Mal vielen Dank für deine Idee.
Ich hätte einen Workaround anzubieten, da deine beiden Container rechts und links feste Breiten haben: Verzichte auf die Angabe
width: 60%, dann sollte der mittlere Bereich die komplette Mitte ausfüllen. Den Abstand nach beiden Seiten kannst du dann mitmargin-left: 3%;
margin-right: 3%
> > festlegen. Das klang vernünftig. Allerdings "frisst" Mozilla (korrekterweise, ich weiß) kein Float ohne Breitenangabe - und wenn ich das Float auch weglasse (was ja im Prinzip mein allererster Zugang war: links und rechts float, in der Mitte ohne), wirft der IE alles durcheinander. > > Hier ist der Link zu der Seite: > > <http://www.wortwerkstatt.at/dagbok/index.php/dagbok/index2/> > > Du kannst auch richtige Links setzen, siehe </hilfe/bedienung.htm#verweise-einbinden>, was ich für dich hier mal getan habe. Danke. Ist man gar nicht mehr gewöhnt heutzutage, dass ein Forum richtige Links zulässt. Grüßchen, Chronistin
-
-
Hallo,
xhtml validiert nicht, aber aufgrund von Doctype-Fehlern und fehlenden inneren Endtags bei Bildern - worum ich mich ebenfalls am Schluss kümmere.
Ich hab jedenfalls beste Erfahrungen damit gemacht, grundsätzlich _vor_ der Fehlersuche das (x)html zu valdieren. "Mein" Validator zeigt jedenfalls mehr als nur die von Dir erwähnten Fehler.
Gruß Fritz