✔ Hintergrundbild von 1x2 Pixel ausrichten in unterschiedlichen Browsern

[son gohan]

Hi,

ich habe mir ein Menü gebaut und kappiere nicht wieso ich es nicht hinbekomme mein Hintergrundbild so zu positionieren, das es in den Brwosern IE,NN,OP und moz gleich aussieht.

Der Unterschied in meinem Beispiel unter http://n-k-s.de/navi.html beträgt nur 1 Pixel. Im IE ist beim linken active Link das Hintergrundbild 1 Pixel zu weit unten oder oben, ist schwer zu sagen. In den anderen erwähnten Browsern allerdings fließt das Hintergrundbild mit dem des Div Container zusammen.

Ich bekomme es nicht hin das das ganze in allen Browser gleich aussieht, entwerder hängt im IE 1 Pixel oder in den anderen Browsern zu weit oben/unten.

Da es nur 1 Pixel ist weis ich auch nicht ob das was mit einem Bug zu tun haben könnte.

Schaut es euch einfach mal an.

 

[Quaese]

Hi,

positioniere doch einfach das Hintergrundbild für den IE ein Pixel versetzt. Du kannst zum
Beispiel CSS-Definitionen mit !important auszeichnen. Existieren die gleichen Definitionen
auch ohne den important-Zusatz, werden sie von Nicht-IE-Browsern übergangen. Der IE jedoch
interpretiert die weniger wichtigen Werte. Damit können spezielle Werte für den IE angegeben
werden.

#this #av a, #this #av a:link, #this #av a:visited, #this #av a:hover
{
background: url(http://n-k-s.de/titel.gif) 0 0 #0D68B3 !important;  /* Nicht-IE-Browser */
background: url(http://n-k-s.de/titel.gif) 0 1px #0D68B3;  /* IEs */
/* ... */
}

Ciao
Quaese

 

[Maik]

Ich bin mir jetzt nicht sicher, ob es den Fehler behebt, aber auf jeden Fall solltest du die rotmarkierten HTML-Kommentare aus dem StyleSheet entfernen:

<style type="text/css">
<!--
/*<![CDATA[*/


/*]]>*/
-->
</style>

Anmerkung: das Thema <![CDATA[ (und die korrekte Syntax) hatten wir doch schon mit deinen XML-Seiten beim Einbinden von Script- und StyleSheet-Bereichen im (x)HTML-Source:

1. Menü soll in IE,OP,NE, und FI gleich aussehen, brauche etwas hilfe
2. Schema Validator XHTML

 

[Maik]

Habe deinen CSS-Code detailierter angeschaut und eine Diskrepanz (= Unstimmigkeit) in deinen padding-Angaben entdeckt, die scheinbar den Darstellungsfehler im IE auslösen:

#this a, #this a:link, #this a:visited
{
padding: 3px 8px 4px 8px; /* Innenabstand oben rechts unten links */
}

#this #av a, #this #av a:link, #this #av a:visited, #this #av a:hover
{
padding: 4px 8px 7px 8px; /* Innenabstand oben rechts unten links */
}

Wenn ich für die Selektoren #this a, #this a:link, #this a:visited ebenfalls padding: 4px 8px 7px 8px; einsetze, ist der Darstellungsfehler verschwunden ;-]

 

[son gohan]

Wow,

Quaese und maik, beide Lösungen funktionieren, da habt ihr mich aber wieder einmal ganz positiv überrascht, dickes Kompliment an beide.