?
Solved

Customise Scrollbars

Posted on 2011-10-21
6
Medium Priority
?
234 Views
Last Modified: 2012-05-12
I am trying to customise the scrollbar used on this page here...

http://www.riad-hikaya.com/test2.html

The CSS i'm using is...

body{
scrollbar-arrow-color:#da34cd;
scrollbar-base-color:#8a8a8a;
scrollbar-dark-shadow-color:#6b6b6b;
scrollbar-track-color:black;
scrollbar-face-color:black;
scrollbar-shadow-color:black;
scrollbar-highlight-color:#7b8799;
scrollbar-3dlight-color:black;
}

.scrollbar {
      height: 340px;
      width: 263px;
      margin-top: 70px;
      overflow: auto;
}

Any ideas what's wrong here?  I just need to change the colours of he various elements of the scrollbar to match my clients website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Riad Hikaya</title>


<style type="text/css">
body{
scrollbar-arrow-color:#da34cd;
scrollbar-base-color:#8a8a8a;
scrollbar-dark-shadow-color:#6b6b6b;
scrollbar-track-color:black;
scrollbar-face-color:black;
scrollbar-shadow-color:black;
scrollbar-highlight-color:#7b8799;
scrollbar-3dlight-color:black;
}

.scrollbar {
	height: 340px;
	width: 263px;
	margin-top: 70px;
	overflow: auto;
}

</style>


<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

<link href="css/ria.css" rel="stylesheet" type="text/css" />


</head>

<body onload="MM_preloadImages('images/but-gallery-ovr.png')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="493" border="0" cellpadding="18" cellspacing="0" class="riadb">
      <tr>
        <td valign="top"><div class="scrollbar">
          <p>Riad Hikaya -' hikaya' meaning ' story ' in Arabic - offers seven double bedrooms, all ensuite, and all handcrafted to the highest possible standards of comfort and elegance.<br />
            <br />
            The Riad offers all year round swimming with its heated pool and the roof top jacuzzi, cloaked in a bedouin tent for added intimacy, soothes aching limbs after a hard days shopping in the souqs. Pamper yourself in our hammam - steam bath - and let Laila, our in house masseuse, give you a traditional moroccan massage using natural products.<br />
            <br />
            The two roof terraces, planted with orange, lemon, grapefruit and pomegranite trees, offer superb, open views onto the snow capped Atlas mountains. Enjoy a leisurely, sun lit breakfast. Sunbathe under a clear blue African sky. Or relax in the cool shade of the caidale pergolas. As evening falls, prepare to dine as the sun sets to the accompaniment of the evening call for prayer. The choice is all yours.<br />
            <br />
            Our friendly staff - Maryame, Lubna, Fatima, Laila, Lahsen and Abdel Karim - will do all they can to ensure that your stay with us is unforgettable. We hope that your time at the riad will leave you with a ' hikaya ' ( story ) to tell.</p>
        </div></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:BrighteyesDesign
  • 2
  • 2
  • 2
6 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 1500 total points
ID: 37007194
Unfortunately you can't style the scroll bar in FF. I checked your code in IE and it works fine.  But instead of the actual color names, try the hex code for black.  See below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Riad Hikaya</title>


<style type="text/css">
body{
scrollbar-arrow-color:#da34cd;
scrollbar-base-color:#8a8a8a;
scrollbar-dark-shadow-color:#6b6b6b;
scrollbar-track-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#7b8799;
scrollbar-3dlight-color:#000000;
}




.scrollbar {
        height: 340px;
        width: 263px;
        margin-top: 70px;
        overflow: auto;
}

</style>


<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>

<link href="css/ria.css" rel="stylesheet" type="text/css" />


</head>

<body onload="MM_preloadImages('images/but-gallery-ovr.png')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="493" border="0" cellpadding="18" cellspacing="0" class="riadb">
      <tr>
        <td valign="top"><div class="scrollbar">
          <p>Riad Hikaya -' hikaya' meaning ' story ' in Arabic - offers seven double bedrooms, all ensuite, and all handcrafted to the highest possible standards of comfort and elegance.<br />
            <br />
            The Riad offers all year round swimming with its heated pool and the roof top jacuzzi, cloaked in a bedouin tent for added intimacy, soothes aching limbs after a hard days shopping in the souqs. Pamper yourself in our hammam - steam bath - and let Laila, our in house masseuse, give you a traditional moroccan massage using natural products.<br />
            <br />
            The two roof terraces, planted with orange, lemon, grapefruit and pomegranite trees, offer superb, open views onto the snow capped Atlas mountains. Enjoy a leisurely, sun lit breakfast. Sunbathe under a clear blue African sky. Or relax in the cool shade of the caidale pergolas. As evening falls, prepare to dine as the sun sets to the accompaniment of the evening call for prayer. The choice is all yours.<br />
            <br />
            Our friendly staff - Maryame, Lubna, Fatima, Laila, Lahsen and Abdel Karim - will do all they can to ensure that your stay with us is unforgettable. We hope that your time at the riad will leave you with a ' hikaya ' ( story ) to tell.</p>
        </div></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:BrighteyesDesign
ID: 37007220
Ah right, In doesn't seem to work with Chrome or Safari either which along with Firefox is quite a large percent of the browser market.

Is there any cross browser code you know of?

(Jquery is not an option by the way)
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37007371
Unfortunately without Jquery or Javascript, there really isn't a cross browser css based solution.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37007422
Chrome and Safari use the -webkit versions of the properties.  FF has no support at all. Tthis will give you the chrome equivalent properties: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37007445
BTW... it is generally not a good idea to use not standardized properties.  They can change radically or go away overnight and you end up with broken pages.
0
 

Author Closing Comment

by:BrighteyesDesign
ID: 37100588
Helped me realise it wasn't possible the way I was trying to do it! (used flash in the end!)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

807 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