Hintergrundbild wird vom IE nicht angezeigt

Moin, Moin…

Soweit alles klar, nun gibt es aber noch zwei Probleme
Der IE will mein Hintergrundbild nicht anzeigen, dass ich in den Body gesetzt habe. Bei Firefox zeigt er es aber an.

Und Abstand vom oberen Rand des Contents zum Text ist beim IE auch nicht da.
Ich habe die Seite, wie gesagt, bei Weebly gecodet. Jetzt habe nur noch diese beiden Probleme…

Der IE will mein Hintergrundbild nicht anzeigen, dass ich in
den Body gesetzt habe. Bei Firefox zeigt er es aber an.
Ich habe die Seite, wie gesagt, bei Weebly gecodet.

Älter Versionen von IE sind nicht immer 100% kompatibel mit dem HTML Standard. Vielleicht funktioniert die neueste Version von IE einwandfrei?

Ein weiterer Ansatz wäre, mal nach dem Problem zu suchen mit Google: Stichworte Weebly IE inkompatibilität (oder so)

Ansonsten must du den Code, der von Weebly erzeugt wurde, analysieren, rausfinden, was dem IE da nicht passt und eine Workaround entwickeln. Ich kann dazu selbstverständlich gar nichts sagen, da du ja keine Code gepostet hast.

Gruß sadran

Moin,

Der IE will mein Hintergrundbild nicht anzeigen, dass ich in
den Body gesetzt habe. Bei Firefox zeigt er es aber an.

Tut mir leid, aber da kann jeder nur antworten: Dann hast Du was falsch gemacht. Du musst schon mindestens den Code zeigen oder besser einen Link zur Seite - wie soll man den Fehler sonst finden?

Hintergrundbilder gehen mit der CSS-Eigenschaft „background-image“.

Und Abstand vom oberen Rand des Contents zum Text ist beim IE
auch nicht da.

Da gilt das selbe wie für die erste Frage.
Abstände macht man mit „margin“ bzw. „padding“.

Außerdem gibt es „den IE“ nicht. Hintergrundbilder sollten in allen CSS-fähigen IEs problemlos gehen, Abstände auch. Wenn Du bei Deinem Code allerdings nicht den richtigen Doctype verwendest, kann der IE in den Quirks Mode schalten, wo er ein falsches Box Model benutzt, was gerade bei Abständen zu Unterschieden führt.

Ich habe die Seite, wie gesagt, bei Weebly gecodet.

Das ist dem Browser eigentlich ziemlich egal. Wichtig ist, was am Ende rauskommt; und wenn Du feststellst, dass dieses Programm schlechten Code erzeugt, dann musst Du u.U. eine Alternative suchen.

Liebe Grüße,
-Efchen

Tach,

Älter Versionen von IE sind nicht immer 100% kompatibel mit
dem HTML Standard.

Mit HTML hat der IE - auch in Version 6 - weniger Probleme. Die größten Probleme hat er mit CSS. Zur Darstellung von Hintergrundbildern oder Abständen ist allerdings auch CSS zuständig und nicht HTML.

Vielleicht funktioniert die neueste Version
von IE einwandfrei?

Was den Nutzern mit älteren Versionen des Browsers auch nicht weiter hilft!

Grüße,
-Efchen

Morgen

Vielleicht funktioniert die neueste Version
von IE einwandfrei?

Was den Nutzern mit älteren Versionen des Browsers auch nicht
weiter hilft!

Ich habe da eine etwas radikalere Einstellung: Ich schreibe nach standard, dh so wie es spezifieziert wurde. Wenn dann alter IE Micro-schrott :smile: dies nicht anzeigen kann: Pech gehabt.

Man kann nicht immer alles kompatibel halten, vorallem wenn es nicht die eigenen Schuld ist, warum etwas nicht richtig angezeigt wird, sondern die Schuld des anzeigendes Programms.

Im übrigen wirst du größte Probleme haben moderne, heutige Seiten auf den allerersten IE angezeigt zu bekommen. Irgendwann muss halt mal jeder User upgraden :smile:

Aber ich tolleriere selbstverständlich auch andere Meinungen: die möglichst so schreiben wollen, daß es auf absolut jeden alten Broser läuft :smile:

Gruß sadran

Tach,

Ich habe da eine etwas radikalere Einstellung: Ich schreibe
nach standard, dh so wie es spezifieziert wurde. Wenn dann
alter IE Micro-schrott :smile: dies nicht anzeigen kann: Pech
gehabt.

