negative positioning leidt tot scrollbars in Firefox
Het enige probleem is echter dat Firefox die 355px onderaan de pagina er nog altijd bijtoont in de vorm van een leegte waardoor ik dus een scrollbar krijg voor een gedeelte waar geen inhoud staat.
Hoe los je zo'n probleem op?
margin: 0px 0px;
padding:0px;
text-align:center;
background-image: url('../gfx/bg_tile.jpg');
background-position: center;
font-size: 94%;
}
#topShadow {
background-image: url('../gfx/topshadow.png');
background-position: center;
background-repeat: no-repeat;
height: 355px;
}
#page {
position: relative;
top: -355px;
width:960px;
margin:0px auto;
text-align:left; padding:0px; border:0px;
}
De topShadow is namelijk een gradient PNG in de vorm van een halve cirkel.
Deze moet over de background van de body lopen, om er een visueel effectje op te geven.
Dan volgt de Page ( met de echte inhoud van de pagina ).
Dus het probleem is, die -355px zorgt ervoor dat de pagina onderaan nog 355 pixels doorloopt ( vlak nadat de Page is afgerond met </div> )
En die leegte zou er dus niet mogen zijn.
Screenshotje van het onderste gedeelte: http://www.thecastle.be/test/scrollbar.jpg
Gewijzigd op 15/12/2010 20:29:18 door Fromzon ngl