position bug in IE6-9

[mpol]

Hoi,
Ik ben bezig met een website, en kom een IE bug tegen waar ik niet uitkom. Ik heb al verschillende rendermodes gebruikt, al andere dingen geprobeerd, maar ik heb geen flauw idee wat ik eraan kan doen.
De link:
http://bktservice.nl/diensten
Als je over het zijmenu hovert, komt er een image tevoorschijn in de div event. Alleen in IE zie ik alleen maar de bovenste pixel van de image. Alles in die div heeft "haslayout" in IE8.

Iemand een idee?

[NMe]

Is er een reden waarom je niet gewoon een lading relatief gepositioneerde divs neerzet die je op basis van een hover een display: block of display: none geeft? Zal vast niet de meest cleane manier zijn maar 't is alvast een stuk minder foutgevoelig dan de rotzooi (no offense) die je nu in elkaar gedraaid hebt.

[Big Womly]

Dit is niet je enige probleem.
Ik zit hier met FF portable. "Badkamers" en "Deuren" laten een foto zien, als ik over de alndere elementen hover, dan verdwijt de bovenste helft van de foto, maar de onderste helft blijft staan.

[Aganim]

Het probleem van Big Womly doet zich ook voor in Opera. Wellicht toch handig om even naar te kijken.

[Bosmonster]

