[CSS] Overflow werkt niet met Anchors

[Vecodo]

Ik heb een website gemaakt.
Hierin heb ik er voor gezorgdt dat er geen overflow is. aangezien dit niet de bedoeling is.

Als je nu op een interne link drukt, springt hij netjes naar die link toe.
Het enige nadeel is dat hij de pagina verspringt ( logisch want hij moet de boven aanzetten. )
zodat je een witte rand krijgt te zien.

Voorbeelden zeggen meer als 1000 woorden
http://www.respond.nl/1/index.php
( druk bijvoorbeeld op de "Meer"-link in de nieuws sectie )

Ik snap in principe wel hoe dit komt. maar ik heb geen idee hoe ik dit kan verhelpen.

Body+html staat op overflow hidden, maar hij springt wel halvewege de pagina aangezien je op een interne link drukt.

Heb hier wat rond gekeken en op google.nl maar kan het niet vinden.

Aangezien code vaak meer zeg dan tekst

code:

html { overflow:hidden;}

body {      
    width:1003px;
    height:;
    margin:0;
    overflow:hidden;
        }
        
#header {
    width:1020px;
    height:120px;
    margin:0;
    background-image: url(images/Respond1_1.jpg);
        }
            
#search {
    width:215px;
    height:30px;
    border-right:3px solid #ffffff;
    border-left:1px solid #000000;
    border-top:1px solid #ffffff;
    position:absolute;
    float:left;
    margin:0;
    background-color:e56b20;
    top: 120px;
            }
#hvmenu1 {
    width:575px;
    height:25px;
    border:1px solid #ffffff;
    position:absolute;
    float:left;
    margin:0;
    left:213px;
    top:120px;
    background-color:#000000;
            }
#rempty {
    width:231px;
    height:30px;
    position:absolute;
    margin:0;
    left: 789px;
    top: 120px;
    border-right:3px solid #000000;
    background-image: url(images/Respond2_4.jpg);
    }
#Menu {
    width:217px;
    height: 448px;
    border-right:3px solid #ffffff;
    border-left:1px solid #000000;
    border-top:1px solid #ffffff;
    border-bottom:1px solid #000000;
    background-color:0e2d89;
    position:absolute;
    margin:0;
    left: 0px;
    top: 150px;
    float:left;
    overflow:auto;
    }
    
#content {
    width:577px;
    height:450px;
    border-bottom:1px solid #000000;
    border-right:3px solid #ffffff;
    border-left:1px solid #ffffff;
    boroder-top:1px solid #ffffff
    float:left;
    position:absolute;
    left: 213px;
    top: 149px;
    overflow:Auto;
    }
#nieuws {
    width:232px;
    height:450px;
    position:absolute;
    border-bottom:1px solid #000000;
    border-right:3px solid #000000;
    border-left:1px solid #ffffff;
    left: 788px;
    top: 150px;
    background-image: url(images/Respond4_2.jpg);
    }
#vlag {
    width:213px;
    height:440px;
    position:absolute;
    left: 0px;
    top: 568px;
    background-color:0e2d89;
    border-left:1px solid #000000;
}
#adres {
    width:133px;
    height:103px;
    background-color:#e56b20;
    position:absolute;
    left: 801px;
    top: 475px;
}
#plaatje1 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 17px;
    top: 20px;
    background-image: url(images/brand%20klein2.jpg);
}
#plaatje3 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 207px;
    top: 19px;
    background-image: url(images/controle%20centrum%20klein2.jpg);
}
#plaatje2 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 112px;
    top: 20px;
    background-image: url(images/materiaal%20klein2.jpg);
}
#plaatje4 {
    width:80px;
    height:80px;
    border:1px solid #ffffff;
    position:absolute;
    left: 302px;
    top: 19px;
    background-image: url(images/terrorisme%20klein2.jpg);
}
#vlagsimg {
    position:absolute;
    width:214px;
    height:100px;
    left: 18px;
    top: 569px;
}
font.adres {
size:1;
color:000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.NieuwsItem
{
    font-family: Verdana;
    font-style: Bold;
    font-size: 20px;o
    color: #0e2e85;
}
.style1 {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}.style3 {
    color: #FFFFFF;
    font-size: 14pt;
}
.style4 {font-size: 14pt}
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif}
.login { position:absolute;
        width:100px;
        height:20px;
        background-color:#ffffff;
        }
        
