|
CSS - Scroll Bar Colours
how can i colour the scroll bars on my page - i.e. the ones when you have to scroll up and down the page, but also, the ones used within form elements such as drop down lists. I have tried using css, but to no avail.
My page consists of two frames - one on the left and one on the right. Thankyou. Similar TutorialsHi, Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00? Also is there anyway to refer to the parent of an element? Thanks, Matthew Hi, Why does the following not change my scrollbar colours? PHP Code: body { font: 14px Arial, sans-serif; color: #18387B; background: #687BA3; margin-top: 5px; margin-left: 5px; SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; } Hi. I've got an element in my CSS such as: PHP Code: .footer { width: 760px; background-color: Aqua; } I'm trying to use it in a table to have the table take on the properties of the .footer element. Currently I'm using it like this: PHP Code: <TABLE class="footer" ALIGN="CENTER" BORDER=0 CELLPADDING=2> <tr><td>MY CONTENT</td></tr></table> Should the bg of the table not be what I set in the CSS element??? Hi, I use blog software (Wordpress) to run my site and this allows me to use different themes. I have created three themes that are exactly the same except for the colours used. I would like to seperate the layout definitions from the colour definitions so that I can call the layout css on all of them and then call the required colour css. I have tried taking out all references to colour and then putting those references into a new css and then calling that but unfortunately it didn't work. I am presuming that some definitions require more than just colours. Can somebody help seperate the layout from the colours for me? I'm sure there are other "issues" with the css, so if anything else is bad please let me know. I have attached the relevant css as a text file. TIA Phillip Hi everyone! I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie That's about the height of it. I have been trying to pick colours for the site I'm playing with. I can't find any pastal (my preference - not necessarily the best, I'm still learning) colours I like in the Web Safe Colours. So, I started snooping around the internet . . . mostly to find out how bad it is that I'm not considering IE 5.x when developing. I found this information at Upsdell: Browser News and it appears to be dated Nov 19th 2005. It suggests that ~1% are restricted to the 256 colours. Is this site reputable for information accuracy and is it reasonable to conclude that web safe colours are a thing of the past? Cheers! Hi Everyone. I'm a new member and so please forgive me if I don't immediately understand all the jargon. However I have a problem and I was hoping someone might be able to help. I have searched the web and W3 schools but couldn't find the answer I was looking for. I am using strict HTML with an external CSS style sheet. I have a several paged website I am creating for part of a University assignment. I have several links which have 3 colours for 3 states. Link, visited and highlight. These work perfectly. (For me anyway). I have now been told to remove 'circular references'. I understand this to be; If I am on the 'Home' page, then 'Home' is no longer a link. (The cursor turns to a text bar instead of a hand) I have removed href from the html to stop this happening. leaving just <a>Home</a> This is fine, however, the colours that I specified in the css now no longer apply and the text is just black. I have followed the instructions in the web pages that I have seen to retain the colours, or add them to an inline style sheet, but nothing seems to work. I can only achieve adding one colour (but not making it change when visited or hovering) or changing the colour of ALL links. Sorry if this is confusing.. I hope someone can help! The relevent code is below. HTML <head> <style type="text/css"> .homebut a:link {color: red;} .homebut a:visited {color: purple;} .homebut a:hover {color: orange;} <!--none of the above seems to work--> </style> </head> <body> <div class="homebut"> <a>Home</a> </div> CSS /*This is applied to all links but doesn't work when I remove HREF from the HTML*/ a:link { COLOR: #0099FF; text-decoration:none;} a:visited { COLOR: #00FFFF; } a:hover { COLOR: #FFFFFF; } Hi, I'm having trouble with changing the colour of link, vlink and alink in a webpage layer. I use CSS to set the colours in the main page body tag but am unable to change the colour of the hyperlinks in a layer on the same page to a different set of colours. This causes some of links to be unreadable and i'd like to be able to change the colours of the links in the layer but keep the colours on the main webpage. Anyone got any idea how to do this?. Is CSS the way to go?. The website is written in PHP if that makes any difference. Many thanks for any help. Hi guys i am lost big time. ive spend well over 10 hours trying to think, try, to solve this problem. i have got 6 Horizontal CSS Dropdown Menu to make but each one of them must have there own colours , green, blue, yellow, pink etc. and in that the hover colour must match the colour menu that your on at the time i.e be slightly darker. any ideas on how i would do this its driving me mad, ive tryed classes, divs java but am just getting no where I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that? hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using Top User Code <div id="an_box_topmember"> <div class="an_btm_header"><span><strong>Top User</strong></span></div> <div class="an_btm_content"> <ul> Scroll Bar Code <div style="width: 190px; height: 190px; overflow: auto; padding: 5px"> </div> Where will i add the scroll bar code,Thanks all comments are welcome seems to work in IE but not firefox... how do i get around this and make it work for both? well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble. my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock' heres the site, go to the rumors sections: www.mikeberlucchi.com heres the code: Code:
<td align="right">
<DIV
style='
color: #000000;
background-color: #867878;
border: solid 0px black;
width: 300px;
height: 250px;
overflow: auto;
scrollbar-face-color: #C3D6DA;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>
any input would be awesome, thanks Hi All I'm trying to insert a scroll bar in a <div> section of my webpage but I'm having a few problems with it. In this section I have the background set to an image I created in Photoshop. It's just a plain white rectangle with rounded corners. The problem I'm having is the scroll bar is displayed outside of this area also the scroll goes right from the top to the bottom so it cuts off the rounded corners. Is there any way to have the scroll bar on the inside and inset just every so slighty?? I'm using css overflow:scroll. I hope this makes sense. Thanks in advance. I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as: header record1 record2 record3 record4 column1 column1 column1 column1 column1 column2 column2 column2 column2 column2 column3 column3 column3 column3 column3 column4 column4 column4 column4 column4 what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work. Here is the code, its in php but its not big or too hard to figure out. PHP Code: echo '<div id="tableheader">'; for ($i=0; $i<count($info); $i++) { echo '<p>'.$info[$i][name].'</p>'; } echo '</div>'; for ($i=0; $i<count($data); $i++) { if (!($i & 1)) { echo '<div class="even">'; } else { echo '<div class="odd">'; } for ($j=0; $j<count($data[$i]); $j++) { if ($j == 0) { echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>'; } else { echo '<p> '.$data[$i][$j].' </p>'; } } echo '</div>'; } echo '</div>'; ?> </div> and my css is: Code:
#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;}
.even {position: relative; float: left;}
#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black;display: block;}
Any ideas? Thanks I'm trying to ensure the absence of the horizontal scroll bar within a div for all browsers. Is there a solution? overflow: -moz-scrollbars-vertical !important; only works in FF, but this is the effect I want. overflow-x and overflow-y only work in IE6 and below (right?), so does anyone know what to do for ie7 and safari and opera? If you look at this web site http://www.mobilvox.com/ you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls. I've been using the code below, and I can't seem to get the same behavoir. Code: <style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
background-color:#000033;
}
body {
font: 100%/1.25 verdana, arial, sans-serif;
color: black;
background-color: #eef;
overflow: auto;
}
p {
font-size: 1em;
margin-bottom: 0;
}
p + p {
text-indent: 1em;
margin-top: 0;
}
#header {
color: #000000;
background-color: #fff;
overflow: auto; /*encloses float children
see http://garyblue.port5.com/webdev/floatdemo.html
*/
text-align: center;
}
#header ul {
list-style: none;
margin: 0;
padding: 0;
}
#headermenu1 {
float: left;
text-align: right;
margin-left: 2px;
display: inline; /*this is a fix for IE's doubled
float margin bug*/
}
#headermenu2 {
float: right;
text-align: left;
margin-right: 100px;
display: inline; /*same as above*/
}
#global {
margin:0 auto;
width:500px;
text-align: left;
}
can someone point out the problem. - Thanks - Kris |
|||||||