Border und em - unberechenbar

ZodiacXP

Erfahrenes Mitglied
Eine Rahmendicke soll mit .em definiert werden, da die Position der Elemente ebenfalls durch em angegeben wird und damit beim Zoomen auch der Rahmen vergrößert wird (ich hab vergessen bei welchen Browser das so ist).
Das lustige daran ist, dass jeder Browser die Sache anders anzeigt. Es geht teilweise um feine Linien die um 1 Pixel verschoben sind, was das Design stört.

Schafft man es im Standards-Mode, ohne zusätzliche div / span und mit möglichst wenigen Hacks "solch ein Design" zu realisieren? Welche Tricks gibt es?

Habe gehört Screenreader verstehen nicht immer Block-Elemente wie div, deswegen möchte ich nun darauf verzichten.
 
Hi,

hast du mal ein Fallbeispiel zur Hand, in dem diese Unstimmigkeiten zum Tragen kommen?

Ich kann da nämlich keine in einem der aktuell gängigen Browser reproduzieren.

Irgendwelche spezielle "Workarounds" und/oder "Hacks" sind mir da aber auch nicht bekannt.

mfg Maik
 
Argh. Gerade eclipse geschlossen ^^

Ich habe vergessen zu sagen, dass die Elemente mit position:absolute positioniert werden.

Folgendes spinnt z.B. in IE 5.5, 6, 7 (verschoben) IE 8 (Inhalt geht rechts in den Rand):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Foo</title>
</head>

<style type="text/css">
<!--

*
{
	margin: 0;
	padding: 0;
}

.breadcrumb
{
	position: absolute;
	left: 8em;
	top: 5.8em;

	line-height: 1em;
	
	border: 0.1em #f00 solid;

}

.side
{
	position: absolute;
	top: 6.9em;
	width: 8em;
	
	border: 0.1em #f00 solid;
	border-left: 0;
	
	display: block;
}


/* Sonstiges */
 
.breadcrumb LI { list-style-type: none; }
.breadcrumb A { text-decoration: none; }

//-->
</style>

<body>

<ul class="breadcrumb">
	<li>
		<a href="#">Hier werden mehrere LI stehen mit float:left</a>
	</li>
</ul>

<ul class="side">
	<li>
		<a href="#">Side</a>
	</li>
	<li>
		<a href="#">Bar</a>
	</li>
</ul>

</body>
</html>
 
Zuletzt bearbeitet:
@IE5.5: Dieser unterstützt überhaupt nicht das angewandte "CSS-Boxmodell" für .side.

@IE8: Dort erkenne ich kein Überlappen des Inhalts in den Rahmenbereich.

Ich habe vergessen zu sagen, dass die Elemente mit position:absolute positioniert werden.
Auch diesen Fall hatte ich vorhin in meinem Probelauf berücksichtigt.

mfg Maik
 
0.05em ist das Zauberwort, damit die gängigen Browser die Linie ca. 1px breit machen. Jedenfalls klappt das bei mir bisher :D
Dadurch verschiebt sich bei mir dann auch nix mehr. Hoffe das etwas hilft.
^^
 
Gut, bleibt IE8 unbeachtet. Ein bisschen padding-right, dann passt das.

Scheinbar klappt mein IETester nicht. Womit testest du es?
(http://www.my-debugbar.com/wiki/IETester/HomePage)

Meintest du bei IE 5.5 den Box-Modell Bug?
Den habe ich wie folgt behoben:
Code:
.breadcrumb
{
	position: absolute;
	top: 5.8em;
	left: 7.9em;
	
	border: 0.1em #f00 solid;
	
	line-height: 1em;

	/* Gegen IE 5.5 */
	voice-family: "\"}\""; voice-family:inherit; 
	left: 8em;
	top: 5.9em;
}

Leider schon der erste Hack. Hatte gehofft das geht ohne. Müssen also auch noch welche für IE6 und 7 her :(

@Larrywayn: Mit 0.05em berechnet sind die Probleme ähnlich.

EDIT: Sorry. Dieser Hack. Gerade war falsch.
 
Zuletzt bearbeitet:
Den krummen Wert von 0.05 abrechnen ^^
0.25em sind dann 3px. Ausgehend von 16 px für die Schrift, ansonsten ist das ja alles proportional zueinander und relativ. Das sollte aber klar sein :D

Trotzdem stellen Opera und IE+Firefox das Beispiel unterschiedlich da.
Im Opera hängen die Linien immer zusammen, während bei den anderen beiden manchmal Abstände und Lücken entstehen. Habe mir das jetzt nicht genauer angeguckt nur als Hiwneis O:
 
Die Überlappungen sind so gut wie bezwungen.

Habe VM mit WinXP installiert und dort IE5.5 Standalone neben anderen IE Versionen und .side aus dem Ausgangsdokument wird dort wie erwartet (abgesehen von den Listenpunkten) angezeigt.

@IE5.5: Dieser unterstützt überhaupt nicht das angewandte "CSS-Boxmodell" für .side.
Das stört mich jetzt noch. Wie sieht es bei dir denn aus?

Steht die Liste einfach nur oben links in der Ecke? Das passiert bei IE 5.01 bei mir.
 
Zuletzt bearbeitet:
Zurück