#menuback { position:absolute;
            width:575px;
            height:20px;
            background-color:#000000;
            left:214px;
            top:120px;
            }

Iemand de goude tip voor mij ?

[Vecodo]

klein kickje

[Verwijderd]

Misschien kun je me helpen je probleem te begrijpen. Het gaat om een witte rand die ongewenst wordt getoond? Ik heb naar je pagina gekeken, zie verschillende witte randen en lijnen in je ontwerp, maar weet nog steeds niet wat je precies bedoelt. Misschien kun je in een screenshot arceren om welk deel het gaat? En in een ander screenshot de gewenste situatie laten zien? Dank!

[Vecodo]

Bij deze gedaan :

http://www.picturetrail.c...9&gid=8264062&uid=3985070

[We Are Borg]

Verwijderd schreef op woensdag 31 augustus 2005 @ 15:29:
Misschien kun je me helpen je probleem te begrijpen. Het gaat om een witte rand die ongewenst wordt getoond? Ik heb naar je pagina gekeken, zie verschillende witte randen en lijnen in je ontwerp, maar weet nog steeds niet wat je precies bedoelt. Misschien kun je in een screenshot arceren om welk deel het gaat? En in een ander screenshot de gewenste situatie laten zien? Dank!

Bij deze:
]http://www.planet.nl/~terps407/probleem.PNG
Of bedoel je dat randje niet ? Oeps, je hebt het over een probleem bij IE. Firefox geeft weer ander resultaat: en ook een extra wit randje .

TS: Kan je anders niet eens de CSS code wat kleiner maken, want zo is het niet echt makkelijk om door te werken: voor niemand niet . Als je de 'overbodige' dingen schrapt, is het veel aantrekkelijker om er even mee te stoeien

[ Voor 19% gewijzigd door We Are Borg op 31-08-2005 16:50 ]

[Verwijderd]

Dank voor de screenshots! Ik zie nu waarom ik niets opmerkte: het probleem van de TS doet zich niet voor bij een resolutie hoger dan 1024x768. Gebruik ik IE/FF en maak ik het venster kleiner, laad de pagina#5 incl. fout, resize het venster langer, resize het venster weer korter, dan zie ik de pagina zoals gewenst. In Opera is de pagina altijd als verwacht. Zover de constatering

In een poging om een oplossing te vinden, heb ik een CSS layout opgezet met een header met vaste hoogte en daaronder drie kolommen die de hoogte opvullen. Het gaat dan goed in IE, maar FF behoudt het probleem: de pagina wordt naar boven verplaatst en laat een witruimte onderaan met een hoogte van de header. M.i. dus geen oplossing.

In jouw geval zou ik het ontwerp aanpassen: laat de overflow op het niveau van de pagina, waardoor de hele pagina scrolled. Dan heb je geen cross-browser problemen met een scroll / anchor in een div. Daarbij zijn de meeste mensen best gewend aan het scrollen op pagina niveau. Tegelijkertijd kun je dan een specifieke hoogte achterwege en je pagina verticaal uitvullen, waardoor je minder afhankelijk bent van de bezoekers resolutie. Succes!

[Vecodo]

in ieder geval erg bedankt voor jullie tips,

Heb op een ander forum de tip gekregen dat dit wel te "Fixxen" is met javascript.
( maar daar snap ik helemaal niks van. )

Wat ik nu gaan doen is dat de pagina een

code:

OVERFLOW:Auto;

mee krijgt.

En zodra je op een achor drukt, hij dan wel dus die witte rand te voorschijn toverd. maar je zelf dus weer naar boven kan scrollen. dit is de enigste oplossing.

( blijf het raar vinden dat hij de hele pagina doet, en niet in de DIV scrolled. )

Daarnaast moet deze website alleen IE compatible zijn