Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS3] Mysterieuze horizontale scrollbar

5 antwoorden
  • Beste forumgenoten, Ik ben aan het spelen met een nieuw design waarin ik tegen het volgende probleem aanloop: bij het gebruik van een [i:8caf4980bc][url=http://www.css3.info/preview/box-shadow/]box-shadow[/url][/i:8caf4980bc] op een [i:8caf4980bc]div[/i:8caf4980bc] van 100% breed (niet gedeclareerd, maar standaard waarde) krijg ik een horizontale scrollbar (in Firefox). Nu ben ik er al achter dat de extra breedte komt door de zgn blur die je in de regel definieert, maar ik kan niets bedenken hoe ik het probleem kan omzeilen. Naar mijn beste weten zou een [i:8caf4980bc]div[/i:8caf4980bc] zonder opgegeven breedte altijd exact 100% van de breedte van de parent moeten beslaan, maar die vlieger gaat hier dus niet op. Een mogelijke oplossing zou zijn om de blur niet te gebruiken, maar dat maakt de hele [i:8caf4980bc]box-shadow[/i:8caf4980bc] redelijk nutteloos. Dus bij wijze van een klein beetje hersensport tijdens de vakantiedagen: wie helpt mij bij het vinden van een oplossing, want ik kan momenteel niets bedenken... Voorbeeldcode:[code:1:8caf4980bc]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Mysterieuze horizontale scrollbar</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } div{ -moz-box-shadow: 0 2px 2px #ccc; } </style> </head> <body> <div>#bla</div> </body> </html>[/code:1:8caf4980bc]NB: als je de styling van [i:8caf4980bc]html[/i:8caf4980bc] en [i:8caf4980bc]body[/i:8caf4980bc] niet gebruikt dan is er geen scrollbar, maar beslaat de div ook niet de volledige breedte van de viewport. Alle inbreng wordt gewaardeerd! - Bas
  • Lastige... Ik zou het zo 1,2,3 ook niet weten. Het lijkt me dat dit zonder hack niet te realiseren valt. met [i:22706ece6c]inset[/i:22706ece6c] kan je de shadow binnen de box krijgen maar dat lijkt me ook niet wat je wilt, toch? Ze hebben het ook gemaakt voor een box en die zijn over het algemeen niet 100% breed. De schaduw die rechts valt, komt je dus dwars zitten. Als je de breedte op 99% zet is het weer niet beeldvullend. Ik kom er helaas niet uit :( maar vind het wel interessant.... ik hou het in de gaten, misschien weet iemand anders het of kom ik het een keer tegen op internet. gr.[/i]
  • [quote:ec55d401a4="dropkick"]met [i:ec55d401a4]inset[/i:ec55d401a4] kan je de shadow binnen de box krijgen maar dat lijkt me ook niet wat je wilt, toch?[/quote:ec55d401a4]Nee, dat is niet helemaal wat ik wil... [quote:ec55d401a4="dropkick"]De schaduw die rechts valt, komt je dus dwars zitten. Als je de breedte op 99% zet is het weer niet beeldvullend.[/quote:ec55d401a4]Precies het probleem. Maar het rare is dus dat de schaduw links geen invloed op de scrollbar heeft. (De schaduw valt in mijn voorbeeld recht naar beneden.) Ik heb de scrollbar kunnen weghalen door een rechtermargin te geven die gelijk is aan de blur, maar mooi is het niet. De beste oplossing om het visueel goed te krijgen is waarschijnlijk gewoon met [i:ec55d401a4]background-image[/i:ec55d401a4], maar dat hoopte ik nu juist te omzeilen. [quote:ec55d401a4="dropkick"]maar vind het wel interessant.... ik hou het in de gaten, misschien weet iemand anders het of kom ik het een keer tegen op internet.[/quote:ec55d401a4]Mocht je nog iets tegenkomen dan houd ik me aanbevolen. Misschien is het wel gewoon een bug die nog niet is ontdekt (de implementatie is nog experimenteel) of niet is opgelost. Iedereen die nog een mooie benadering van het probleem heeft of gewoon wat toe te voegen aan dit verhaal: schroom niet te reageren! - Bas
  • Heb je dit al geprobeerd: [code:1:d916b3cbae] body {overflow: hidden;}[/code:1:d916b3cbae] dan moet de scrollbar weg zijn. Het kan dus wel weer ander ongewenste effecten geven. wimb
  • Leuk probleem. Volgens mij is het zoiets. Een blur van 2px geeft ook aan de rechterkant een blur van 2px en die ruimte is er niet. Als je goed kijkt zie je aan de rechter kant ook geen schaduw. een margin van 2px lost het probleem volgens mij op. [code:1:28e3ced5c2]div{ -moz-box-shadow: 0 2px 2px #ccc; margin-right: 2px; } [/code:1:28e3ced5c2] Of is dit niet wat je bedoelt. Moos

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.