Website laad niet vanaf boven

[Blueflame_Core]

Misschien een wat rare titel, maar ik heb werkelijk geen idee hoe ik dit anders moet noemen. Vandaar dat het ook lastig is om hier op te gaan googlen. De zoekactie die het meeste in de buurt kwam was "Website Doesn't load on top".

Ik heb een site gemaakt met o.a. een css image viewer. In IE8 werkt hij prima, echter in FF (3.6) laad hij niet vanaf boven. Dus als ik refresh of ik klik een foto aan in de slideshow dan scrollt die automatisch tot de bovenkant van die slideshow, en dus valt de header weg. Die is pas weer zichtbaar als ik weer naar boven scroll. Hoop dat het nog te volgen is.

Heeft iemand hier toevallig een oplossing voor?

[ Voor 6% gewijzigd door Blueflame_Core op 26-04-2011 23:52 ]

[TheBorg]

Waarschijnlijk heb je bewust of onbewust een anchor of javascript gebruikt dat de pagina scrolled. Het is geen bug maar een feature.

Denk dat zonder link niemand je kan helpen.

[Blueflame_Core]

Ja link plaatsen gaat beetje lastig, is met password beveiligd . Misschien een deel van het script?
Kan het zelf in ieder geval niet vinden, of ik kijk er over heen. w3c validator geef in ieder geval geen fouten.

[Aganim]

Misschien een deel van het script?

Relevante code helpt altijd.

[Blueflame_Core]

html script css viewer:

code:

    <div id="wrapper">
       <!-- Images -->
        <div id="images">
            <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
            <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
            <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
            <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
            <div><a name="image5"></a><img src="image5.jpg" alt="" title="" /></div>
            <div><a name="image6"></a><img src="image6.jpg" alt="" title="" /></div>
            <div><a name="image7"></a><img src="image7.jpg" alt="" title="" /></div>
            <div><a name="image8"></a><img src="image8.jpg" alt="" title="" /></div>
            <div><a name="image9"></a><img src="image9.jpg" alt="" title="" /></div>
        </div>
        
        <!-- Tabs -->
        <div id="tabs">
            <a href="#image1" id="tab1"><img src="tabs/1.png" alt="1" title="" /></a>
            <a href="#image2" id="tab2"><img src="tabs/2.png" alt="2" title="" /></a>
            <a href="#image3" id="tab3"><img src="tabs/3.png" alt="3" title="" /></a>
            <a href="#image4" id="tab4"><img src="tabs/4.png" alt="4" title="" /></a>
            <a href="#image5" id="tab5"><img src="tabs/5.png" alt="5" title="" /></a>
            <a href="#image6" id="tab6"><img src="tabs/6.png" alt="6" title="" /></a>
            <a href="#image7" id="tab7"><img src="tabs/7.png" alt="7" title="" /></a>
            <a href="#image8" id="tab8"><img src="tabs/8.png" alt="8" title="" /></a>
            <a href="#image9" id="tab9"><img src="tabs/9.png" alt="9" title="" /></a>
        </div>
    </div>

CSS script css viewer:

code:

/* Change Opacity to 100% on roll over */
ul li a:hover img{
             
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
           
/* CSS3 standard */
opacity:1.0;
}
   
/* Places images to the right of the tabs,
and hides non selected images */
#images{
background-color: #fff;
width:870px;
height:400px;
margin-top: 3px;
margin-bottom: 0px;
overflow:hidden;  /* Hides the non selected images */
}

#tabs {
background-color: #fff;
padding-top: 3px;
width: 870px;
height: 40px;
}
       
/* Places a black border around the entire viewer
and centers it on the screen */
#wrapper{
background-color: #fff;
width:870px;
height:400px;
border:0px solid black;
margin-top:3px;
}

Hoop dat dit voldoende is..

[Maaark]

Waarom doe je dit?

code:

<a name="image1"></a>

[Blueflame_Core]

Omdat je ergens naartoe moet verwijzen lijkt me?

code:

<a id="image1"></a>

