Web Analytics Made Easy -
StatCounter Styling the scrollbars of an iframe - CodingForum

Announcement

Collapse
No announcement yet.

Styling the scrollbars of an iframe

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Styling the scrollbars of an iframe

    Hey,

    I'm working on a site and I have the iframe set up to link to test page called home.html. I then have home.html using a style sheet called frames.css. I am trying to change the colour as well as the style of my iframe scrollbars with little luck. I have no found much on changing he appearance of the scroll bar to something more tasteful like simple up and down roll-over arrows but I did find info on the colours. I did the following in my frames.css file.

    body {
    scrollbar-face-color: #D9DEE1;
    scrollbar-highlight-color: #D9DEE1;
    scrollbar-shadow-color: #D9DEE1;
    scrollbar-3dlight-color: #D9DEE1;
    scrollbar-arrow-color: #D9DEE1;
    scrollbar-track-color: #D9DEE1;
    scrollbar-darkshadow-color: #D9DEE1;
    }

    But this did nothing. Is it because I am linking to an external stylesheet? I hope not because it would be nice to use the same style sheet for every content page in my frame. I also am using notepad so there is a distinct possibility that in an external stylesheet each property like face must be declared separately but since I have no syntax highlighting I don't know.

    Any help is appreciated, especially regarding a way to just ditch these ugly default scrollers for a more sleek and simple look. I'd like to just use a roll-over effect on a simple image of an arrow pointing up or down. Is that possible? I'm sure it is.
    Once I thought I was wrong but I was mistaken.

  • #2
    Well the method you are using will only work in IE. Change this
    Code:
    body {
    scrollbar-face-color: #D9DEE1;
    scrollbar-highlight-color: #D9DEE1;
    scrollbar-shadow-color: #D9DEE1;
    scrollbar-3dlight-color: #D9DEE1;
    scrollbar-arrow-color: #D9DEE1;
    scrollbar-track-color: #D9DEE1;
    scrollbar-darkshadow-color: #D9DEE1;
    }
    to this
    Code:
    html, body {
    scrollbar-face-color: #D9DEE1;
    scrollbar-highlight-color: #D9DEE1;
    scrollbar-shadow-color: #D9DEE1;
    scrollbar-3dlight-color: #D9DEE1;
    scrollbar-arrow-color: #D9DEE1;
    scrollbar-track-color: #D9DEE1;
    scrollbar-darkshadow-color: #D9DEE1;
    }
    You might find these links useful. http://www.dyn-web.com/dhtml/iframes/ and http://www.dyn-web.com/dhtml/scroll/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Thanks this was very useful.
      Once I thought I was wrong but I was mistaken.

      Comment

      Working...
      X