CSS. Innenrand in Safari falsch dargestellt

19.september · 26.03.2005

CSS. Innenabstand in Safari falsch dargestellt

Hi ich hab ein Problem mit der korrekten Darstellung von meinem CSS in Safari. Folgendes:

Ich hab einen ID-Stil für ein Element mit einem Innenabstand links von 5 Pixeln. Das Element hat eine Breite von 100 Pixeln. In Safari wird das Element auf der rechten Seite verlängert. Im Internet Explorer wird das Element korrekt dargestellt. Wie kann ich das beheben?

Hier der Quelltext von dem ID-Stil welcher auf das Element angewendet wird:

#menue { color: gray; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 130%; text-decoration: none; background-color: #ccf; visibility: visible; padding-top: 10px; padding-left: 5px; position: absolute; top: 111px; left: 10px; width: 100px; height: 100px; border: solid 1px white }

Bin für jede Hilfe dankbar.

Grüßle und schöne Ostern!

Tom

2nd · 27.03.2005

Hmm, also im Internet Explorer und Mozilla geht es unter Windows. Der Code sieht richtig aus und simple Breitenangabe sollte auch Safari beherrschen. Ich habe mal ein paar Zeilenumbrüche reingemacht:

PHP:

#menue { 
	color: gray; 
	font-size: 12px; 
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-weight: bold; 
	line-height: 130%; 
	text-decoration: none; 
	background-color: #ccf; 
	visibility: visible; 
	padding-top: 10px; 
	padding-left: 5px; 
	position: absolute; 
	top: 111px; 
	left: 10px; 
	width: 100px; 
	height: 100px; 
	border: solid 1px white;
}

Eigentlich sollte das fkt.. Safari habe ich im Moment nicht am Start, ich probier das morgen nochmal!

Frank

Hilarious · 27.03.2005

19.september schrieb:
Hi ich hab ein Problem mit der korrekten Darstellung von meinem CSS in Safari. Folgendes:

Ich hab einen ID-Stil für ein Element mit einem Innenabstand links von 5 Pixeln. Das Element hat eine Breite von 100 Pixeln. In Safari wird das Element auf der rechten Seite verlängert. Im Internet Explorer wird das Element korrekt dargestellt. Wie kann ich das beheben?

Hier der Quelltext von dem ID-Stil welcher auf das Element angewendet wird:

#menue { color: gray; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 130%; text-decoration: none; background-color: #ccf; visibility: visible; padding-top: 10px; padding-left: 5px; position: absolute; top: 111px; left: 10px; width: 100px; height: 100px; border: solid 1px white }

Bin für jede Hilfe dankbar.

Grüßle und schöne Ostern!

Tom

Hi Tom,

kann es vielleicht an etwas anderem liegen?

Ich habe mal interessehalber Deinen Stil in diesem HTML-Test angewandt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<title>Unbenannte Seite</title>
		<style type="text/css" media="screen"><!--
		#menue { color: gray; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 130%; text-decoration: none; background-color: #ccf; visibility: visible; padding-top: 10px; padding-left: 5px; position: absolute; top: 111px; left: 10px; width: 100px; height: 100px; border: solid 1px white }

--></style>
	</head>

	<body bgcolor="#ffffff">
		<div id="menue">Element</div>
	</body>

</html>

Das Ergebnis ist ziemlich kongruent (v.l. MSIE6XP2, Safari-1.24, Firefox-1.0.2):

Ich hoffe, es hilft

19.september · 27.03.2005

Danke erstmal.

ICh hab auch festgestellt, daß der IE unter WIN und MacOS die Seite richtig darstellt. Da bin ich echt am Ende mit meinem Latein…

Hier der Link zu der Seite, damit ihr es in nautra seht. http://www.tomislavroemer.de/

Wie gesagt, IE ok; Safari, Camino nok.

Merci!

kelli · 27.03.2005

Hi, das sollte dir weiterhelfen: http://www.tantek.com/CSS/Examples/boxmodelhack.html

19.september · 28.03.2005

Ne, klappt noch immer nicht. Hab jetzt die Ränder und Abständer dazu addiert und auch versucht von der Summe abzuziehen. Im IE und Safari hab ich immer ein anderes Resultat. Wenn's im IE stimmt, stellt es Safari falsch dar und umgekehrt.. Hexenwerk!

Oder hab ich da was falsch verstanden?!

defect · 28.03.2005

Hast Du vielleicht den IE 5(!) für Win?
Der Internet Explorer 5 (Win) rechnet Abstände von der Box-Breite ab (Also zB. 400px Breite; 5 Padding: 400 Breite gesamt) Andere Browser (Auch der IE 6, den Hilarious in seinem Screenshot verwendet) rechnen die Abstände drauf (410px Gesamtbreite - 5 rechts, 5 links Padding drauf) - und das ist auch richtig so
SelfHTML sagt dazu folgendes:

