Opera 8 BUG / Margin-Fehler bei Inline-Element

ulle · #1 (**permalink**) 16.08.2005, 13:52

Zitat:

Zitat von Opera Version

Version 8.02
Build 7680
Platform Win32
System Windows XP

Hallo,

leider finde ich keine Lösung zu folgendem Problem im Opera 8. Dazu ist noch zu sagen dass der Opera 7 damit keine Probleme hatte. IE und FF zeigen folgendes padding-right ohne Probleme.

Code:

#site-menu a 
			{	
.......
			padding: 0 .3em 0 0;
.......
			}

Es nun in Worte zu fassen ist mühsam, schaut es Euch doch einfach mal an;
hier der "gepellte" CODE, wenn man den Markup [<span>.</span>] aus dem Link entfernt wird der padding-right auch im Opera angezeigt.

Code:

<!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-DE" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>xxxx</title> 

<style type="text/css" media="screen" title="Druckvorschau => Markup-Semantic">    
/*<![CDATA[*/ 


#site-menu ul
			{ 
			list-style-type: none;

			margin:  0;
			padding: 0 0 2px 0;

			background-color: #CCCCCC;

			font-family:  Tahoma, Arial, Helvetica, sans-serif;
			font-size:    .8em; 	

			line-height: 1.82em; 
			} 


#site-menu ul li 
			{ 
			display: inline; 
			margin: 0; 
			padding: 0 1.6% 0 0; 
			} 

#site-menu a 
			{	
			margin: 1px;	
			border: 1px solid #000000;

			padding: 0 .3em 0 0;

			color: #000000;
			background-color: #FFFFFF;

			font-weight: bold;

			text-decoration: none;	
			text-transform: uppercase;
			
			letter-spacing: 2px;
			white-space: nowrap;
			}

#site-menu a span
			{
			margin-right: .5em;
			border-right: 1px solid #000000;

			color: #60E29E;
			background-color: #60E29E;
			
			letter-spacing: 3px;
			} 
		
			
/*]]>*/ 
</style> 

</head>
<body>


<div id="site-menu">
	<ul>
		[*]<span>.</span>xxxxxxx
		[*]<span>.</span>xxxxxxx
		[*]<span>.</span>xxxxxxx
	[/list]</div>


</body></html>

Laut W3C sind margin/border/padding -left/-right Values auch bei Inline-Elementen zu beachten! Das dies in der Vergangenheit nicht alle Browser taten - Okay. Aber hier handelt es sich ja um den neuesten Opera

<edit> Titel geändert

IChao · #2 (**permalink**) 16.08.2005, 20:17

Ich denke, das ist ein Bug.

Opera8 scheint den margin-right nicht für die Breite der Box einzurechnen.

Wenn man z.B.

Code:

#site-menu a span
         {
         margin-right: 50px;
          }

setzt, schiebt sich der halbe Inhalt heraus.

Dieter · #3 (**permalink**) 16.08.2005, 21:24

Hallo, Ulle!

Erinnert mich an das Problem, das IE5 mit zwei Inline-Elementen in einem Listenpunkt hat!

Mach doch mal nach dem schliessenden </a> und vor schliessenden eine Leertaste!

ulle · #4 (**permalink**) 16.08.2005, 23:01

@IChao .... Danke für die Bestätigung. Ich hatte schon gezweifelt und dachte dass meine W3C-Annahmen mich auch hier verlassen

zum Thema Opera hatte ich mich ja schon mal geäußert

@Dieter .... Nein, dieses Problem läßt sich nicht mit dem "alten Trick" lösen.

Wohl aber anders, zumindest ähnlich: Ich nehme die Eigenschaft margin-right für das SPAN raus und setze dafür einen BLANK ins Markup.

Code:

