[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


why does CSS slider bar have a gap in it?

Posted on 2012-09-12
Medium Priority
Last Modified: 2012-09-12
Please check this out:


Why does the slider bar have a gap in it?  I can't figure it out.  Please let me know how to close the gap.

Question by:Revolution9
  • 2
  • 2
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38390247
Your sliderbar is 260px deep, but the background image used for the top part (scrollbar_vertical_toppart.png) is only 174px deep - that's why you get the gap.

Author Comment

ID: 38390589
thanks for that response, but I"m not seeing it.  Can you tell me how to fix?  Here's the code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>sharon farber</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<link href="css/slickscroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.slickscroll.js" type="text/javascript"></script>
<script type="text/javascript">

var scroll1, scroll2, short

$(document).ready(function () {
      scroll1 = $('#divMain1').slickscroll({ "verticalscrollbar": true });
      scroll2 = $('#divMain2').slickscroll({ "horizontalscrollbar": true });
      short = $('#divShort').slickscroll({ "verticalscrollbar": true });

        $('#btnAdd').click(function () {
            $('#divShort').append("blah blah blah blah blah blah blah blah blah blah blah blah blah blah");



<div id="wrapper">
  <!-- header start -->
    <div class="logo_block">
      <h1 class="lefts">Sharon Farber composer</h1>
        <li><a href="index.html">home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">music</a>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">dropdown</a></li>
        <li><a href="#">video</a></li>
        <li><a href="#"><em>bio</em></a></li>
        <li><a href="#">credits</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">press</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">store</a></li>
        <li><a href="#">contact</a>
  <!-- header end -->
  <!-- body start -->
  <section id="container">
    <div id="inner_page">
    <div class="gaper" style="height:12px;">&nbsp;</div>
    <div id="divMain1" class="slickscroll">
    Award winning Composer <strong>Sharon Farber</strong>, originally from Israel, has received critical acclaim as a composer in the Concert world as well as that of Film and TV. She brings to her music influences from her Middle Eastern heritage as well as her extensive knowledge of Classical and Western music.<br/><br/>

Sharon began her musical career at the age of seven, as a classical pianist. After graduating from Thelma -Yelin High School for the Arts, she served in the IDF (Israeli Defense Force) and later worked as a theater composer and musical director in Israel. She won the first prize in Colors in Dance in 1992 for her music for choreography. In 1994, she moved to Boston upon receiving a scholarship from Berklee College Of Music. During her studies, she won the first prize in the yearly Professional Writing Division Concert with her first string quartet. After graduating Summa Cum Laude in 1997 (majoring in both Classical Composition and Film Scoring) she moved to Los Angeles to begin her professional career. Miss Farber was the recipient of the prestigious Academy of Television Arts and Sciences Internship in Film Scoring, as well as the Mentorship program of the Society of Composers and Lyricists, on which she currently serves as a board member. <br>
Ms. Farber has been writing concert and choir music in parallel to her film-scoring career, and has many national and international premiers and performances to her credit. To name a few: <strong>The Third Mother / Mothers’ Lament</strong>, which was world premiered by the <strong>Los Angeles Master Chorale, ASHKINA,</strong> for mixed choir, chamber ensemble and Ethnic Instruments, <strong>Translucent Rocks,</strong> commissioned and premiered by the Israeli Chamber Orchestra, Chorale works, song cycles, and many more.  Recent commissions include the <strong>Laguna Beach Music Festival, Pacific Serenade Ensemble, Orange County Women’s Chorale, Culver City Symphony Orchestra, The Jewish Symphony Orchestra and iPalpiti Artists International</strong>. Recently two outstanding sopranos released CDs with Sharon’s music (Hila PLitmann and Sharon Rostorf Zamir), and she is the <strong>Composer In Residence</strong> of the <strong>Beverly Hills International Music Festival</strong> as well as the music director of <strong>Temple of the Arts in Beverly Hills, CA</strong>. Sharon’s next commission is for <strong>Beer - Sheva Symphony Orchestra (Israel)</strong>- a new piece for Soprano and Symphonic Orchestra for the 2103/14 season that will feature GRAMMY AWARD winner Soprano Hila Plitmann. <br>
In the Film and TV industry, Sharon has been working with such companies as <strong>NBC, CBS, Showtime and WB</strong> as well as writing music for features films. She won the Telly Award for best score and her orchestral score for the film <strong>“When Nietzsche Wept”</strong> was released commercially. She has recently completed the score to the powerful documentary film <strong>UNMASKED—JUDEOPHOBIA</strong> and is gearing up to score <strong>BUDDHA EYES</strong> for producer Aaron Millar. <br>
In addition, Sharon is the Music Director of <strong>Temple of the Arts in Beverly Hills</strong>. </p></div>
  <!-- body end -->
  <!-- footer start -->
  <footer> <span class="copyright lefts">&copy;2012 Sharon Farber  •  Website design by Richard Stellar / <a href="http://www.interstellar9.com/" target="_blank">Interstellar9</a></span> <span class="rights"> <a href="#" class="social_link"><img src="images/facebook.png" alt=""></a> <a href="#" class="social_link"><img src="images/twitter.png" alt=""></a> <a href="#" class="social_link"><img src="images/you-tube.png" alt=""></a> <a href="#" class="social_link"><img src="images/imdb.png" alt=""></a> <a href="#" class="social_link"><img src="images/like.png" alt=""></a> <a href="#" class="social_link"><img src="images/rss.png" alt=""></a> </span> </footer>
  <!-- footer end -->
LVL 45

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 38390659
It's nothing to do with your code. The scrollbar on your page is about 260px deep. The image that is used to display the scrollbar (attached) is only 174px deep, so the image doesn't fill the space of the scrollbar, leaving you with a gap. You need to edit the image so it's the right size.

Scollbar Image

Author Closing Comment

ID: 38390758

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question