nicht angemeldet
Gespiegeltes Hintergrundbild im IE
0 0 0 
Gunnar Bittersmann
0 
MudGuard
0 ARRGGGGHHH--
Gespiegeltes Hintergrundbild im IE
Hallo Forum!
Nicht zum ersten Mal nervt der IE mit dämlichen Darstellungsfehlern, aber diesen hier hab ich noch nie gehabt.
Eine einfache Seite mit Navigationsspalte auf der linken Seite:
<!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" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="">Foo</a></li>
<li>Bar</li>
<li><a href="">Baz</a></li>
</ul>
<div id="content">
...
</div>
</div>
</body>
</html>
#container {
background: url(img/bg.jpg) repeat-y 0 0; /* Faux Columns */
margin: 0;
padding: 0;
}
#nav {
width: 120px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
text-align: center;
margin: 0 0 0.5em 0;
font-weight: bold;
}
#content {
margin: 0 0 0 130px;
}
Das Phänomen: In unregelmäßigen Abständen wird beim Neuladen der Seite im IE 6 ein Block des Hintergrundbildes in der Navigation einfach gespiegelt dargestellt, während der Rest des Bildes normal bleibt.
Wenn ich zusätzlich z.B. die Farbe der Navigationslinks über #nav a:hover {color:#000} verändere, werden sogar die Streifen des Hintergrundbildes gespiegelt, die hinter dem "gehoverten" Link liegen.
Was ist das für'n Mist? Kennt jemand dieses Problem mit dem IE? Gibt es eine Lösung? Ich habe nicht die leiseste Ahnung, woran sich dieser dämliche Browser stört. Andere Bilder hab ich auch schon ausprobiert; sogar mit unterschiedlichen Grafikprogrammen erstellt.
Beste Grüße,
Alex
-
background: url(img/bg.jpg) repeat-y 0 0; /* Faux Columns */
nur ne idee, probiers mal andersrum:
background: url(img/bg.jpg)0 0 repeat-y;
Paul
-
background: url(img/bg.jpg)0 0 repeat-y;
background nimmt in kurzform werte für: background-color, background-image, background-attachment, background-repeat, background-position
in genau dieser reihenfolge - dass andere reihenfolgen funktionieren ist nicht vorgesehen und wenn der fehlerkorrektur des browsers zu verdanken
-
@@suit:
background nimmt in kurzform werte für: background-color, background-image, background-attachment, background-repeat, background-position
in genau dieser reihenfolge - dass andere reihenfolgen funktionieren ist nicht vorgesehen und wenn der fehlerkorrektur des browsers zu verdanken
Wo immer du diesen Unsinn her hast – aus der CSS-Spezifikation ganz sicher nicht.
Schau dir das Beispiel zur 'background'-Eigenschaft in [CSS2 §14.2.1] bzw. [CSS21 §14.2.1] an!
Das Format des Werts der 'background'-Eigenschaft ist:
[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit'||' ist in [CSS2 §1.3.2] erklärt: „Ein doppelter Längsstrich (||) trennt zwei oder mehr Optionen voneinander ab: eine oder mehrere davon müssen in beliebiger Reihenfolge erscheinen.“
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
Wo immer du diesen Unsinn her hast – aus der CSS-Spezifikation ganz sicher nicht.
ggf ist es sicher mal schlau, die spezifikation komplett durchzulesen - bisher hab ich viele informationen aus büchern bezogen, wohl nicht die besten wie es scheint - glücklicherweise hab ich selbst nix davon gekauft
-
@@suit:
ggf ist es sicher mal schlau, die spezifikation komplett durchzulesen
Ach was, man vergisst sowieso das meiste davon wieder.
Allerdings ist es sicher schlau, im konkreten Fall an der konkreten Stelle der Spezifikation nachzulesen.
bisher hab ich viele informationen aus büchern bezogen, wohl nicht die besten wie es scheint - glücklicherweise hab ich selbst nix davon gekauft
Die besten gibt’s ja auch für umme: http://de.selfhtml.org/@title=SELFHTML und Michael Jendryschiks Einführung in XHTML, CSS und Webdesign.
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
Die besten gibt’s ja auch für umme: http://de.selfhtml.org/�,u�*@title=SELFHTML und Michael Jendryschiks Einführung in XHTML, CSS und Webdesign.
das zweite kenn ich ;)
ich bin schon ein paar mal drübergestolpert aber nie von vorne bis hinten gelesen
-
-
-
-
Hi,
background: url(img/bg.jpg)0 0 repeat-y;
Der einzige Fehler hier ist der fehlende Whitespace zwischen ) und 0.
background nimmt in kurzform werte für: background-color, background-image, background-attachment, background-repeat, background-position
in genau dieser reihenfolge - dass andere reihenfolgen funktionieren ist nicht vorgesehen und wenn der fehlerkorrektur des browsers zu verdankenFalsch. Die Reihenfolge ist fast beliebig (die beiden Werte für die background-position unterliegen denselben Einschränkungen wie wenn background-position einzeln benutzt wuerde).
http://www.w3.org/TR/CSS21/colors.html#propdef-background:
'background'
Value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherithttp://www.w3.org/TR/CSS21/about.html#value-defs: A double bar (||) separates two or more options: one or more of them must occur, in any order.
Beachte die || und die letzten 3 Worte "in any order".
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
Hallo Forum!
Ich habe das Problem gefunden. Das Posten hier im Forum hat mehr gebracht als die 2 Stunden Debugversuche davor.
Beim Konstruieren meines Minimalbeispiels habe ich übersehen, daß noch eine Formatierung für die
line-heightaus einem anderen Stylesheet aktiv ist. Die tauchte nicht im hier geposteten Code auf, ist aber der Auslöser für den Bug.Entferne ich das ganz simple
body {line-height:1.5em;}aus dem CSS-Code, so verschwindet das geschilderte Problem im IE. ARRRGGGHHH----Danke fürs Zuhören,
Alex