Advanced Search

Results 1 to 5 of 5

Thread: Change ScrollBar Color inserted inside table

  1. #1
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Change ScrollBar Color inserted inside table

    Hi Folks

    I am animator by profession,recently I got chance to work for a non profit organisation who require a php driven portal website.Design is all coming out neat but programming/coding is not my key strengths,thus I am taking help of all friends and forums like yourself where I can resolve the programming/coding issues that I am facing right now.

    Right now I need help on this one :
    I am able to insert the scrollbar inside the table.But I want to change the color of the scrollbar.I have tried this using externally linked style sheet as well inserting scrollbar properties inside the html doc itself.

    <div class="scrollbeauty" style="width: 280px; height: 535px; padding:4px; border: 0px ; overflow-x:hidden;overflow-y:auto;">
    <table width="280" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="textcontentBIG" valign="top">
    </td>
    </tr>
    </table>

    Please help me in resolving the above.

    Best Regards.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    The below mentioned are the CSS style properties that associated with the Scrollbar Color:

    scrollbar-face-color
    scrollbar-arrow-color
    scrollbar-track-color
    scrollbar-shadow-color
    scrollbar-highlight-color
    scrollbar-3dlight-color
    scrollbar-darkshadow-Color

    The first three items are the most important among them.

    scrollbar-face-color - Sets the color for the scroll bar slider and the boxes that contain the scrollbar arrows
    scrollbar-arrow-color - Sets the scroll bar arrow color
    scrollbar-track-color - Sets the color for scroll bar track

    scrollbar-3dlight-color - Sets the scroll bar 3D light color
    scrollbar-highlight-color - Sets the scroll bar highlight color
    scrollbar-shadow-color - Sets the scroll bar shadow color
    scrollbar-darkshadow-color - Sets the scroll bar dark shadow color

    Example:
    HTML Code:
    body 
    {
    scrollbar-face-color: #FF00FF;
    scrollbar-shadow-color: #0AB0FF;
    scrollbar-highlight-color: #00FF00;
    scrollbar-3dlight-color: #FF00FF;
    scrollbar-darkshadow-color: #00FFFF;
    scrollbar-track-color: #FFCC00;
    scrollbar-arrow-color: #000000;
    }
    The scrollbar CSS properties are NOT W3C valid. Mozilla FireFox doesn't support these properties.

  3. #3
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thanks for the reply.
    It works fine now for me in IE and Firefox but netscape the scrollbar is not visible.

    Any suggestions how to resolve this.

    Best Regards.

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    It works fine now for me in IE and Firefox
    Can you provide a link so that we people can view that using different browsers.

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    I wonder how you got the scrollbar color effect in Mozilla based browser just because they are microsoft css extension which works in IE and Opera.

    Please read this

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •