✔ Border in verschiedenen Browsern

[Hirnhamster]

Hey, ich habe das Problem, dass verschieden Browser die Border-Angaben leicht anders interpretieren.

Das Element hat folgende Eigenschaften:

h1	{ 
           border:solid 1px #555555;
           border-width: 1px 1px 1px 5px;
           border-left-color:#ff7200;
           border-right-color:#cccccc;
           background-color:#cccccc;
	}

Es geht nun darum, dass der Rahmen links 5 px breit ist, jedoch wird das nicht einheitlich dargestellt.

Opera z.B. zeigt oben und unten keinen Strich keinen "Strich" über dem linken orangenen Rahmen, IE zeigt ihn oben und unten, FF nur oben.

Hoffe ich habe mich verständlich ausgedrückt...

 

[Maik]

Stu Nicholls ist auch schon über dieses Problem gestolpert -> Stu Nicholls | CSSplay | Border Colors

 

[Hirnhamster]

und so wies aussieht, hat er auch keine lösung gefunden :/

 

[Maik]

Dann muß wohl ein kleiner "Workaround" herhalten, um in den unterschiedlichen Browsern eine einheitliche Darstellung zu erreichen

h1        {
           border:solid 1px #555555;
           border-width: 1px 1px 1px 0;
           border-right-color:#cccccc;
           background-color:#cccccc;
        }

<h1><span style="float:left;width:5px;background:#ff7200;overflow:hidden;">&nbsp;</span>Überschrift 1. Ordnung</h1>

 

[Maik]

Mir ist da gerade eine elegantere Variante eingefallen

h1        {
           border:solid 1px #555555;
           border-width: 1px 1px 1px 0;
           border-right-color:#cccccc;
           background-color:#ff7200;
           padding-left: 5px;
        }

<h1><span style="display:block;background:#cccccc;">Überschrift 1. Ordnung</span></h1>