zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Opera 8 BUG / Margin-Fehler bei Inline-Element

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2005, 13:52
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Opera 8 BUG / Margin-Fehler bei Inline-Element

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2005, 20:17
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2005, 21:24
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2005, 23:01
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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>
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2005, 13:58
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2005, 20:09
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Selbst dann, wenn ein weiterer <span> (PHP-Anweisung zum "Totschalten" der Linkfunktion) vor dem Ende des Listeneintrags kommt.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2005, 21:18
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2005, 21:48
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 17.08.2005, 23:09
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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......
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.08.2005, 23:22
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo, Ulle!

Der Punkt soll den Link beenden, nicht den Listeneintrag. Der Punkt muss also vor dem schliessenden </a> kommen!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:02 Uhr.