• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild scrollt im IE mit

F

Fossi_78

Neues Mitglied
Hallo Community!

Ich habe meine erste HP online und gleich ein Problem mit dem IE.
Das Hintergrundbild im Inhalt scrollt mit - soll es aber nicht.
Der Firefox scrollt es wie gewünscht nicht.
Ich bin ein Neuling und googelte vergebens nach einer Lösung.
Kann mir bitte jemand helfen und mir erklären, wo hier der Fehlerteufel steckt?


div.inhalt{
/*-moz-box-sizing:border-box;box-sizing:border-boxing;*/
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-boxing;
padding-left:15px;
padding-right:15px;
overflow:auto;
color: white
}
 
Ich sehe da jetzt keinen Hintergrund in deinen CSS Anweisungen, aber versuche mal, folgende Anweisung hinzuzufügen:
Code: 
background-attachment: fixed;
 
Danke für die rasche Antwort - doch leider brachte sie keinen Erfolg

Hier der Auszug vom Code mit dem background:
<td colspan="6" rowspan="6">
<div class="inhalt" style="width:509px; height:370px; background: url(Bilder/layout5_800x629px_16.jpg)"><table>
<td>
 
Versuch mal:
Code: 
<td colspan="6" rowspan="6">
<div class="inhalt" style="width:509px;  height:370px; background:  url(Bilder/layout5_800x629px_16.jpg) fixed;"><table>
<td>
Oder hast du einen Link für mich? Dann kann ich mir das online anschauen und sehen, was der Fehler ist.
 
is ja nur so ne vermutung...aber ich würd den container ja auch mal wieder schließen...
wenn er irgendwo hinter der tabelle geschlossen wird, wäre der restliche code bis zum endtag vielleicht noch ganz interessant ;)
 
hier der Link:
Ayurveda

der Versuch mit fixed verschob leider das Bild

war der Meinung, der gezeigte code reicht aus - sorry

hier noch die css:
body {

background: #fbf4e5; padding-top: 80px;
}

div.menu1{
-moz-box-sizing:border-box;box-sizing:border-boxing; /*Lösung für den Mozilla, wenn die Größenaufteilung nicht mehr korrket ist!!*/
color: #ffffff;
font-weight: bold;
font-family: arial;
font-size: 13px;
padding-top: 47px;
cursor: pointer;
}

div.menu2{
-moz-box-sizing:border-box;box-sizing:border-boxing; /*Lösung für den Mozilla, wenn die Größenaufteilung nicht mehr korrket ist!!*/
color: #ffffff;
font-weight: bold;
font-family: arial;
font-size: 16px;
padding-top: 13px; /* achten auf die schriftgröße in den verschiedenen browsern!! */
padding-left: 30px;
cursor: pointer;

}

div.inhalt{
/*-moz-box-sizing:border-box;box-sizing:border-boxing;*/
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-boxing;
padding-left:15px;
padding-right:15px;
overflow:auto;
color: white
}

.angebot{
color: black;
font-size: 16px;
font-family: sans-serif;
font-weight: bold;
line-height: 1.2;
}


.adresse{
color: black;
font-size: 16px;
font-family: sans-serif;
font-weight: bold;
line-height: 1.2;
}

.content{
color: black;
font-size: 12px;
font-family: sans-serif;
line-height: 1.2;
}

.content_bold{
color: black;
font-size: 12px;
font-family: sans-serif;
font-weight: bold;
line-height: 1.2;
}

.content14{
color: black;
font-size: 14px;
font-family: sans-serif;
line-height: 1.2;
}

.content14_bold{
color: black;
font-size: 14px;
font-family: sans-serif;
font-weight: bold;
line-height: 1.2;
}

.copy{
color: #cccccc;
font-family: arial;
font-size: 10px;
}
Zum Vergrößern anklicken....
 
Deine Seite hat keinen DOCTYPE gesetzt und wird deshalb nicht im Standards-Mode gerendert.

- DOCTYPE-Switch und seine Auswirkungen

Generell ist es immer hilfreich, die Seite validieren zu lassen:

- The W3C Markup Validation Service

Der Hinweis mit background-attachment: fixed; ist grundsätzlich richtig.

Demo:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

#text {
    width: 509px;
    height: 370px;
    overflow: auto;
    background: url('http://www.die-entspannungswerkstatt.at/Bilder/layout5_800x629px_16.jpg') top left fixed;
}


        </style>
    </head>

    <body>

        <div id="text">
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
            <p>test</p><p>test</p><p>test</p>
        </div>

    </body>

</html>
 
Leider stehe ich ganz schön daneben mit dem DOCTYPE.

Ich versuchte alle die in dem Link zu sehen sind aus.
Zu meiner Überrachung funktionierte mit Standards Mode das Scrollen in beiden Browsern, d.h. das Bild blieb stehen und der Text scrollte - doch hat es die HP in die Einzelteile zerlegt und die Schrift sah wie bei einem Zitat aus.
Als letztes versuchte ich den Quirks Mode und siehe da, die HP sieht wieder aus wie gehabt.

Bau ich dejoch
<style type="text/css">
#text {
width: 509px;
height: 370px;
overflow: auto;
background: url('http://www.die-entspannungswerkstatt.at/Bilder/layout5_800x629px_16.jpg') top left fixed;
}

</style>
Zum Vergrößern anklicken....
ein, funkt leider wieder gar nichts mehr.
Sie ist wiederum in beiden Browsern zerlegt und im "inhalt" gibt es nur mehr schwarz weiß.
 
Du solltest den Übergang in den Standards-Mode vollziehen, denn nur so ist sichergestellt, dass die Browser relativ gleichartig und nach den bestmöglich den HTML/CSS-Standards entsprechenden Regeln rendern. Mit Darstellungsproblemen im Quirks-Mode befasst sich heute kaum noch jemand, da deren Behebung als Zeitverschwendung angesehen und ein Wechsel in den Standards-Mode als beste Hilfe empfohlen wird.

Der aktive Rendermodus einer Seite wird zum Beispiel im Firefox unter "View Page Info" angezeigt (<Strg>+<i> bzw. entsprechender Eintrag im Kontextmenü einer Seite).

Tut mir Leid, wenn du jetzt deshalb große Teile deiner Seite neu erstellen musst. Daran führt leider kein Weg vorbei. Sieh es als einmaliges "Lehrgeld" an und nutze in Zukunft gleich den Standards-Mode. Andere vergleichbare grundlegende Fallstricke beim HTML-Rendering dürfte es glücklicherweise nicht mehr geben.
 
Wie ich in den Standards-Mode wechseln kann ist mir noch unklar.
Mir ist ja noch nicht einmal klar, was genau es damit auf sich hat :-/ ob ich den vorgeben soll oder ob ich ihn einfach kopieren kann...
Das mit dem Lehrgeld sehe ich nicht so schlimm - aller Anfang ist schwer!
Ich werde mich im Forum umsehen und hoffe hier die eine oder andere Info zu den Mode zu finden.
Vielen Dank auch für eure Bemühungen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben