IE7 rendert plaatje niet op de goeie positie

[bekok]

Hoi allemaal,

Ik ben momenteel bezig met een website. Ik ben alleen tegen 1 probleem aangelopen. Ik heb namelijk een plaatje die ik als achtergrond in mijn 'container' div gebruik. Nu had ik deze eerst gepositioneerd als 'absolute' en dit bleek te werken in FF, IE7 en IE8, maar niet in Safari. Daarna probeerde ik het met 'relative' wat wel bleek te werken in Safari, alsmede in FF en IE8. Alleen weer niet in IE7 .
Iemand enig idee welk positioning ik moet gebruiken, of zit ik helemaal verkeerd te coderen? Ik zat te denken dat ik ook nog een fixed plaatje kan gebruiken, maar ik heb het idee dat dit alles juist meer opfokt..

Een linkje naar de site: http://mcdreamdesign.nl/fagel

[crisp]

Misschien een gek idee, maar waarom zet je dat plaatje niet als background in CSS?

[bekok]

crisp schreef op maandag 17 augustus 2009 @ 22:34:
Misschien een gek idee, maar waarom zet je dat plaatje niet als background in CSS?

Dit heb ik eerst geprobeerd, maar ik kwam niet echt lekker uit met background-position-x/y enzo. En is het dan niet zo dat als ik hem buiten mijn container zet, hij misschien op verschillende resoluties verkeerd komt te staan, bijvoorbeeld buiten de container, of er maar half in.

[Tweaker36]

Je site zit goed in:
FF (3.5.2)
Opera
Chrome
IE8

Je site is een complete mess in:
IE7
IE6

Dit lijkt mij onnodig:

Cascading Stylesheet:

div#container img#background {
    margin: 0px;
    margin-left: -50px;
    padding: 0px;
    position: relative;
}

Die afbeeling moet puur als background image kunnen. Zonder verder opmaak voor de afbeelding zelf.

[ Voor 58% gewijzigd door Tweaker36 op 17-08-2009 22:42 ]

[crisp]

bekok schreef op maandag 17 augustus 2009 @ 22:36:
[...]


Dit heb ik eerst geprobeerd, maar ik kwam niet echt lekker uit met background-position-x/y enzo. En is het dan niet zo dat als ik hem buiten mijn container zet, hij misschien op verschillende resoluties verkeerd komt te staan, bijvoorbeeld buiten de container, of er maar half in.

Je wilt zo te zien dat je achtergrondplaatje visueel 'uitsteekt' tov de 'container'. Wat weerhoudt je er dan van om een extra wrapper-element om je container te maken waarin je dat achtergrondplaatje zet?

[bekok]

Jullie hebben gelijk Ik het het als volgt opgelost:

<div id="middleColumn">
<img src="images/background.png" height="548" width="464" alt="Background" />
</div>

div#middleColumn {
float: left;
width: 464;
}

div#middleColumn img {
margin-left: -50px;
}

Bedankt voor de tip!

Edit: ik zag in de validator dat ik per ongeluk width: 464 (zonder px.) had gedaan. Dit moet natuurlijk 420px. zijn, anders verschuift het alsnog allemaal.

[ Voor 20% gewijzigd door bekok op 17-08-2009 23:10 ]

[crisp]

ah, het is dus de bedoeling dat dat plaatje echt deels over de content zit. Met position:absolute had je dat gewoon kunnen bereiken, of in de huidige opzet:

Cascading Stylesheet:

div#middleColumn {
    position: absolute;
    top: 0px;
    left: 150px;
}

waarbij je natuurlijk ook direct het plaatje absoluut kan positioneren zonder er een div omheen te zetten.