Hoi,

Ik maak een paar aanpassingen aan een website en kwam tot de volgende ontdekking. Vergelijk de volgende twee URLs:

http://jhaagmans.autoalbum.nl/
http://jhaagmans.autoalbum.nl/#comment

De geladen pagina is exact dezelfde, alleen de tweede URL zorgt ervoor dat de pagina gefocust wordt op de div met het ID "comment". Tot zover geen probleem.

Scroll nu echter eens naar boven, de tabjes "Overzicht, Detail, Foto's, Kaart" zijn ineens afgeknot. Als je goed kijkt (met bijv. Firebug) zie je ook dat de div met ID "navigation" iets naar boven lijkt te zijn verschoven en dus onder de header terecht komt.

Heeft iemand enig idee wat er misgaat?

Thanks!

Ik zie niks vreemds? (Safari 5.1/OS X Lion)

Ik zie het op Firefox wel gebeuren. Ook met alle javascript uitgeschakeld dus dat kan sowieso al niet het probleem zijn. Weet je zeker dat je nergens 2x dezelfde #id tag gebruikt?

Heb hier even niks tot m'n beschikking, maar hoogstwaarschijnlijk komt het omdat je het A element een height en background meegeeft, in plaats van de LI. Waarom het anker dan de CSS fout veroorzaakt is mij ook een raadsel.

Geen dubbele #id, er is maar 1 comment ID. Het gebeurt op elke pagina, dus het zal iets te maken hebben met dat navigatie-stukje. Ik ben er in Firebug mee aan het spelen (ook op basis van jullie commentaar), maar nog geen werkende oplossing gevonden.

Bedankt zover!

Ik heb de fout gevonden denk ik.
Na wat spelen met de chrome developer tools ben ik te weten gekomen dat het aan de overflow ligt in volgende css regels. Als je hier overflow hidden weghaalt is het probleem opgelost.
Ik heb wel niet gezien of dit andere problemen teweeg brengt, maar op het eerste zicht niet.

div.content-wrap {
float: right;
width: 100%;
overflow: hidden;
text-align: left;
margin-left: -289px;}

Thomas

Bedankt Thomas. Ik had zelf een fout gemaakt bij het deployen van de nieuwe code naar de staging-omgeving, maar je fix blijkt feilloos te werken. Klasse!