Om een of andere reden vind ik de geclaimde maker in de source (http://www.weblicity.nl/) niet stroken met de site zelf (http://bktservice.nl/)...

edit: Hoewel.. blijkbaar is het een vrijwilligersclub...

[ Voor 17% gewijzigd door Bosmonster op 06-09-2010 13:15 ]

[mpol]

@Big Wonly,
Dat komt omdat nog niet alle afbeeldingen in het CMS staan. Hij geeft nu een alternatieve tekst, en die valt dan over de oude image heen.

@Bosmonster,
Ik begrijp niet goed wat je bedoelt? Weblicity is de maker, bktservice de klant. Beide domeinen resolven naar hetzelfde ip-adres.

@Nme,
Wat bedoel je met relatief gepositioneerd? De binnenste div krijgt dan ook position:relative? Ik kan daar eens naar kijken.
Over display:block... Punt is dat het ontwerp (ja, ik volg de ontwerper hier) de laatste hover wil laten staan. Als je dus overal overheen hovert krijgt alles een display:block, en werkt het hoveren niet meer. Vandaar dat de z-index ook aangepast wordt.
En wat ervaar jij als prut?

[Xander]

mpol schreef op maandag 06 september 2010 @ 13:16:
Over display:block... Punt is dat het ontwerp (ja, ik volg de ontwerper hier) de laatste hover wil laten staan. Als je dus overal overheen hovert krijgt alles een display:block, en werkt het hoveren niet meer. Vandaar dat de z-index ook aangepast wordt.
En wat ervaar jij als prut?

Je kunt op het moment dat je een nieuw plaatje wilt tonen het vorige plaatje toch weer verbergen?

[NMe]

mpol schreef op maandag 06 september 2010 @ 13:16:
@Nme,
Wat bedoel je met relatief gepositioneerd? De binnenste div krijgt dan ook position:relative? Ik kan daar eens naar kijken.

Je hebt al je foto-divs absoluut gepositioneerd. Waarom zou je dat doen als ze toch met display: none onzichtbaar worden? Haal die position: absolute gewoon weg en regel wat je wil met display.

Over display:block... Punt is dat het ontwerp (ja, ik volg de ontwerper hier) de laatste hover wil laten staan. Als je dus overal overheen hovert krijgt alles een display:block, en werkt het hoveren niet meer. Vandaar dat de z-index ook aangepast wordt.

Ehm, waarom is dat in een issue? Gewoon als je over een item heen hovert alle elementen hiden, en alleen het element waar overheen gehoverd wordt display: block geven. Dan blijft het toch gewoon staan zolang er niet over iets anders gehoverd wordt?

En wat ervaar jij als prut?

Het feit dat je dingen absoluut loopt te positioneren terwijl het nergens voor nodig is. Het feit dat je meerdere "lagen" tegelijk zichtbaar houdt.

[SinergyX]

document.getElementById(id).style.zIndex = latenzien_counter++;

Als mijn javascript nog beetje van deze tijd is, loopt je huidige zIndex bij nonstop hoveren over de links dus alsmaar op?

Mischien mijn goedkope oplossing, maar je kan toch ook OnMouseOut gebruiken om de div weer te verbergen?

[mpol]

Ik heb het even opgezocht, en volgens mij heet wat ik doe toch gewoon relative positioning. De buitenste div #sidebar heeft position:relative he.

Maar over display:none, dat kan natuurlijk wel, zo had ik het nog niet bekeken, het vorige divje dan op display:none zetten.
Maar is dat wel het probleem wat er nu aan de hand is, is dat de reden dat IE over de zeik gaat?

[mpol]

SinergyX schreef op maandag 06 september 2010 @ 13:24:
document.getElementById(id).style.zIndex = latenzien_counter++;

Als mijn javascript nog beetje van deze tijd is, loopt je huidige zIndex bij nonstop hoveren over de links dus alsmaar op?

Klopt, maar een browser kan wel een z-index van 1000 aan toch? Lijkt me geen echt problem.

Mischien mijn goedkope oplossing, maar je kan toch ook OnMouseOut gebruiken om de div weer te verbergen?

Mjah, ik volg de ontwerper hier, en die wil hem zichtbaar laten na het hoveren.

[Xander]

mpol schreef op maandag 06 september 2010 @ 13:27:
Ik heb het even opgezocht, en volgens mij heet wat ik doe toch gewoon relative positioning. De buitenste div #sidebar heeft position:relative he.

Volgens mij zit het probleem dan ook niet in IE, maar in Windows. Het OS om je browser heen heet gewoon Windows he.

Je gebruikt "position: absolute;" in je CSS. Dat heet dan natuurlijk absolute positioning.

Maar is dat wel het probleem wat er nu aan de hand is, is dat de reden dat IE over de zeik gaat?

Geen idee, maar het kan nooit kwaad om je code wat op te schonen en daarmee iets uit te sluiten toch?

Je hebt trouwens lege height-attributen aan je plaatjes hangen. Ik zou niet durven zeggen wat daar het effect van is...

[Noxious]

Desnoods maak je gewoon een plaatjes-block en doe je daar een innerHTML replace naar het nieuwe plaatje?

Ik weet het niet hoor, maar als ik zo het design zie (nofi) zou ik de "designer" maar niet al teveel volgen...

[mpol]

Xander schreef op maandag 06 september 2010 @ 13:37:
Volgens mij zit het probleem dan ook niet in IE, maar in Windows. Het OS om je browser heen heet gewoon Windows he.

Je gebruikt "position: absolute;" in je CSS. Dat heet dan natuurlijk absolute positioning.

Nee, volgens mij zit je mis. Absolute positioneren is relatief tov van de window of viewport. Relatief positioneren is relatief tov een buitenliggende div.

Geen idee, maar het kan nooit kwaad om je code wat op te schonen en daarmee iets uit te sluiten toch?

Je hebt trouwens lege height-attributen aan je plaatjes hangen. Ik zou niet durven zeggen wat daar het effect van is...

Jeetje, als dat het is. Ik kijk gelijk even.

eerste keer trouwens dat ik in dit subforum iets post, maar je wordt hier nogal gegrild zeg....

[mpol]

Xander schreef op maandag 06 september 2010 @ 13:37:
Je hebt trouwens lege height-attributen aan je plaatjes hangen. Ik zou niet durven zeggen wat daar het effect van is...

Thanks, dat was het.

[Bosmonster]

mpol schreef op maandag 06 september 2010 @ 13:16:

@Bosmonster,
Ik begrijp niet goed wat je bedoelt? Weblicity is de maker, bktservice de klant. Beide domeinen resolven naar hetzelfde ip-adres.

Dat ging mij meer om de kwaliteit van design. Ik kon me niet voorstellen dat een bedrijf met een site als Webplicity zoiets designt als bktservice. Maar blijkbaar zijn de rampen de wereld nog niet uit.

[ Voor 6% gewijzigd door Bosmonster op 06-09-2010 14:03 ]

[MueR]

Zeg mpol, wil je eens stoppen met dubbelposten? Die dikke waarschuwing staat er niet voor niets. Gebruik de edit knop liever als je nog wat wil toevoegen.

[NMe]

mpol schreef op maandag 06 september 2010 @ 13:27:
Ik heb het even opgezocht, en volgens mij heet wat ik doe toch gewoon relative positioning. De buitenste div #sidebar heeft position:relative he.

Cascading Stylesheet:

#sidebar .event {
  position:absolute;
}