selfhtml schrieb:
Der Box-Modell-Fehler des Internet Explorers

Als "Box Model Bug" wird der Fehler in älteren Windows-Versionen des Internet Explorers (einschließlich 5.5) bezeichnet, die Innenabstände und Rahmenstärken entgegen der Spezifikation nicht zur Gesamtbreite zu addieren - dies ist nur beim Außenabstand korrekt der Fall. In oben angeführtem Beispiel ergibt sich damit eine Gesamtbreite von 200 Pixel, also lediglich die mittels width definierte Breite. Dem Inhalt stehen nach Subtraktion von 40 Pixel für den Rahmen und weiteren 40 Pixel für den Innenabstand (jeweils 20 Pixel links und rechts) demnach nur mehr 120 Pixel zur Verfügung, was vor allem in vermeintlich pixelgenauen Layouts störende Abweichungen verursacht.

Sollte das für das Problem verantwortlich sein, ist der IE das Problem, nicht Safari. Zum Umgehen gibt es einen sogenannten Box-Model-Hack, ein Link dazu ist ja hier schon gepostet.

mit Gruß. godn

EDIT: hier (klick) nochmal das Ganze sehr ausführlich

EDIT": *gröhl* Das Forum läuft noch nicht auf Sommerzeit, es ist schon 01.42 Uhr

MUG Hannover · 28.03.2005

Oder ist schlichtweg der DOCTYPE nicht richtig gesetzt?

defect · 28.03.2005

MUG Hannover schrieb:
Oder ist schlichtweg der DOCTYPE nicht richtig gesetzt?

Da hat MUG in der Tat sehr Recht, selbst wenn Du den IE 6 hast, kann der von mir beschrieben Fehler auftreten, nämlich bei DOCTYPE-Fehlern... Unbedingt mal auf korrekten DOCTYPE achten, und wenn der nicht korrekt ist und/oder wenn zB. der XML-Prolog drin ist: schmeiss den raus, das Ding löst Probleme aus und ist laut Spezifikationen auch nur optional!

mit Gruß. godn

19.september · 29.03.2005

DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

liegt also nicht daran. ich hab jetzt auch mal den Hack ausprobiert, aber irgendwie klappt das auch nicht.

Muß der Hack vor mein Eigentliches Element im Quelltext?

19.september · 29.03.2005

ok so sieht jetzt der Quelltext in der index aus:

#menue { width: 100 px;
background-color: #ccf;
visibility: visible;
position: absolute;
top: 111px;
left: 10px;
voice-family:*"\"}\"";
voice-family:inherit;
width: 100 px; height: 100px }

html>body*#menue*{width:*100 px; }

kelli · 29.03.2005

19.september schrieb:
ok so sieht jetzt der Quelltext in der index aus:

#menue { width: 100 px;
background-color: #ccf;
visibility: visible;
position: absolute;
top: 111px;
left: 10px;
voice-family:*"\"}\"";
voice-family:inherit;
width: 100 px; height: 100px }

html>body*#menue*{width:*100 px; }

Also irgendwie ist der Code ziemlich wirr! Eigentlich sollte das so aussehen, ohne doppelte Angaben:

Code:

#menue  { 
           width: 100 px;
		background-color: #ccf;
		visibility: visible;
		position: absolute;
		top: 111px;
		left: 10px;
		voice-family:"\"}\"";
           voice-family:inherit;
	     height: 100px;
           }
		
<html>
<body>
<div id="menue"></div>
<body>

Width Angabe reicht einmal, 3mal ist definitv zuviel, Tags richtig schliessen, etc... . Die Angabe Visibility:visible würde ich rauswerfen, da eh standard einstellung oder hat sie einen bestimmten grund?

maceis · 29.03.2005

Mal was ganz anderes am Rande:
auf der Seite http://www.tomislavroemer.de/bookmarks.html gibts derzeit noch keine Links, aber das weisst du sicher.
Ich hab aber auch noch einen Typo im Wort "Nacrichten" entdeckt (h fehlt).

Was den schwachen Kontrast der Schrift auf dem Hintergund angeht, würde ich mir überlegen, ob ich das meinen Besuchern antun wollte.

19.september · 30.03.2005

Danke Kelli,

der Code ist wirklich etwas aufgebläht. Habe es nicht bemerk daß zwei Breitenangaben drinnen sind. Werde es damit mal versuchen. Die "Sichtbarkeit" werde ich auch rausnehmen, da effektiv nicht gebraucht. Sowas nennt sich dann wohl Frühjahrsputz im Quelltext…

