[CSS/JS] float:right; geeft problemen binnen Mozilla

[Woudloper]

* Woudloper is nu al een tijdje aan het stoeien, maar kom er niet echt uit. Ofwel helemaal niet, dus laat ik het jullie maar even voorleggen.

Op deze pagina heb ik een tweetal (middels javascript) info displays gemaakt op de pagina.

De ene is een info-box (aan de linkerkant) waarin afbeeldingen worden getoond die kunnen worden vergroot. De andere is een verticale scroller waarin de nodige teksten/afbeeldingen/e.d. kunnen worden geplaatst.

Op zich een leuk concept en het werkt ook allemaal in Internet Explorer 6, maar binnen Mozilla 1.1. heb ik de nodige problemen:

• De inhoud van de scroller wordt op een compleet andere plaats (over de gehele breedte getoond en daar scrolled deze dan ook.
• Daarnaast heb ik ook nog een probleem met de info-box (links), want daar ziet de layout er wel goed uit in IE, maar niet in Moz. Ook werkt deze wel in IE, maar niet in Moz. Echter kom ik daar wel uit
  
  Weet iemand van jullie hoe ik dat probleem met die verticale scroller kan oplossen opdat deze gewoon binnen zijn eigen div blijft??

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 23:05 ]

[Clay]

de div #TheScroller hoeft iig geen 100% breedte te hebben, de div zal met z'n content gewoon alle beschikbare ruimte nemen, en die heb je voor de parent al op 200px gezet.

Verder zou ik de html en css even door de validator halen, want geen van 2en valideert nu. Misschien dat dat ook de fout oplost. Overigens doet IE de float fout, niet moz dat het er in IE zo uitziet als jij zou willen betekent niet dat het ook goed is.

[Woudloper]

Clay schreef op 16 May 2003 @ 09:24:
de div #TheScroller hoeft iig geen 100% breedte te hebben, de div zal met z'n content gewoon alle beschikbare ruimte nemen, en die heb je voor de parent al op 200px gezet.

Daar heb je gelijk in. Is inmiddels aangepast, maar ik blijf het probleem helaas hebben. Heb je wellicht nog andere suggesties??

Verder zou ik de html en css even door de validator halen, want geen van 2en valideert nu. Misschien dat dat ook de fout oplost. Overigens doet IE de float fout, niet moz dat het er in IE zo uitziet als jij zou willen betekent niet dat het ook goed is.

Validator fouten zijn gefixed! Over dat andere punt, je wilt dus zeggen dat zoals het nu door Internet Explorer wordt weergegeven het fout is! Het floaten gaat op zich goed, de enige fout die ik heb is dat de div#TheScroller niet binnen de div#m_placeholder, maar daar helemaal uitspringt. Wat naar mijn idee ook niet helemaal de bedoeling moet zijn, toch

[crisp]

Een float is nog absoluut, nog relatief gepositioneerd. Je position: relative op je placeholder doet daar niets aan af en is dus overbodig. Om je div#TheScroller toch goed gepositioneerd te krijgen moet je daaromheen nog een gewone div zetten die expliciet position: relative heeft.

[Woudloper]

Thanks crisp. Dat was de oplossing. Heb het nu als volgt en dan werkt het:

HTML:

<div id="m_placeholder">
 <div id="mm_placeholder">
   <div id="TheScroller">
    <p>Paragraaf met inhoud voor de scroller</p>
   </div>
 </div>
</div>

En in mijn style document heb ik een #mm_placeholder met position: relative; aangemaakt en dan werkt het zoals ik het graag zou willen.