Relatief zei je?

Maar over display:none, dat kan natuurlijk wel, zo had ik het nog niet bekeken, het vorige divje dan op display:none zetten.

Nee, alle divjes op display: none zetten. En dan de div die wel zichtbaar moet zijn op display: block. Dan hoef je niet te onthouden welk divje zichtbaar is en verlaag je de kans op domme foutjes.

Maar is dat wel het probleem wat er nu aan de hand is, is dat de reden dat IE over de zeik gaat?

Da's ongetwijfeld de combinatie tussen jouw foute manier van showen/hiden en je absolute positioning.

[mpol]

NMe schreef op maandag 06 september 2010 @ 14:45:
[...]
Relatief zei je?

Cascading Stylesheet:

#sidebar {
    position: relative;
}
#sidebar .event {
    position: absolute;
}

Zeker relatief. Relatief tov #sidebar, dat heet dan dus relatief. Absoluut is als het relatief tov de viewport is. Maar dat had ik al gepost.

Da's ongetwijfeld de combinatie tussen jouw foute manier van showen/hiden en je absolute positioning.

Het probleem was al opgelost he, er was geen height in de html.

[Bosmonster]

Jullie hebben allebei gelijk, want je positioneert iets absoluut relatief aan iets anders

Standaard is dit echter de body (en dus de viewport), maar is het dus nog steeds absoluut relatief aan de body

[ Voor 38% gewijzigd door Bosmonster op 06-09-2010 15:33 ]

[NMe]

mpol schreef op maandag 06 september 2010 @ 15:23:
[...]

Cascading Stylesheet:

#sidebar {
    position: relative;
}
#sidebar .event {
    position: absolute;
}

Zeker relatief. Relatief tov #sidebar, dat heet dan dus relatief. Absoluut is als het relatief tov de viewport is. Maar dat had ik al gepost.

Nee, dat is juist absoluut t.o.v. #sidebar. Het is relatief ten opzichte van je body. Je lijkt niet helemaal door te hebben wat de verschillende positions inhouden. Je hebt hier gewoon geen absolute positioning voor nodig.

Het probleem was al opgelost he, er was geen height in de html.

Dan heb je het symptoom inderdaad opgelost. Het probleem is er nog steeds.

[mpol]

Ik heb al door wat de spraakverwarring is. Wat jij relatief positioneren noemt is simpelweg de flow van de html. Dat is ook wat jij aanraadt om te doen. Dat snap ik wel.
Maar dat heet geen relatief positioneren. Relatief positioneren is toch echt wat ik vertelde. Het lijkt op absoluut positioneren, maar werkt net anders. Ik kan je aanraden je daar eens op in te lezen.
Dat jij de flow van html relatief positioneren noemt is dan ook de oorzaak van een spraakverwarring.

En je hebt een punt hoor, het verdient niet de schoonheidsprijs. Geen positioning gebruiken, en display:none gebruiken is mooier.
Maar om scherp te blijven, wie heeft er bepaald dat je geen meerdere zichtbare lagen boven elkaar mag hebben? Staat dat ergens opgeschreven in een W3C spec?
Praktisch gezien, het werkt blijkbaar zelfs in IE6 zonder extra hacks. Dus wat is het probleem precies?