Prinzipiell hat das was Wahres. Aber man sollte das bis zu Ende denken, dann klingt das „Pech gehabt“ auch nicht so hart.

Ziel des WWW ist ja (bekanntermaßen) das zur Verfügung stellen von Informationen für ALLE. Geht ja auch ganz einfach, indem man sich an die Standards hält. Für die Inhalte ist ja allein HTML zuständig. Schreibt man standardkonformes HTML, bietet man Informationen für alle und barrierefrei.

Die Darstellung ist ja nochmal ein ganz anderer Schuh, den man ja (bekanntermaßen) strikt von HTML trennen soll. Denn dann sind Darstellungsprobleme einzelner Browser kein Thema mehr. Denn Darstellung ist ja nur das Bonbon oben auf den Informationen.

Sprich, auf die Weise ist eine Website immer von allen nutzbar, wenn ein Browser keine runden Ecken kann, na dann zeigt er halt eckige an. Wenn ein Browser echte Probleme hat mit etwas, dann ist das zumindest nicht Schuld des Entwicklers.

Wer veraltete Software nutzt, bekommt nicht alle Möglichkeiten geboten, wer fehlerbehaftete benutzt, hat Darstellungsprobleme. Das ist dann wirklich „Pech gehabt“. Aber alle haben eines gemeinsam, auch die mit den fehlerhaften oder alten Browsern: Durch standardkonformes HTML, das ordentliche Semantik festlegt, können alle die Inhalte trotzdem nutzen.

Man kann nicht immer alles kompatibel halten

Es kommt ja darauf an, was.
Wichtig ist, dass die Inhalte da sind und semantisch korrekt ausgezeichnet sind. Denn Inhalte werden ja nicht nur dargestellt.

Im übrigen wirst du größte Probleme haben moderne, heutige
Seiten auf den allerersten IE angezeigt zu bekommen.

Nicht wirklich, oder?
Es sollten trotzdem alle Inhalte angezeigt werden und sie haben auch alle die festgelegte Semantik.

Irgendwann muss halt mal jeder User upgraden :smile:

Aber nicht jeder kann oder darf das.

Aber ich tolleriere selbstverständlich auch andere Meinungen:
die möglichst so schreiben wollen, daß es auf absolut jeden
alten Broser läuft :smile:

Hier meinst Du was anderes, als Du schreibst. Dass es auf allen Browsern „läuft“, ist mit standardkonformem HTML kein Problem. Dass alles in allen Browser gleich „aussieht“ - das geht gar nicht.

Grüße,
-Efchen

Hier meinst Du was anderes, als Du schreibst. Dass es auf
allen Browsern „läuft“, ist mit standardkonformem HTML kein
Problem. Dass alles in allen Browser gleich „aussieht“ - das
geht gar nicht.

Es ist sehrwohl vorgeschrieben hat, wie etwas „aussieht“, wie etwas dargestellt werden soll.

Reden wir mal von reinem HTML Standard (gleiches gilt auf für CSS, etc):
Beispie
Es ist eben vorgeschrieben, daß eine Tabelle in Zeilen aufgeteilt ist und dann eine Zeile wiederum die einzelnen Elemente enthält.
Interpretiert das ein Browser genau anders rum, dh. erst Spalten dann Zeilen, ist es eben falsch.

Diest ist jetzt ein sehr einfach und würde sofort auffallen. Aber genauso gibt es auch in HTML und vorallem in den IE´s (bis auf den letzen) eine ganze Anzahl von Dingen, die falsch vom IE und gegen den HTML Standard implentiert wurden.

Exakt gleiches gilt für CSS. Auch hier ist exakt definiert, welche Element, wie das Aussehen verändern. Da gibt es keinen Interpretationsbedarf.

Da gibt es auch kein Pardo: Wenn man etwas nach Standard schreib, dann muss die Seite selbst auf allen Browsern (rhein theoretisch) exakt gleich angezeigt werden. (und ich rede hier nicht von Außen-Rändern oder Menues des Browsers, die selbstverständlich Betriebssystem abhängig sind)

Es gibt auch Broser test, die genau diese Standard konformität überprüfen: Alle Browser vor dem letzten IE erreich „gerade“ mal 98%. Firefox erreicht hier schon sehr lange 100%.

Gruß sadran

Hier habe ich mal den Code gepostet, der von Weebly angeboten wird. Man kann ihn dann anpassen.