#site-menu a span
			{
			/* margin-right: .5em; */
...............
[*]<span>.</span> xxxxxxx

Somit komme ich fast zum gleichen Ergebnis, zumindest akzeptiert dann auch der Opera die padding-right Eigenschaft vom a-Element wieder, bzw. stellt den Inhalt dorthin wo er sein soll.

@Dieter
...... wir hatten doch mal einen THREAD zum Thema Barrierefrei mit Punkt und Blank vor dem LINK, oder?
Ich meine mich so zu erinnern, dann wäre diese Lösung ja eher Barrierefrei als ohne Blank nach dem Punkt.

ulle · #5 (**permalink**) 17.08.2005, 13:58

Dieser Inline-Element-Margin-BUG des Opera wird wohl früher oder später jeden mal treffen

Ich habe nochmal eine andere variante getestet, eine die wohl öfter mal vor kommt. Verschachtelte Inline-Elemente mit [b] und , auch da der Fehler.

Hier das Markup:

Code:

Dies ist nur ein Satz <em class="test">Dies

Code:

 ist nur ein Satz

Hier das CSS:

Code:

strong		{
			border-right: 2px solid #FF0000;
			border-left:  2px solid #FF0000;
			background-color: #DDDDDD;
			}		

em 			{
			margin-right: 4em;
			margin-left:  1em;
			background-color: #FFFF00;
			}
			
em.test		{
			margin-right: 0;
			}
						
em.test:after 
			{
			padding-right: 4em;
			
			content: '';
			background-color: #FF9900;
			}

Mit padding und border hat der Opera kein Problem, dies habe ich ausgiebig getestet. Selbst mit :after + padding versteht er sich der Opera.
Hier liegt evtl. auch der Workaround zum BUG, nur fehlt mir die Kenntnis einen Selektor nur für den Opera zu schreiben.

Oder getreu dem "neuen" Motto

zeige dem Nutzer die Fehler der Browser, einfach nach W3C -- fertisch

Dieter · #6 (**permalink**) 17.08.2005, 20:09

Hallo, Ulle!

Das hier:

Zitat:

@Dieter
Ich meine mich so zu erinnern, dann wäre diese Lösung ja eher Barrierefrei als ohne Blank nach dem Punkt

erklär mir bitte etwas genauer!?

Ja, dieses Thema hatten wir bereits mehrfach, in etlichen Varianten! Bisher aber immer(?) in verbindung mit IE5.

Das Problem besteht aber vor allem darin, den verdeckten Punkt im Link unterzubringen, nicht lediglich vor dem Abschliessen des Listeneintrags. Das lässt sich aber mit der Leertaste vor dem </a> beheben.

Code:

[*]Zur Startseite<span class="unsichtbar">.</span>

Selbst dann, wenn ein weiterer <span> (PHP-Anweisung zum "Totschalten" der Linkfunktion) vor dem Ende des Listeneintrags kommt.

ulle · #7 (**permalink**) 17.08.2005, 21:18

Zitat:

Zitat von Dieter Krautkraemer

Zitat:

@Dieter
Ich meine mich so zu erinnern, dann wäre diese Lösung ja eher Barrierefrei als ohne Blank nach dem Punkt

erklär mir bitte etwas genauer!?

Ich habe den entsprechenden THREAD gefunden. Wenn ich das nun richtig verstanden habe

könnte ich mit dieser Lösung wohl gut leben.

Dieter · #8 (**permalink**) 17.08.2005, 21:48

Hallo, Ulle!

Hier muss man erst einmal eine Trennung vornehmen in aufeinanderfolgende Links und beinzelne Links in Listen wie zum Beispiel in einem Navigationsmenü.

1
Aufeinanderfolgende Links wie im Beispiel

Code:

<p class="schalter">
	zur Startseite | zum Inhaltsverzeichnis
	</p>

(kennst Du vielleicht von meiner Seite?) sollen durch ein von jeweils einer Leertaste umgebenes druckbares Zeichen getrennt werden. Welches Zeichen man nimmt, ist abhängig davon, ob die Links sichtbar sind (wie in meinem Fall) oder ob es sich um optisch verdeckte Links (zum Beispiel Sprunglinks) handelt.

Bei optisch sichtbaren Links ist das "|" sinnvoll, damit vor allem für unerfahrene Nutzer und bei eng zusammenstehenden Links eine erkennbare Trennung erfolgt; bei verdeckten Links bietet sich wegen der Kürze und Prägnanz des Ausdrucks ("Punkt" statt "senkrechter Strich") der Punkt an. Alle anderen druckbaren Zeichen machen kaum Sinn!

2
Einzelne Links in Listen sollen mit einem Punkt abgeschlossen werden, um Screen Reader zu einer Sprechpause zu zwingen. Eine Leertaste allein genügt zum Erzwingen einer Sprechpause nicht!

ulle · #9 (**permalink**) 17.08.2005, 23:09

Zitat:

Zitat von Dieter

Einzelne Links in Listen sollen mit einem Punkt abgeschlossen werden, um Screen Reader zu einer Sprechpause zu zwingen. Eine Leertaste allein genügt zum Erzwingen einer Sprechpause nicht!

Genau auf die Sprechpause wollte ich hinaus...

Hmm, d.h. ein Punkt ohne Blank würde auch genügen um eine Sprechpause zu erzwingen. Ob der Punkt vor dem LINK-Text oder danach steht dürfte ja demnach egal sein. Pause ist Pause.

Ohne dem Punkt vor dem Text läßt sich das Layout nur noch mit Hintergrundbilder realisieren. Aber genau dieses wollte ich so elegant umschiffen und gleichzeitig die Pause erzwingen. Außerdem viel zu viele Grafiken da jeder Link eine andere Farbe haben soll. To much request......

Dieter · #10 (**permalink**) 17.08.2005, 23:22

Hallo, Ulle!

Der Punkt soll den Link beenden, nicht den Listeneintrag. Der Punkt muss also vor dem schliessenden </a> kommen!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfänger: Positionierung.	xam	CSS	3	19.05.2012 14:18
joomla template	wrock	CSS	2	06.04.2012 19:24
ff ie8 negativer margin - HILFE!!!!!!	nixchecker	CSS	14	07.02.2012 16:20
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Float-Reihenfolge?	wolf1985	CSS	0	21.08.2008 01:35