[Firefox] Knipperende div door overflow

[Alain]

Ik heb mijn site opgebouwd uit div's. Nu heb ik het probleem dat wanneer ik een select box of submit knop gebruik, de div met de knop of selectbox even 'verschuift'. Ik ben er inmiddels achter dat het met de regel overflow: auto; voor de content div te maken heeft. Als ik deze bijvoorbeeld op scroll zet blijft het probleem, verwijder ik deze dan is het probleem weg.

Een stukje code om mijn probleem aan te geven:

Cascading Stylesheet:

#container {
position: relative;
width: 800px;
margin: 0 auto;
border: 1px solid #000000;
}

#menu {
position: relative;
float: left;
width: 100px;
border: 1px solid #000000;
}

#content {
position: relative;
float: right;
width: 696px;
border: 1px solid #000000;
overflow: auto;
}

#clear {
clear: both;
}

HTML:

<div id="container">
  <div id="header">header</div>
  <div id="menu">menu</div>
  <div id="content"><select><option name="1">Optie 1</option><option name="2">Optie 2</option><option name="3">Optie 3</option><option name="4">Optie 4</option></select></div>
  <div id="clear"></div>
  <div id="footer">footer</div>
</div>

De div met id="content" 'springt' even naar boven als je de selectbox van waarde veranderd. Dit probleem heb ik alleen met Mozilla (firefox). Niet met Konqueror of IE.

Weet iemand hoe dit komt en hoe ik het zou kunnen voorkomen?

[ Voor 31% gewijzigd door Alain op 18-12-2005 20:15 ]

[ZeilDude]

Heb het probleem hier niet kunnen constateren. Zet je pagina even online, zodat GOT-ers makkelijker kunnen testen.

[Alain]

Ik heb het testbestand hier online gezet en hierin kun je het effect (soms niet direct) zien. Op mijn pagina is het probleem nog duidelijker te vernemen, maar dit kunnen alleen geregistreerde gebruikers zien.

[Alain]

Ik heb het testbestand wat aangepast zodat dit probleem duidelijker te zien is. Dit bestand staat dus hier.

Heeft iemand een idee hoe ik dit op kan lossen?

[Verwijderd]

Ik kan dit probleem niet reprodurecen, zowel in FF niet als in IE niet. FF 1.0.6, voor alle duidelijkheid.

Hoe gaat het als je de select een vaste hoogte meegeeft als style? Of als je de select dubbel nest in divjes?

[Alain]

Verwijderd schreef op dinsdag 20 december 2005 @ 21:29:
Ik kan dit probleem niet reprodurecen, zowel in FF niet als in IE niet. FF 1.0.6, voor alle duidelijkheid.

Ik heb ook FF 1.0.6 en heb dit zowel in linux als windows. In IE en konqueror heb ik dit probleem niet.

Hoe gaat het als je de select een vaste hoogte meegeeft als style?

Dan blijft het probleem.

Of als je de select dubbel nest in divjes?

Je bedoeld dat ik de select in een aparte div zet? Dat heb ik geprobeerd, maar heeft helaas niet geholpen.

[Verwijderd]

Het is smerig, maar zoiets dan?

code:

<div>
  <div style="heihgt:30px">
     <select name="blaat"><option value="1">superblaat</option></select>
  </div>
</div>

Je zou dan die hoogte nog een beetje moeten tweaken, en het is zondermeer een smerige oplossing, maar hey.. als het werkt.

De reden dat ik het in dit soort oplossingen zoek.. dat geknipper wat jij omschrijft, komt waarsch. omdat hij de div waar die overflow op van toepassing is, heel snel even van scrollbarrs voorziet, omdat hij van mening is dat de content er niet in past oid. Daarnaast zet je een overflow:auto op een item zonder vaste hoogte, dus kan het zijn dat die de standaard teksthoogte krijgt (is allemaal giswerk dit, maar misschien heb je er wat aan..)

[Alain]

Verwijderd schreef op dinsdag 20 december 2005 @ 21:45:
Het is smerig, maar zoiets dan?

Helaas werkt dat ook niet. (En ik zou als het werktte waarschijnlijk ook nog even verder kijken om de reden die je zelf aanhaalt. )

De reden dat ik het in dit soort oplossingen zoek.. dat geknipper wat jij omschrijft, komt waarsch. omdat hij de div waar die overflow op van toepassing is, heel snel even van scrollbarrs voorziet, omdat hij van mening is dat de content er niet in past oid.

Dit vind ik heel logisch klinken.

Daarnaast zet je een overflow:auto op een item zonder vaste hoogte, dus kan het zijn dat die de standaard teksthoogte krijgt (is allemaal giswerk dit, maar misschien heb je er wat aan..)

Sorry, dat is een beetje slordig van me om dat in de TS niet te doen, maar dat heb ik op mijn homepage (en in het huidige testbestand) wel gedaan.

Ik denk inderdaad dat ik richting het ten onrechte opnieuw opbouwen van de div moet gaan zoeken (of gewoon alle tekst laten zien, maar ik heb de site in de eerste plaats gemaakt om er wat van te leren dus ik ga het oplossen ook ).

[BtM909]

Als ik het goed begrijp is dit een bug wat opgelost is, maar blijkbaar nog niet gereleased. [google=firefox flickering div with overflow: auto]

[Alain]

Ik heb net Firefox 1.5 geinstalleerd en dan is het inderdaad opgelost.

Bedankt allemaal voor jullie reactie's.