Los gehts mit dem, was Weebly „Index.html“ nennt:

{title}
EgoPress
{title}

{activeitem}- {activeitemtitle}
{/activeitem}
{item}- {itemtitle}
{/item}

dann gehts weiter mit der "main-style.csss:

/* --------------------------------------------------
CSS Document For Leaves v1.0 - Anthonyy @ OSWD.org
-------------------------------------------------- */

body {
background: transparent url(Lobo.jpg)repeat-y;
font: 100% sans serif;
color: #000;
background-color: #fff;

}

a {
color:#CC6714;
text-decoration: none;
}

a:hover {
color:#CC6714;
background-color: #F5F5F5;
}

form {
font-size: 11px;
}

input {
background-color: #FFF;
color: #999999;
border: 1px solid #CCC;
font-size: 11px;
padding: 3px;
}

.button {
padding: 2px;
}

#header {font: 4.8em serif;

text-align: center;
background-color: #e3f5f3;
color: black;
border-bottom: #6f7400 2px solid;
margin-top: 30px;
margin-left: 300px;
width: 510px;
height: 79px;
border-bottom: 20px solid black;
border-top: 20px: solid black;
border-left: 10px solid gray;
border-right: 10px solid gray;

}

#header p {

margin: 0;
}

#navigation {
background:#ECECEC
;
float:left;
width:160px;

margin-top: 60px;
font-weight: bold;
font-size:1.1em;
border: 5px groove;

}
#navigation ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: left;
width: 140px;
}

#navigation a {
display: block;
padding: 5px;
width: 140px;
border-bottom: 1px solid #CCC;
}

#navigation a:link, #navlist a:visited {
color: blue;
text-decoration: none;
}

#navigation a:hover {
background: #000000;
background-color: #F5F5F5;
color:#CC6714;
}
#active a:link {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:hover {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:visited {
background: #00000;
background-color: #e4e4e4;
color:#CC6714;
}

/

#navigation p {
margin-top: 50px;
padding: 5px;
border-bottom: 1px dotted #CCC;
border-top: 1px dotted #CCC;
}

#content {

float: left;
width: 750px;
min-height:500px;
background-color: blue;
padding-left: 15px;
padding-bottom: 140px;
height:740px;
margin-top: 30px;
border-left: 5px groove gray;
border-top: 5px groove gray;
border-right: 5px groove gray;

}

#content p {
line-height:1.5;
padding-bottom: 100px; */
border-bottom: 1px solid #DDDDDD;
background-color: blue;
}

/* SIDEBAR ELEMENTS */

/* FOOTER ELEMENTS */

#footer {
margin-top: 20px;
clear: both;
background-color:black;
padding: 0px 5px 0px 5px;
}

#footer p {
color:#89817f;
padding: 5px;
}

#footer p a {
color: #89817f;
border-bottom: 1px dotted #89817f;
}

#footer p a:hover {
color: #FFFFFF;
background-color:#575352;
}

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #e4e4e4;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #ccc;
text-decoration: none;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
font-weight: normal;
line-height:1;
height:22px;
padding:3px 3px 3px 3px;
color: #cc6633;
}

#weebly-menus .weebly-menu li a:hover {
background: #d4d3d3;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow…) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

{content}

{footer}

Wo liegt jetzt der Fehler mit dem Hintergrundbild?

Hier habe ich mal den Code gepostet, der von Weebly angeboten wird. Man kann ihn dann anpassen. Weils ja ein Baukasten ist, sind Html und Css gesonders gecodet

Los gehts mit dem, was Weebly „Index.html“ nennt:

{title}
EgoPress
{title}

{activeitem}- {activeitemtitle}
{/activeitem}
{item}- {itemtitle}
{/item}

dann gehts weiter mit der "main-style.csss:

/* --------------------------------------------------
CSS Document For Leaves v1.0 - Anthonyy @ OSWD.org
-------------------------------------------------- */

body {
background: transparent url(Lobo.jpg)repeat-y;
font: 100% sans serif;
color: #000;
background-color: #fff;

}

a {
color:#CC6714;
text-decoration: none;
}

a:hover {
color:#CC6714;
background-color: #F5F5F5;
}

form {
font-size: 11px;
}

input {
background-color: #FFF;
color: #999999;
border: 1px solid #CCC;
font-size: 11px;
padding: 3px;
}

.button {
padding: 2px;
}

#header {font: 4.8em serif;