Ik kan er nog eens naar kijken of ik het anders ga doen. Het javascript zal dan in php gegenereerd moeten worden, dat als er een pagina toegevoegd wordt, dat het javascript die er dan ook bij pakt. Dat zal vast te doen zijn.

[Bosmonster]

Dat zei ik al een paar posts terug.

Anyway. Je gebruikt notabene jQuery. Daar heb je echt geen PHP voor nodig.

Ik kan ook een auto met 6-hoekige wielen laten rijden, maar blij wordt je er niet van. De gebruikelijke methode, als je toch alleen maar aan/uit wilt zetten, is dat dan ook te doen. Mocht je ze in elkaar over willen laten faden, dan zul je wel met z-index aan de slag moeten.

Less = more (of simpeler = beter)

[ Voor 6% gewijzigd door Bosmonster op 06-09-2010 17:20 ]

[NMe]

mpol schreef op maandag 06 september 2010 @ 17:08:
Ik heb al door wat de spraakverwarring is. Wat jij relatief positioneren noemt is simpelweg de flow van de html. Dat is ook wat jij aanraadt om te doen. Dat snap ik wel.
Maar dat heet geen relatief positioneren. Relatief positioneren is toch echt wat ik vertelde. Het lijkt op absoluut positioneren, maar werkt net anders. Ik kan je aanraden je daar eens op in te lezen.
Dat jij de flow van html relatief positioneren noemt is dan ook de oorzaak van een spraakverwarring.

Ik bedoelde inderdaad niet position: relative toen ik het over relatief positioneren had, foute woordkeuze van mijn kant.

Maar om scherp te blijven, wie heeft er bepaald dat je geen meerdere zichtbare lagen boven elkaar mag hebben? Staat dat ergens opgeschreven in een W3C spec?

Nee, sterker nog: het is verdedigbaar; heb het zelfs recent nog toegepast (de slideshow). Ik blijf er alleen zelf zo vaak ik kan uit de buurt om problemen met verouderde browsers te voorkomen.

Praktisch gezien, het werkt blijkbaar zelfs in IE6 zonder extra hacks. Dus wat is het probleem precies?

Als ik over "badkamers" hover en vervolgens over "aan- en uitbouw" dan blijft het fotootje staan in Firefox, maar dan alleen het onderste deel. Als je "mijn oplossing" toepast kan dat dus niet.

Ik kan er nog eens naar kijken of ik het anders ga doen. Het javascript zal dan in php gegenereerd moeten worden, dat als er een pagina toegevoegd wordt, dat het javascript die er dan ook bij pakt. Dat zal vast te doen zijn.

....of je loopt door alle child-elementen van #sidebar heen en hangt daar gewoon één voor één dezelfde functie aan als onclick? Geen PHP nodig.

[mpol]

NMe schreef op maandag 06 september 2010 @ 17:39:
Ik bedoelde inderdaad niet position: relative toen ik het over relatief positioneren had, foute woordkeuze van mijn kant.

Thanks.

Als ik over "badkamers" hover en vervolgens over "aan- en uitbouw" dan blijft het fotootje staan in Firefox, maar dan alleen het onderste deel. Als je "mijn oplossing" toepast kan dat dus niet.

Dat komt nu omdat de image niet bestaat. Maar je hebt een punt. Je zou in jouw idee dan een lege div krijgen, en dus niets zien. Dat is wel beter dan nu.

....of je loopt door alle child-elementen van #sidebar heen en hangt daar gewoon één voor één dezelfde functie aan als onclick? Geen PHP nodig.

Hmm, dan moet ik javascript leren .
En er is al php-code om het menu en de event-div te genereren, dus diezelfde php gebruiken om de javascript te genereren is dan makkelijker in mijn geval.

Dat jquery komt gewoon uit het CMS he, het staat in Wordpress.