Background attatchment: fixed i ie7!

Hejsan, jag håller på att uppdatera en sida, men har väldigt svårt att få till det. Jag har googlat, kollat runt på forumet här osv.

Jag har en div med allt innehåll. Den har en bakgrund som är fäst och fixerad. Men i Internet Explorer 7 är den fixerad men sitter på fel ställe. Inte top center som jag vill ha den.

För IE7:

#Container {
    position:absolute;
    width:535px;
    height:333px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    background-repeat: no-repeat;
    background-image: url(../bilder/Container.png);
    background-attachment: fixed;
    background-position: center top;
}

För IE8:

#Container {
    position:absolute;
    left:184px;
    top:184px;
    width:535px;
    height:333px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    overflow: auto;
    background-repeat: no-repeat;
    background-image: url(../bilder/Container.png);
}

Den förflyttar sig även beroende på upplösning. Finns det någon som kan hjälpa mig?

1. vad har du för HTML doctype?

2. Har du ett exempel live?

3. Vad har du för andra CSS:er, idén med "egna" css filer är bara att använda skillnaderna i de olika webbläsarna, inte identiska kopior med ett par ändrade värden.

Förlåt om jag inte beskrev särskillt noga. Här är ett live exempel som jag tror svarar på alla dina frågor. :)

Vad är det du är ute efter? bakgrunden eller själva containern centretad?

Om du skall centera containern så gör du riktigt galet om du gör dig beroende över position absolut,

ta bort den och kör: margin: 0 auto (0 topp och botten, auto på vänster och höger).

Det är bakgrunden jag vill ha centrerad i Internet Explorer 7. :)

Redigerad av sok
Anledning: Förtydligande

Du har fel i din HTML kod.

Sen att använda "IE" fixar:

1. placera det efter dina "riktiga" CSS

2. använd bara det som skilljer sig från de normala webbläsarna.

3. Gruppera CSS för att få mindre data.

<style type="text/css">
<!--
#Container {
    background: url(container.png) no-repeat 50% 0;
    position:absolute;
    left:184px;
    top:184px;
    width:535px;
    height:333px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    overflow: auto;
}
-->
</style>

<!--[if lt IE 7.]>
<style type="text/css">
#Container {
    /*Inget som skilljer sig över IE*/
}
</style>
<![endif]-->

Tack, men nu blir den inte fixerad om man scrollar. Hur löser man det?

Hur menar du med fixerad? i alla webbläsare jag har testat så är bilden fixerad redan (Firefox, IE7)

Bakgrundsbilden ska vara fixerad alltså när man scrollar ska bilden vara kvar på samma plats. Alltså det ska bli samma effekt som när man använder background attatchment: fixed; plus att bilden ska vara centrerad. Jag kollade i ett program som heter IEtester då jag har IE8 på datorn och enligt IEtester så försvinner bilden när man scrollar ner.

Detta är resultatet nu i IE7:

Detta vill jag uppnå i IE7:

Redigerad av sok
Anledning:

Var är problemet, vad jag läser så byter du problem för varje fråga jag kommer med:

IE7 - är fixed för mig i en orginal IE7

IE6 - Har problem, med fixed, men det löser du med Conditional comments för IE6

Den ända IE version jag har problem med är IE6.

Firefox, opera, firefox, IE7 och IE8, Firefox(mac) kör "normalt" eftersom overflow: auto.

http://voigt.se/sandbox/aspkoll/bg_fixed/ - att köra HTML4 som doctype är inget jag rekommendera när vi nu är i 2000-talet, måste rekommendera att du kör över till XHTML eller ta starka funderingar att gå till HTML5.

Redigerad av voigtan
Anledning:

Testade IE-tester ser ut att vara ett bra fel i IE7, skall se om jag kan lösa det.

http://www.howtocreate.co.uk/fixedBackground.html

Men jag hade hellre då kört med en div som bakgrund och kört en div ytterligare som har overflow än att börja använda expresions för att lösa en bugg i IE.

testade med !important och det ända jag hittade som löste problemet var att jag hade en helt annan bild för IE än för alla andra läsare, vilket inte är en smart lösning.

Sedan var ditt exempel inte alls centrerat, bara fixerat i IE8.

IE8

IE7

det är inga problem med att positonera bilden, 50% 0 fr att positonera den i mitten, IE7 har ingen CSS fix, du måste använda expression för att räkna ut det, vilket är något jag inte rekommendera alls.

Så, vad tycker du jag ska göra? Eller ska jag inte tillåta folk med IE7 att besöka sidan? För du verkade inte hitta någon vidare lösning, eller hade jag fel?

Oj, är lite trött, tack så mycket. Skall se ifall det funkar. ;)