text-align: center;
background-color: #e3f5f3;
color: black;
border-bottom: #6f7400 2px solid;
margin-top: 30px;
margin-left: 300px;
width: 510px;
height: 79px;
border-bottom: 20px solid black;
border-top: 20px: solid black;
border-left: 10px solid gray;
border-right: 10px solid gray;

}

#header p {

margin: 0;
}

#navigation {
background:#ECECEC
;
float:left;
width:160px;

margin-top: 60px;
font-weight: bold;
font-size:1.1em;
border: 5px groove;

}
#navigation ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: left;
width: 140px;
}

#navigation a {
display: block;
padding: 5px;
width: 140px;
border-bottom: 1px solid #CCC;
}

#navigation a:link, #navlist a:visited {
color: blue;
text-decoration: none;
}

#navigation a:hover {
background: #000000;
background-color: #F5F5F5;
color:#CC6714;
}
#active a:link {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:hover {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:visited {
background: #00000;
background-color: #e4e4e4;
color:#CC6714;
}

/

#navigation p {
margin-top: 50px;
padding: 5px;
border-bottom: 1px dotted #CCC;
border-top: 1px dotted #CCC;
}

#content {

float: left;
width: 750px;
min-height:500px;
background-color: blue;
padding-left: 15px;
padding-bottom: 140px;
height:740px;
margin-top: 30px;
border-left: 5px groove gray;
border-top: 5px groove gray;
border-right: 5px groove gray;

}

#content p {
line-height:1.5;
padding-bottom: 100px; */
border-bottom: 1px solid #DDDDDD;
background-color: blue;
}

/* SIDEBAR ELEMENTS */

/* FOOTER ELEMENTS */

#footer {
margin-top: 20px;
clear: both;
background-color:black;
padding: 0px 5px 0px 5px;
}

#footer p {
color:#89817f;
padding: 5px;
}

#footer p a {
color: #89817f;
border-bottom: 1px dotted #89817f;
}

#footer p a:hover {
color: #FFFFFF;
background-color:#575352;
}

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #e4e4e4;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #ccc;
text-decoration: none;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
font-weight: normal;
line-height:1;
height:22px;
padding:3px 3px 3px 3px;
color: #cc6633;
}

#weebly-menus .weebly-menu li a:hover {
background: #d4d3d3;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow…) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

{content}

{footer}

Wo liegt jetzt der Fehler mit dem Hintergrundbild?

HI
Muß ich das so verstehen,dass sich der „style“ außerhalb des head Tags oder befindet??? Es gibt keinen Hinweis auf eine externe css Datei.!!
Die „css“ gehört normalerweise in den „head Tag“ oder in eine externe css Datei. Sende einfach mal einen Link zu deiner Seite.

Egbert

Moin moin,

