Browser elementen zitten in de weg

[Mei]

Ik ben een tijdje geleden bezig geweest met een intranetapplicatie met allerlei dropdown menu's en divs die over de hele pagina moeten verschijnen. Ik heb sindsdien een Mac gekocht en ik wilde net eens verder gaan, maar ik merkte dat bijvoorbeeld in FF browser elementen, zoals scrollbars, in de weg zitten. In plaats van het dropdown menu dat over de scrollbars heen valt, valt het menu tussen de scrollbars en hun parent. Als ik een dropdown menu over een stel scrollbars wil laten gaan, dan werkt dat in FF/Win, maar in FF/OSX niet. Ik heb het er met een vriend van me over gehad en volgens ons kwam dit vanwege het feit dat Firefox het OS die elementen op die plek laat tekenen en dat FF dat zelf dus niet doet. Zegmaar hetzelfde met embedded video.

Mijn vraag is of hier omheen te werken is, want dit is natuurlijk hoogst irritant.

[frickY]

<select>-boksen zijn inderdaad een verhaal apart. Je kunt proberen een DIV om je selects te zetten met een position: relative stijl, en vervolgens de <select>'s een position: absolute. Daarmee zou je ze ove rje pagina flow heen moeten leggen waardoor ze uit je blokken vallen.

Ik neem tenminste aan dat je bedoeld dat je scrollbars in scrollable-elementen staan, en niet dat je de scrollbars van het browservenster zelf bedoeld.

[Snake]

Screenshot? Maakt het allemaal beetje makkelijker.

[BikkelZ]

Volgens mij komen dit soort problemen met form elements, scrollbars etc. ook onder windows nog wel eens voor.....

[Mei]

Snake schreef op zaterdag 13 oktober 2007 @ 10:23:
Screenshot? Maakt het allemaal beetje makkelijker.

Hmm, kan niet. Mag het niet zomaar openbaar maken.

@BikkelZ: klopt, heb ik inderdaad dingen over gehoord. Onder Windows volgens mij nog geen problemen gehad hiermee (of ik kan het me niet meer herinneren). Ik kom het nu toevallig onder OS X weer tegen. Probleem blijft hetzelfde, browserelementen die in de weg zitten (ik bedoelde inderdaad de scorllbars in scrollable elementen en niet die van de body zelf.)

[Borizz]

Mei schreef op zaterdag 13 oktober 2007 @ 10:29:
[...]


Hmm, kan niet. Mag het niet zomaar openbaar maken.

Misschien even een testcase schrijven dan..? Zo kunnen we je natuurlijk niet helpen.

[Mei]

Je ziet hier een stukje van het menu. Die balk met die lichte gradient erdoor is de scrollbalk.

//edit: In Opera en Safari werkt het trouwens wel goed.

[ Voor 13% gewijzigd door Mei op 15-10-2007 08:44 ]

[Verwijderd]

Ik herinnerde me ergens gelezen te hebben dat je iets met een iframe moest doen. Na enige tijd testen weet ik weer hoe het zit, maar blij word je er niet van.

Je moet in je dropdown-div een lege iframe zetten van dezelfde breedte en hoogte. De content van je dropdown zet je in weer een andere div.

Zoiets:

HTML:

<div class="dropdown">
  <iframe class="ffMac"></iframe>
  <div>Inhoud</div>
</div>

Cascading Stylesheet:

.ffMac, div.dropdown div {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%
}

iframe.ffMac {
  background-color:#FFFFFF; /* De kleur die je wil */
}

Of het nog niet erg genoeg is: als je vervolgens een ander venster focust, dan verschijnt de scrollbar weer keihard erdoorheen. Dit los je dan weer op door met js de pagina in het iframe te refreshen.

Kortom, geen oplossing dus. Misschien dat iemand anders hier iets geniaals mee kan verzinnen.

[Mei]

Kickje. Probleem is nog steeds hééérlijk aan de orde

[Mei]

Kick.

[disjfa]

En wij hebben nog steeds geen idee aangezien we geen code hebben gezien.

[DJ Buzzz]

Ik ken het probleem en het is simpelweg niet op te lossen op een nette manier. Ik zou gewoon wachten op Firefox 3 of Safari gebruiken, aangezien deze geen last hebben van dit probleem.

[Mei]

disjfa schreef op maandag 24 december 2007 @ 12:03:
En wij hebben nog steeds geen idee aangezien we geen code hebben gezien.

Dat boeit ook niet, want het ligt er gewoon aan waarschijnlijk dat de browser het OS die speciale elementen (form inputs, scrollbars) laat tekenen bovenop de rest van de pagina.

@DJ Buzz: Hmm, het is niet voor mezelf. Het wordt een intranetapplicatie en die moet in zoveel mogelijk browsers goed werken.

[Rob]

Mei schreef op maandag 24 december 2007 @ 12:42:
[...]


Dat boeit ook niet, want het ligt er gewoon aan waarschijnlijk dat de browser het OS die speciale elementen (form inputs, scrollbars) laat tekenen bovenop de rest van de pagina.

Dat boeit dus wel, als wij het probleem niet duidelijk voor ons hebben, dan is het onmogelijk een oplossing te verzinnen.

Kan je niet een kopie van de html pagina, gestript van alle info die niet openbaar mag worden, online zetten?

[Mei]

Nee, helaas.

Het is een gewone pagina met ergens een div waar scrollbalken in zitten. Daarboven zit ergens een dropdown menu en die valt netjes over de div heen. De scrollbalk wordt in sommige browsers (net zoals formelementen in IE6) over het dropdownmenu heen getekend (zie de afbeelding die ik eerder in deze thread geplaatst heb). Heeft niet echt met code te maken, wel met browser behaviour. Tot nu toe gebeurt het volgens mij alleen in IE6 en FF/Mac.

[disjfa]

Het zal vast browserspecifiek zijn. Waarschijnlijk een beetje hal half een z-index bug. Alleen echt geheel niemand kan je helpen zonder testcase

Helaas dus.

[ Voor 4% gewijzigd door disjfa op 24-12-2007 13:10 ]

[Mei]

Het is géén z-index bug. Dit probleem is bij veel mensen bekend. Het is hetzelfde als dat embedded video door een extern programma in de pagina gerendered wordt en je daar dus niks overheen kan plaatsen (op een normale manier).

[Michali]

Je topic is al meer dan 2 maanden oud. Als je even de moeite had genomen om waarschijnlijk in max 30 minuten een test case te schrijven, dan hadden we waarschijnlijk al lang een oplossing voor je. Schrijf een zo simpel mogelijk document waarin je probleem voorkomt. Op die manier hebben we een duidelijke specificatie van je probleem en kunnen we vrij gaan experimenteren om tot een oplossing te komen. Ik geloof best dat het niet aan de code ligt, maar daar gaat het ook helemaal niet over. Wat belangrijker is, is dat we het probleem in werking zien in een zo simpel mogelijk vorm.