@maceis: ja die Links sind noch nicht aktiv und den Tippfehler hab ich gestern rausgenommen. Danke!

Aber noch was: ICh möchte, daß die Links in neuen Fenstern geöffnet werden. Was empfehlt ihr: JavaScript oder einen Link mit "target blank"?! Denn auch hier habe ich das Problem, daß Safari das neue Fenster als kleines 100*100 Fenster öffnet. Andere Browser nicht.. Ideen, Vorschläge?!

Grüßle

19.september · 30.03.2005

#menue
{
color: gray;
font-size: 12px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-weight: bold;
line-height: 130%;
text-decoration: none;
background-color: #ccf;
text-align: left;
visibility: visible;
padding-top: 10px;
padding-left: 5px;
position: absolute;
top: 111px;
left: 10px;
width: 100px;
voice-family:"\"}\"";
voice-family:inherit;
height: 130px;
border: solid 1px white;
}

Ergebnis: alles beim alten. Die Box reißt nach rechts aus und schneidet die vertikale Linie..aber nur beim SAFARI und CAMINO. Beim IE ist's ok..

Hilarious · 30.03.2005

19.september schrieb:
Aber noch was: ICh möchte, daß die Links in neuen Fenstern geöffnet werden. Was empfehlt ihr: JavaScript oder einen Link mit "target blank"?! Denn auch hier habe ich das Problem, daß Safari das neue Fenster als kleines 100*100 Fenster öffnet. Andere Browser nicht.. Ideen, Vorschläge?!

Grüßle

Beides. Ich nutze recht erfolgreich eine Kombination aus JavaScript und reinem HMTL.

Zunächst brauche ich natürlich eine Funktion, die einem das neue Fenster aufmacht, sagen wir, die heißt "openHilariousWindow (url, name, features, mywidth, myheight)". Die Parameter dürften selbsterklärend sein.

Ein netter, und vor allem jedem Browser gerechten, Popup-Link wäre dann dieser:

Code:

<a href="http://rapunzel.de/haar.htm" target="_blank" onclick="openHilariousWindow (this.href,'hilariousWindow', 'toolbars=no, directories=no, scrollbars=yes, resizable=yes", 100, 100); return false;">Lass Dein Haar herunter</a>

Vor Benutzen noch evtl. vom Forum eingefügte Leerzeichen entfernen

Wichtig ist, dass nach dem Funktionsaufruf noch ein "return false;" ein zweites Öffnen des Fensters verhindert; denn der Browser versucht, sobald JavaScript aktiviert wurde, zunächst die onclick-Anweisung auszuführen, und würde die Abbruchanweisung fehlen, öffnet sich (je nach Browser) noch ein zweites Fenster, da wir ja auch das Linkziel (target) auf ein neues Fenster ("_blank") gesetzt haben.

Die Vorteile:
o Die URL bleibt dort, wo sie hingehört, und wird nicht in ein "javascript:" gekapselt.
o Popup-Blocker bleiben entspannt (vielleicht nicht unbedingt Opera, der gar kein Fenster-Öffnen zulässt)
o Auch Windows-XP-Nutzer mit MSIE 6 und SP2 bekommen keine Sicherheitswarnung zu "unterdrückten Popups".
o Fällt JavaScript beim Benutzer aus, geht's trotzdem in einem neuen Fenster auf (nur ohne Kosmetik).
o Die Statuszeile enthält, wenn der Benutzer mit der Maus über den Link geht, die Angabe der "echten" URL mit dem Hinweis "öffnet in einem neuen Fenster" (bei Safari).

Viel Erfolg

19.september · 01.04.2005

Danke für eure Antworten. Hab's trotz der Hacks leider nicht hinbekommen, daß der Menütext um 5px eingerückt wird, ohne daß die ganze Box nach rechts verlängert wird. Nobody is perferct und aber dieses Forum ist wirklich ein Stück heile Welt

Danke für eure Hilfe. Bis zur nächsten Frage

Grüßle

Tom

19.september · 01.04.2005

@ Hilarious

Deine Tipps werd ich mir zu Herzen nehmen und wenn's nicht klappt hörst du von mir

CSS. Innenrand in Safari falsch dargestellt

19.september

2nd

Aktives Mitglied

Hilarious

Aktives Mitglied

19.september

kelli

Aktives Mitglied

19.september

defect

Aktives Mitglied

MUG Hannover

Mitglied

defect

Aktives Mitglied

19.september

19.september

kelli

Aktives Mitglied

maceis

Aktives Mitglied

19.september

19.september

Hilarious

Aktives Mitglied

19.september

19.september