body {
background: transparent url**(Lobo.jpg)repeat**-y;

Was soll man dazu sagen.
da fehlt ein leeerzeichen .

Wenn was nicht erscheint, sollte man erstmal die betreffende Zeile überprüfen.

zwischen url() und repeat kommt ein leerzeichen.
denn so wird getrennt , genauso wie zwischen transparent und url ein leerzeichen kommt .

Lobo.jpg

desweiteren muss das bild dann auch im gleihcen verzeichniss wie die index.html sein.

Moin,

Da gibt es auch kein Pardo: Wenn man etwas nach Standard
schreib, dann muss die Seite selbst auf allen Browsern (rhein
theoretisch) exakt gleich angezeigt werden.

Warum setzt Du meine Kernaussage in Klammern und meinst, mich damit zu widerlegen? Tatsache ist, dass es eben nicht so ist, dass eine Website in allen Browsern gleich aussieht - selbst wenn man nur die modernen nimmt.

Darüberhinaus gibt es aber eben auch noch ältere Browser, die keine so gute oder gar keine CSS-Unterstützung haben. Da sieht es dann zwangsläufig anders aus.

Aber egal ob moderner, standardkonformer Browser, oder moderner Browser mit Fehlern oder auch veralteter Browser: Egal wie es aussieht, die Inhalte sind voll nutzbar.

Grüße,
-Efchen

Moin,

background: transparent url(Lobo.jpg)repeat-y;

Wo liegt jetzt der Fehler mit dem Hintergrundbild?

Der könnte in dem fehlenden Leerzeichen zwischen der URL und dem repeat-y liegen.

Gruß,
-Efchen

Danke für die Antwort. Dein Hinweis ist korrekt, ich habe den Fehler gleich behoben. Jetzt habe ich, im Augenblick, nur noch ein Problem mit dem Abstand vom Test zum oberen Rand des Contents.

Wie gehabt: IE macht das Zicken. Bei Firefox und Co. ist der Abstand zwischen Text und oberem Contentrand da.

Danke für die Antwort. Habe ich gleich korrigiert, und jetzt wird das Hintergrundbild angezeigt.

Probleme gibt’s, im Augenblick, nur noch mit dem Textabstand zum oberen Contentrand. Gleiches Spiel:

IE macht Zicken, Firefox und Co zeigen den Abstand an…

Moin,

Probleme gibt’s, im Augenblick, nur noch mit dem Textabstand
zum oberen Contentrand. Gleiches Spiel:

Welches Element verstehst Du unter „Content“? Sprich die Elemente doch mit ihrem Namen an, damit wir wissen, was Du meinst. Einfacher wäre es außerdem immer mit einem Link zur Seite.

IE macht Zicken, Firefox und Co zeigen den Abstand an…

Quirks Mode?

Im #header finde ich zwei unterschiedliche Definitionen von border-bottom, die sich widersprechen.

#content (finde ich nur im CSS-, nicht aber im HTML-Code) floatet. Vielleicht hat das damit was zu tun?

Link wäre schöner.

Grüße,
-Efchen

Moin, Moin…Danke für Deine Antwort. Der Link zu meiner Testseite lautet: www.aluca.weebly.com
Wie gesagt, Testseite; der Name wird noch geändert. Die Navi wird auch noch verschönert…

Das mit dem „Quirk-Modus“ habe ich nicht kapiert. Wie sieht der denn aus?
Den Code habe ich inzwischen verändert. Sieht nun so aus:

Damit funktionierts,wie gesagt, bis auf den Textabstand zum oberen Rand, den der IE nicht einhält.

HTML- bei Weebly „index.html“ genannt:

{title}
EgoPress
{title}

{activeitem}- {activeitemtitle}
{/activeitem}
{item}- {itemtitle}
{/item}

{content}

{footer}

Dann CSS- bei Weebly nennt sich das „main-style.Css“

/* --------------------------------------------------
CSS Document For Leaves v1.0 - Anthonyy @ OSWD.org
-------------------------------------------------- */

body {
background: url(bildneu3.jpg) repeat;
font: 100% courier;
color: #000;
background-color: black;

}

a {
color:#CC6714;
text-decoration: none;
}

a:hover {
color:#CC6714;
background-color: #F5F5F5;
}

form {
font-size: 11px;
}

input {
background-color: #FFF;
color: #999999;
border: 1px solid #CCC;
font-size: 11px;
padding: 3px;
}

.button {
padding: 2px;
}

#header {font: 4.8em serif;

text-align: center;
background-color: #e3f5f3;
color: black;

margin-top: 30px;
margin-left: 300px;
width: 510px;
height: 79px;
border-bottom: 20px solid black;
border-top: 20px: solid black;
border-left: 10px solid gray;
border-right: 10px solid gray;

}

#header p {

margin: 0;
}

#navigation {
background:#ECECEC
;
float:left;
width:160px;

margin-top: 60px;
font-weight: bold;
font-size:1.1em;
border: 5px groove;

}
#navigation ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: left;
width: 140px;
}

#navigation a {
display: block;
padding: 5px;
width: 140px;
border-bottom: 1px solid #CCC;
}

#navigation a:link, #navlist a:visited {
color: blue;
text-decoration: none;
}

#navigation a:hover {
background: #000000;
background-color: #F5F5F5;
color:#CC6714;
}
#active a:link {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:hover {
background: #000000;
background-color: #e4e4e4;
color:#CC6714;
}
#active a:visited {
background: #00000;
background-color: #e4e4e4;
color:#CC6714;
}

/

#navigation p {
margin-top: 50px;
padding: 5px;
border-bottom: 1px dotted #CCC;
border-top: 1px dotted #CCC;
}

#content {
color: white;
float: left;
width: 750px;
min-height:500px;
background-color: #002B40;
padding-left: 15px;
padding-bottom: 140px;
height:740px;
margin-top: 30px;
border-left: 5px groove gray;
border-top: 5px groove gray;
border-right: 5px groove gray;

}

#content p {
line-height:1.5;
padding-bottom: 100px; */
border-bottom: 1px solid #DDDDDD;

}

/* SIDEBAR ELEMENTS */

/* FOOTER ELEMENTS */

