asked on

Customise Scrollbars

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

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BrighteyesDesign

ASKER

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)

LZ1

Unfortunately without Jquery or Javascript, there really isn't a cross browser css based solution.

COBOLdinosaur

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/

COBOLdinosaur

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.

BrighteyesDesign

ASKER

Helped me realise it wasn't possible the way I was trying to do it! (used flash in the end!)