SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Scrollbar Styleand <style type="text/css">

    I'm not seeing what I am doing wrong here. Please help me as I have a similar page coded like this and the Scrollbar Style works.

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

    <STYLE>
    BODY{
    scrollbar-arrow-color: #A49C46;
    scrollbar-3dlight-color: #DFFDEE;
    scrollbar-highlight-color: #BAD369;
    scrollbar-face-color: #FBC9FC;
    scrollbar-shadow-color: #CCFBC4;
    scrollbar-darkshadow-color: #999B39;
    scrollbar-track-color: #FBDFFD;
    }
    </style>

    <style type="text/css">
    a {color:#00C100; text-decoration:none; font-style:normal; font-weight:500;}
    v {color:#24A11F; text-decoration:none; font-style:normal; font-weight:500;}
    u {color:#006300; text-decoration:none; font-style:normal; font-weight:500;}
    a:hover {color:#F0EBC1; text-decoration:none; font-style:normal; font-weight:500;}
    BODY {background-color: #CCFFCC; background-image: url("LeBgMjc2.png");}
    p,td,div {font-family:verdana,arial,helvetica,sans-serif; font-size:9px; line-height: 14px; margin-left:0%; margin-right:0%; padding:0;}
    </style>

    Thanks in advance,
    Angelique
    Adulthood is like childhood, only difference is, as an Adult, we don't have to give up our toys.
    Angelique

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a few theories. First of all, make sure all of your styles are lowercase; then know that Netscape/Mozilla and Opera do not support colored-scrollbars; and lastly use this code (any modifications on my part are in red):
    Code:
    <link rel="stylesheet" href="/Styles/StyleAllPages.css" type="text/css"> 
    
    <style type="text/css"> 
    body{ 
    scrollbar-arrow-color: #a49c46; 
    scrollbar-3dlight-color: #dffdee; 
    scrollbar-highlight-color: #bad369; 
    scrollbar-face-color: #fbc9fc; 
    scrollbar-shadow-color: #ccfbc4; 
    scrollbar-darkshadow-color: #999b39; 
    scrollbar-track-color: #dbdffd; 
    } 
    </style> 
    
    <style type="text/css"> 
    a {color:#00c100; text-decoration:none; font-style:normal; font-weight:500;} 
    v {color:#24a11f; text-decoration:none; font-style:normal; font-weight:500;} 
    u {color:#006300; text-decoration:none; font-style:normal; font-weight:500;} 
    a:hover {color:#f0ebc1; text-decoration:none; font-style:normal; font-weight:500;} 
    body {background-color: #ccffcc; background-image: url("LeBgMjc2.png");} 
    p,td,div {font-family:verdana,arial,helvetica,sans-serif; font-size:9px; line-height: 14px; margin-left:0%; margin-right:0%; padding:0;} 
    </style>
    Although I do not know why you're using three different stylesheets -- just combine them all in to one.

    One question, specifically regarding the third stylesheet -- what do the v and the u selectors stand for? -- underline (<u>) and (what's <v>?) are no longer compliant -- if you're using CSS then you shouldn't use these.

    -Colin
    Last edited by Aes; Feb 23, 2002 at 22:40.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi AES,

    Thank you for your reply

    As for the v = visited link, the u = unvisted link
    or so I thought..it works for me.

    As for putting it all into one stylesheet, I'm not sure how to. I've been trying to learn CSS on my own. But I do have a book coming as I've been fooling around with this problem for several days now.

    Thanks again!
    Angelique
    Adulthood is like childhood, only difference is, as an Adult, we don't have to give up our toys.
    Angelique

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the links, use this:
    Code:
    a {color:#00c100; text-decoration:none; font-style:normal; font-weight:500;}
    a:active {color:#006300; text-decoration:none; font-style:normal; font-weight:500;}
    a:hover {color:#f0ebc1; text-decoration:none; font-style:normal; font-weight:500;}
    a:visited {color:#24a11f; text-decoration:none; font-style:normal; font-weight:500;}
    If you want a link to underline, change the text-decoration to "text-decoration : underline ;".

    As for putting it all in one stylesheet, you can either:
    1. Take the contents of the linked styesheets, and your two in-line stylesheets, and put them all into one set of <style type="text\css"></style> tags
    2. or take the contents of the two in-line style sheets and put them in your one linked stylesheet.
    Both methods should work with varied degress of success. Just a reminder, if you link to your stylesheet, make sure <style type="text\css"><!-- --></style> is not in the .css file.

    And there's one more thing I simply overlooked. Should you decide to go the in-line route, you need to insert <!-- --> into the styles (a practice that I completely forgot in my earlier post that may be a contributor to your scroll-bar problems).

    If you do decide to use in-line styles, do so like this:
    Code:
    <style type="text/css">
    <!--
    INSERT CODING OF "StyleAllPages.css" HERE
    body{ 
    scrollbar-arrow-color: #a49c46; 
    scrollbar-3dlight-color: #dffdee; 
    scrollbar-highlight-color: #bad369; 
    scrollbar-face-color: #fbc9fc; 
    scrollbar-shadow-color: #ccfbc4; 
    scrollbar-darkshadow-color: #999b39; 
    scrollbar-track-color: #dbdffd; 
    }
    a {color:#00c100; text-decoration:none; font-style:normal; font-weight:500;}
    a:active {color:#006300; text-decoration:none; font-style:normal; font-weight:500;}
    a:hover {color:#f0ebc1; text-decoration:none; font-style:normal; font-weight:500;}
    a:visited {color:#24a11f; text-decoration:none; font-style:normal; font-weight:500;}
    body {background-color: #ccffcc; background-image: url(LeBgMjc2.png);} 
    p,td,div {font-family:verdana,arial,helvetica,sans-serif; font-size:9px; line-height: 14px; margin-left:0%; margin-right:0%; padding:0;} 
    -->
    </style>
    Hope this helps.

    -Colin
    Last edited by Aes; Feb 24, 2002 at 00:12.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  5. #5
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Ackkkk...Colin I've tried both ways, even removed the link to the additional stylesheet opened IE6, even though AOL uses it s well and still no Scrollbars

    It's lte here in PA and I'm starting to stress over this. I cleaned out the cache files to see if maybe I was getting an old picture of this, then uploaded it to see if maybe it was an offline thing, no such luck.

    I do appreciate all your help!!! The links and all work just not the Scrollbar. I even have the Scrollbar Styler so I know your code is right, mine was wrong after trying everything under the sun I knew.

    I'll try again tomorrow late morning and see if I can figure it out. I hope it isn't the meta tag I used:
    <META http-equiv="Content-Style-Type" content="text/css">

    Although I think not, I've never known a meta tag to cause a problem.

    Thanks again for all your help Colin!!!
    Angelique
    Adulthood is like childhood, only difference is, as an Adult, we don't have to give up our toys.
    Angelique

  6. #6
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Still not working - Have Url to check

    http://www.webdesigncertifiedprofess...empindex2.html

    If you use the url http://www.webdesigncertifiedprofessional.com/
    You'll see where my scroll bar is working.

    Please help find my error?

    Thanks,
    Angelique
    Adulthood is like childhood, only difference is, as an Adult, we don't have to give up our toys.
    Angelique

  7. #7
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All righty. Let's reiterate.
    • Put all of your CSS into ONE set of <style type="text/css"><!-- --></style> tags
    • Make sure you have <!-- immediately after <style type="text/css"> and --> immediately before </style>
    So your final result will be something like this:
    Code:
    <style type="text/css">
    <!--
    
    CSS STUFF HERE
    
    -->
    </style>
    90% of the time, doing those few things will solve the problem. See if that changes anything.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  8. #8
    SitePoint Member
    Join Date
    Feb 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Whew!

    Your CSS was excellant! That which I used that on my 'original' index, not posted, was working as well. I forgot to look at it. The only part I didn't use in that was the a:color part.

    But when yours didn't work again, I placed that code on my original index, it worked where as on the tempindex2.html it didn't. I looked and tried moving the rest of my coding over to the index.html page piece by piece, I removed this section:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/2001/REC-html401-20020001/loose.dtd">
    <html>
    <head>

    And replaced it with this coding:
    <html>
    <head>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/2001/REC-html401-20020001/loose.dtd">

    It now all works!!!!

    I can't thank you enough for all your help with my CSS, I learned a lot! I now know how to put it all together into one. And I know how to use them in 2 stylesheets.

    Thank you, Thank you, thank you!!
    Angelique
    Adulthood is like childhood, only difference is, as an Adult, we don't have to give up our toys.
    Angelique


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
  •