kan ook, maar werkt het zelfde.

[disjfa]

Blueflame_Core schreef op woensdag 27 april 2011 @ 00:18:
kan ook, maar werkt het zelfde.

Werkt niet hetzelfde, voor de duidelijkheid. In sommige browsers werkt het gelijk, maar het doet daadwerkelijk wat anders.

[TheBorg]

Automatisch scollen is een feature van een anchor. Alleen heb je het niet lekker gedaan waardoor het niet in alle browsers werkt. Google it.

[Blueflame_Core]

Ja ok. Maar het maakt in mijn geval geen verschil .
Het ligt aan het image viewer script. Want als ik op "home" (index.php) klik is er geen probleem. Het heeft te maken met <a href="#image1" ....

[ Voor 57% gewijzigd door Blueflame_Core op 27-04-2011 00:24 ]

[disjfa]

Blueflame_Core schreef op woensdag 27 april 2011 @ 00:22:
Het ligt aan het image viewer script. Want als ik op "home" (index.php) klik is er geen probleem. Het heeft te maken met <a href="#image1" ....

Dus je weet wat het probleem is Dan moet je en oplossing zoeken, of een andere manier vinden wat jij wilt veroorzaken.

[Blueflame_Core]

Nou ik weet het niet zeker.. ik acht de kans vrij groot aanwezig dat het daar aan ligt. Ik zie alleen niet waarom.
Een andere oplossing is geen optie omdat je dan in javascript komt, en vind css toch fijner.
Maar goed dit is niet echt relevant, het zou moeten werken lijkt me en hoop dat er iemand is die het ziet. Of in ieder geval het probleem misschien kan verwoorden zodat ik verder kan zoeken.

@TheBorg: je doelt op overflow?

[ Voor 4% gewijzigd door Blueflame_Core op 27-04-2011 00:29 ]

[--MeAngry--]

Ik denk dat het verstandig is dat je eens even opzoekt wat zo'n anchor (het # in je href) precies doet.

Hier bijvoorbeeld: http://www.w3.org/TR/html40/struct/links.html

[edit]
Wat TheBorg zegt, kom er zojuist ook achter dat ik de naamgevingen al jaren door elkaar gooi...

[ Voor 47% gewijzigd door --MeAngry-- op 27-04-2011 00:41 ]

[TheBorg]

Een <a> is een anchor, geef je die een "name" dan heb je Google nodig om te zien wat dat doet.

[Blueflame_Core]

Nou het zal wel aan mij liggen, of het tijdstip, maar het ik snap geen hout van al die cryptische opmerkingen.
Zie ook niet wat ik eventueel fout heb. Name of ID, het blijft hetzelfde probleem geven.

[RobIII]

Als we 't beestje bij z'n naam noemen heb je eerder zinnige resultaten
Zo'n # in een URL heet een Fragment Identifier... Als je er dan nog niet uit komt weet ik 't ook niet meer...

Maar allee:

quote: http://en.wikipedia.org/wiki/Fragment_identifier

If the targeted element is located in the current document, a user agent (e.g., Web browser) may simply focus the targeted element (e.g., by scrolling the document view to it) without having to reload it (e.g. .pdf#Page=3). Otherwise, the user agent will need to first retrieve the document and load the relevant element before it can focus the element.

[ Voor 46% gewijzigd door RobIII op 27-04-2011 01:01 ]

[Blueflame_Core]

Fijn, dank je . Nu maar hopen dat ik het scroll probleem kan oplossen.

Heb het inmiddels zover dat die het in IE8 ook niet meer doet . Nou dat is ook al heel wat.
Mocht ik de oplossing hebben gevonden, zal ik het hier posten.

Heb het inmiddels opgelost, niet zoals ik wou maar goed.
Het was of dit of een javascript. Heb het css viewer script helemaal bovenaan gezet. Zodat die met een anchor wel bovenaan MOET starten.

[ Voor 81% gewijzigd door Blueflame_Core op 27-04-2011 22:48 ]