|
CSS - Changing The Color Of Scroll Bar
hi,
iam having a div tag in that div i have table.. <div style="width:658;height:265px; overflow:auto;" > <table> </table> </div> now i need to change the color of scroll bar of this div tag. i tried with this the css .myScrollBar { scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;} <div style="width:658;height:265px; overflow:auto;" id='myScrollBar'> but its not working.. Regards, Similar TutorialsOk I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /*
Theme Name: Pixel
Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/
Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy!
Author: Sam @ 85ideas.com
Author URI: http://85ideas.com/
Version: 2.0.2
Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post
.
Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
.
*/
/* Defaults */
* {
margin: 0;
padding: 0;
}
:focus {
outline:0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
hr {
color: #333;
border: 1px solid #121212;
}
pre {
height: auto;
overflow-x:scroll;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
dd {
padding-left: 15px;
}
p {
font-size: 9pt;
}
a {
color: #6598b8;
text-decoration: none;
}
a:hover {
color: #222;
text-decoration: underline;
}
a img {
border: none;
}
blockquote {
background: #070707;
border: 1px solid #060606;
padding: 5px 15px;
margin: 10px 10px 5px 15px;
font-style: italic;
color: #fff;
}
code {
color: #3366cc;
font-style: italic;
}
strong {
font-size: 110%;
}
body {
text-align: center;
margin: 0;
padding: 0 0 15px 0;
font-family: trebuchet ms, arial, helvetica, sans-serif;
background: #000 url(images/bgbody.jpg) top center no-repeat;
color: #eee;
}
/* Header and wrapper */
#wrapper {
margin: 0 auto;
width: 960px;
text-align: left;
padding: 0;
}
#header {
padding: 0;
margin: 0;
height: 80px;
text-shadow: 0 0 4px #555;
}
#header #topright {
text-align: right;
float: right;
width: 930px;
margin: 3px 0 0 0;
}
#header #topright ul {
list-style: none;
padding: 0;
margin: 0;
}
#header #topright li {
display: inline;
}
#header #topright li a {
color: #fff;
font-size: 9pt;
padding: 0 0 0 25px;
text-transform: lowercase;
}
#header #topright li a:hover {
color: #ccc;
text-decoration: none;
}
#header #logo {
margin: 0;
padding: 0;
}
#header h1 {
padding: 0;
margin: 0;
}
#header h1 a {
color: #fff;
font-size: 17pt;
text-decoration: none;
}
#header h1 a:hover {
color: #eee;
text-decoration: none;
}
#header span {
padding: 0;
color: #eee;
font-size: 10pt;
}
/* Menu */
#catnav {
margin: 20px 0 0 0;
padding: 0;
clear: both;
height: 44px;
width: 960px;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
display: block;
line-height: 44px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 10pt;
color: #fff;
letter-spacing: -1px;
}
#nav li a:hover {
color: #6598b8;
text-decoration: none;
display: block;
}
#nav li ul {
list-style: none;
position: absolute;
width: 150px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
float: left;
margin: 0;
padding: 0;
width: 150px;
}
#nav li li a {
width: 150px;
height: 24px;
line-height: 24px;
color: #fff;
border-top: 1px solid #131f27;
background: #040404;
margin: 0;
padding: 5px 20px 5px 15px;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background: #000;
padding: 5px 20px 5px 15px;
}
#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
#toprss {
float: right;
margin: 10px 15px 0 0;
display: inline;
width: 65px;
line-height: 41px;
}
/* Top Content */
#main {
margin: 5px 15px 0 15px;
clear: both;
width: 930px;
padding-bottom: 5px;
}
#contentwrapper {
float:left;
width: 560px;
margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper2 {
float:left;
width: 900px; margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {
margin: 15px 0 10px 0;
font-size: 14pt;
letter-spacing: -1px;
color: #fff;
font-weight: normal;
background: url(images/bg-trans.png) repeat;
padding: 5px;
}
.topPost {
margin: 0;
padding: 0;
font-size: 9pt;
}
.topPost h2.topTitle a {
font-size: 15pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
}
.topPost h2.topTitle a:hover {
text-decoration: none;
color: #abd1ea;
}
.topPost p.topMeta {
padding: 0;
margin: -10px 0 0 0;
font-size: 9pt;
color: #cdcdcd;
}
.topPost p.topMeta a {
text-decoration: none;
color: #fff;
}
.topPost p.topMeta a:hover {
color: #ccc;
text-decoration: underline;
}
.topPost div.topContent {
font-size: 9pt;
color: #efefef;
margin: 8px 0;
}
.topPost div.topContent p {
font-size: 1.05em;
line-height: 1.6em;
}
.topPost div.topContent a {
text-decoration: underline;
color: #fff;
}
.topPost div.topContent a:hover {
text-decoration: underline;
color: #ff9933;
}
.topPost div.topContent ul, .topPost div.topContent ol {
padding: 0 0 0 30px;
}
.topPost div.topContent ul li, .topPost div.topContent ol li {
font-size: 1.05em;
color: #eee;
}
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
font-size: 9pt;
font-style: italic;
background: url(images/bg-trans.png) repeat;
padding: 8px 10px;
margin-right: 5px;
line-height: 27pt;
color: #fff;
border: 1px solid #111;
}
.topPost span.linkpages {
font-size: 9pt;
font-style: italic;
color: #fff;
margin-bottom: 10px; display:block;
}
.topPost span.linkpages a:hover {
color: #ddd;
}
.topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover {
background: #040404;
}
.topPost span.topComments a {
color: #fff;
background: url(images/comments.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topMore a {
color: #fff;
background: url(images/more.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topTags em {
background: url(images/tags.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
color: #0a0a0a;
}
.topPost span.topTags a {
color: #fff;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
color: #fff;
text-decoration: underline;
}
#nextprevious {
margin: 10px 0 5px 0;
}
#nextprevious a {
color: #eee;
text-transform: lowercase;
border: 1px solid #111;
padding: 5px 8px;
font-size: 10pt;
line-height: 1.4em;
}
#nextprevious a:hover {
color: #fff;
}
/* Comments */
#comments {
margin-bottom: 10px;
margin-top: 15px;
background: #040404;
width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */
border: 1px solid #090909;
padding: 0px 15px 10px 15px;
color: #fff;
}
#comments h3 {
font-size: 10pt;
font-weight: normal;
color: #fff;
margin: 15px 0;
padding: 0;
}
#comments p a {
color: #6598b8;
}
#comments p a:hover {
color: #fff;
}
#comments p {
padding:0;
margin: 7px 0;
}
ul.commentlist, ul.trackback {
list-style-type: none;
margin: 10px 0;
font-size: 9pt;
}
.commentlist li, .trackback li {
margin: 10px 0 15px 0;
padding: 10px;
background: #080808;
border: 1px solid #040404;
list-style-type: none;
}
.commentlist li.alt {
background: #000;
border: 1px solid #020202;
border: none;
margin-top:10px;
}
.commentlist li.cleared {
background: transparent;
border: none;
}
.commentlist a:hover {
color: #eee;
}
.commentlist a.gravatar {
float: left;
margin: 0 15px 10px 0;
width: 60px;
}
.commentlist .commentbody {
margin: 0;
padding: 0;
}
.commentlist .commentbody p a {
text-decoration: underline;
}
.commentlist cite {
font-size: 10pt;
font-style: normal;
color: #ddd;
}
.commentlist small.commentmetadata a {
color: #666;
}
.commentlist p {
color: #dedede;
}
#respond {
clear: both;
margin-top: 15px;
}
textarea#comment {
width: 450px;
background: #fff;
color: #111;
padding: 10px;
}
#comments #submit {
margin: 0;
}
#extrastuff a {color:#999; font-size:0.8em;}
#extrastuff a:hover {color:#6598b8; text-decoration:none;}
#extrastuff #rssleft {float:left; width:250px;}
#extrastuff #trackright {float:right; width:180px; text-align:right;}
/* Welcome section */
#main #welcome {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
background: url(images/bg-trans.png) repeat;
}
#main #welcome h2 {
font-size: 14pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
margin: 0 10px;
padding: 10px 0 3px 0;
}
#main #welcome p {
font-size: 9pt;
color: #eee;
margin: 0 10px;
padding: 6px 0;
}
#main #welcome a {
text-decoration: underline;
color: #ff9933;
}
#main #welcome a:hover {
color: #6598b8;
}
#main #welcome form {
margin: -5px 0 0 0;
background: transparent; /* required for IE */
}
#main #welcome #feedbox {
border: 1px solid #ccc;
padding: 2px 1px;
width: 180px;
}
.submitbutton {
margin: -5px 0 0 5px;
background: #010101;
color: #fff;
font-size: 8pt;
padding: 3px 6px;
vertical-align: middle;
border: 1px solid #111;
}
.submitbutton:hover {
cursor: pointer;
background: #050505;
}
/* Sidebars */
#sidebars {
margin: 15px 0 0 0;
float: right;
width: 340px;
color: #eee;
}
#sidebars .sidebarbox {
background: url(images/bg-trans.png) repeat;
padding: 8px 15px;
}
#sidebar_full {
padding: 0;
margin: 0;
}
#sidebar_left {
float: left;
width: 160px;
}
#sidebar_right {
float: right;
width: 160px;
}
#sidebars h2 {
margin: 0;
padding: 0 0 8px 0;
font-weight: normal;
font-size: 11pt;
color: #fff;
letter-spacing: -1px;
}
#sidebars table {
width: 130px;
}
#sidebars ul {
margin: 0;
padding: 0 0 5px 0;
}
#sidebars li {
margin-bottom: 20px;
list-style: none;
font-size: 9pt;
}
#sidebars li ul {
padding: 0;
}
#sidebars ul ul li {
margin: 0;
padding: 2px 2px 2px 16px;
color: #eee;
background: url(images/bullet.gif) left 8px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
#sidebars a {
display: inline;
color: #eee;
}
#sidebars a:hover {
color: #6598b8;
text-decoration: underline;
}
#sidebars p {
padding: 2px 0;
font-size: 9pt;
color: #eee;
}
#tag_cloud a {
display: inline;
}
#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}
/* Before footer */
#morefoot {
background: #000 url(images/bggrad.jpg) top left repeat-x;
border: 1px solid #070707;
padding: 15px;
color: #dfdfdf;
margin: 0 0 10px 0;
}
#morefoot p {
margin: 5px 0;
padding: 5px 0;
}
#morefoot ul {
list-style-type: none;
margin-top: 5px;
}
#morefoot ul li, #morefoot p {
font-size: 9pt;
}
#morefoot a {
text-decoration: underline;
color: #ddd;
}
#morefoot a:hover {
text-decoration: underline;
color: #6598b8;
}
#morefoot h3 {
font-size: 12pt;
font-weight: normal;
color: #dfdfdf;
letter-spacing: -1px;
border-bottom: 1px dotted #444;
margin: 0;
padding: 0 0 2px 0;
}
#morefoot #searchbox {
padding: 1px;
width: 180px;
}
#morefoot .col1 {
float: left;
width: 340px;
}
#morefoot .col2 {
margin: 0 25px;
}
#morefoot .col2, #morefoot .col3 {
float: left;
width: 260px;
}
#morefoot li {
padding-left: 20px;
margin-bottom: 5px;
background: url(images/more.gif) left 2px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
/* footer*/
#footer {
clear: both;
background: #000;
border: 1px solid #070707;
padding: 15px 15px 10px 15px;
}
#footer p {
font-size: 9pt;
color: #bbb;
padding: 0;
}
#footer a {
color: #bbb;
text-decoration:none;
}
#footer a:hover {
color: #fff;
}
#footerleft {
float: left;
width: 500px;
}
#footerright {
float: right;
width: 300px;
text-align: right;
}
/* Misc */
.highlight {
color: #222;
font-weight: bold;
}
.cleared {
margin: 0;
padding: 0;
clear: both;
}
.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
.alignright {
float: right;
margin: 10px 0 5px 15px;
}
.aligncenter,
div.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
img.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
img.alignright {
float: right;
margin: 10px 0 5px 15px;
}
img.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
color: #111;
}
#reg-form .formleft { background: none !important;
color: #fff;}
#account-form { background: none !important;
color: #fff;}
Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower {
width: 765px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#lower ul {
width: 775px;
list-style-type: none;
margin: 0;
padding: 0px;
}
#lower ul li {
font-family: "Trebuchet MS";
font-size: 14px;
width: 250px;
float: left;
}
#lower ul li a {
text-decoration: none;
display: block;
height: 125px;
color: #262626;
}
#lower ul li a:hover {
background-color: #5B8C3E;
color: #D9D9D9;
}
#lower h2 {
font-family: "Trebuchet MS";
font-size: 16px;
margin: 0px;
color: #262626;
}
#lower a h2:hover {
color: #D9CE3F;
}
As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. How can I use CSS to specify the color I want for the image borders on the page? I'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code:
.clickableTROpt1{
font-weight: bold;
cursor: pointer;
background-color: #FFFFFF;
}
.cellover{
color: #FFFFFF;
background-color: #CCCCCC;
font-weight: bold;
}
it looks like my css needs to be told to apply the changes to <a> tags as well? Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? Hi, How to change the background color of textbox in css, so that negative numbers can be shown in red color I have multiple textbox in my asp page, which gets values from database. So there is a negative value shown, I want to highlight that in red color. How to achieve this? Thank you hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>
And css for that part of the page is: Code: #index .box .column3 {width:252px;}
Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery Hi, Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? 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 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? I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! 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 |
|||||||