#footer {
margin-top: 20px;
clear: both;
background-color:black;
padding: 0px 5px 0px 5px;
}

#footer p {
color:#89817f;
padding: 5px;
}

#footer p a {
color: #89817f;
border-bottom: 1px dotted #89817f;
}

#footer p a:hover {
color: #FFFFFF;
background-color:#575352;
}

#weebly-menus .weebly-menu-wrap {
z-index: 5000;
}

#weebly-menus .weebly-menu {
padding: 0;
margin: 0;
list-style: none;
}

#weebly-menus .weebly-menu li {
float: left;
clear: left;
width: 170px;
text-align: left;
}

#weebly-menus .weebly-menu li a {
position: relative;
display: block;
width: 100%;
background: #e4e4e4;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #ccc;
text-decoration: none;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
font-weight: normal;
line-height:1;
height:22px;
padding:3px 3px 3px 3px;
color: #cc6633;
}

#weebly-menus .weebly-menu li a:hover {
background: #d4d3d3;
}

#weebly-menus span.weebly-menu-title {
display: block;
padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow…) no-repeat center top;
display: block;
position: absolute;
right: 5px;
top: 0;
font-family: Courier;
height: 28px;
line-height: 28px;
padding:1px 0 3px 0;
}

Guten Morgen!

Wie gesagt, Testseite; der Name wird noch geändert. Die Navi
wird auch noch verschönert…

Ist schon okay :smile:
Ich kann aber jetzt verstehen, warum der IE sich geweigert hat, das Hintergrundbild anzuzeigen, das wäre mir auch etwas zu viel des Guten :wink:

Das mit dem „Quirk-Modus“ habe ich nicht kapiert. Wie sieht
der denn aus?

Wo hast Du denn etwas darüber nachgelesen, was Du nicht verstanden hast?

Den Code habe ich inzwischen verändert. Sieht nun so aus:

Das sehe ich ja auf der Seite.

Damit funktionierts,wie gesagt, bis auf den Textabstand zum
oberen Rand, den der IE nicht einhält.

Welcher Textabstand zu welchem Rand?
Nenn das Kind bitte beim Namen.
Meinst Du „div#wsite-content h2“?

Naja, ist doch ganz einfach, noch einfacher, als Du glaubst:

Zeig mir bitte, wo im Code Du an der Stelle einen Abstand definiert hast!
Kannst Du nicht? Eben. Du hast an der Stelle den Browsern gesagt: „Ich habe keinen speziellen oberen Abstand zwischen der Überschrift und dem Elternelement festgelegt. Macht das bitte nach Eurem Gutdünken.“ - und genau das machen die Browser. Firefox möchte einen Abstand haben, der IE nicht.

Wenn Du etwas haben möchtest, dann gilt in CSS, dass Du es explizit setzen musst. Was Du nicht setzt, ist gleichbedeutend mit „ist mir egal“. Deswegen haben so viele Websites bei mir gelbe oder rosafarbene Hintergründe. Weil sie die Hintergrundfarbe nicht setzen. Es gibt nur Empfehlungen des W3C, aber keine Vorschriften, wie die Default-Eigenschaften eines Elements aussehen sollen.

Also setze einen Abstand und dann kriegst Du auch einen Abstand (getestet mit IE9).

Liebe Grüße,
-Efchen

Danke für Deine Antwort.

Was den Abstand betrifft, da meine ich den Abstand zwischen meinem Text: „Das ist ein Testtext…“ und dem vorgegebenen oberen Rand des Contents. Und da habe ich einen gesetzt: margin-top: 30px;
Margin definiert doch den Abstand…

Und das Hintergrundbild wird, soweit ich gesehen habe, doch jetzt vom IE angezeigt. Was meinst Du denn mit „zuviel des Guten?“
Wahrscheinlich vielen „Köpfe“ von meiner einem.

Ich wollte das ja auch ganz anders. Eigentlich wollte ich die Wiederholungen nur am linken und rechten Rand… oben.
Habe ich aber irgendwie nicht hingekriegt.

Vielleicht weisst Du da ja noch Rat…

#content {
color: white;
float: left;
width: 750px;
min-height:500px;
background-color: #002B40;
padding-left: 15px;
padding-bottom: 140px;
height:740px;
margin-top: 30px; —Abstand zum oberen Rand des Contents…??
border-left: 5px groove gray;
border-top: 5px groove gray;----oberer Rand des Contents…???
border-right: 5px groove gray;

}