CSS - Css 3 (you Have No Color Set (or Color Is Set To Transparent) But You Have Set A Bac)

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

Hey everyone,

I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please!

Sarah

CSS:
/* Global Styles */

body {
margin:0px;
}

td {
font:11px arial;
color:#333333;
}

a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}

/* ID Styles */

#navigation a {
font:10px arial;
color: #ffffff;
text-decoration:none;
letter-spacing:.1em;
}

#navigation a:hover {
color: #99CCFF;
}

#padding {
padding:20px 5px 20px 5px;
}

#calendar td {
border: 1px solid rgb(0,51,153);
}

#noborder td {
border: 0px;
}

#weekdays th {
font:11px arial;
color: #ffffff;
font-weight:bold;
border: 0px;
padding:2px;
}

#calheader td {
font-weight:bold;
}

/* Class Styles */

.logo {
font:18px times new roman;
color: #990000;
letter-spacing:.3em;
font-weight:bold;
line-height:22px;
}

.tagline {
font:11px times new roman;
color: #CC3300;
letter-spacing:.2em;
}

.smallText {
font:12px times new roman;
color: #CC3300;
line-height:18px;
}

.pageHeader {
font:30px times new roman;
color: #CC3300;
letter-spacing:.1em;
line-height:38px;
}

.bodyText {
font:11px arial;
color:#333333;
line-height:24px;
}

.pageName {
font:20px georgia;
color: #8F0000;
letter-spacing:.1em;
line-height:26px;
}

.subHeader {
font:14px times new roman;
color: #990000;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.navText {
font:10px arial;
color: #333300;
letter-spacing:.1em;
}

I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it?

any ideas why this page : http://tampabay-online.org/avaacc/

has blue borders around the images in IE

it looks like it should in firefox.

is there some work around for this?

thanks

Hey Guys!

I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script.

If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction?

Thanks!

Here is a link to my page:
shipswatchdotcom/forum/vanilla/aaa.html

Here is the css script:
Code:

#Body {
	margin: 0;
	width: 99.9%;
	position: relative;
	background: #F6F6F2;

}
#Head {
	background: #B8D4B8;
	padding:0;
	margin: 20px 20px 0;
	text-align: left;
	position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
	background: #F6F6F2;
	border-bottom: 1px solid #3b5998;
}
.Banner {
	padding: 10px;
	text-align: left;
	position: relative;
	background: #F6F6F2;
}
.Banner ul {
	background: #B8D4B8;
	padding: 0;
	margin: 0;
}
.Banner ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
.Banner ul li a {
	font-weight: bold;
	padding: 3px 6px;
	font-size: 11px;
	color: #336633;
	display: inline-block;
}
.Banner ul li a:hover {
	background: #E5F0E5;
}
.Banner ul li a.SignOut {
	font-weight: normal;
	position: absolute;
	top: 10px;
	right: 10px;
}
.Banner ul li a span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 1px 2px 0 1px;
	background: #F6F6F2;
	border-right: 1px solid #F6F6F2;
	border-bottom: 1px solid #F6F6F2;
	color: #F6F6F2;
	font-size: 9px;
	position: relative;
	top: -3px;
}
#Content {
	float: none;
	width: auto;
	margin: 0 280px 0 10px;
	background: #F6F6F2;
}
#Panel {
	float: right;
	margin-right: 10px;
	background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
	width: 200px;
	margin-right: 4px;
	background: #F6F6F2;
}
div.SearchBox {
	margin-bottom: 6px;
}
body.Profile div.SearchBox {
	display: none;
}
body.Profile #Content {
	float:none;
	width: auto;
	margin: 0 10px 0 280px;
	background: #F6F6F2;
}
body.Profile #Panel {
	margin: 0 0 0 10px;
	background: #F6F6F2;
}
form.Activity textarea {
	width:99%;
	background: #F6F6F2;
}
#Foot div {
	width: auto;
	background: #F6F6F2;
}
body.Post #Content {
	width: auto;
	margin:0 20px;
	background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
	width:99%;
	background: #F6F6F2;
}
#ConversationForm form {
	border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
	clear: none;
}
#DiscussionForm form {
	background: #F6F6F2;
	border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
	background: #F6F6F2;
	border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
	background: #F6F6F2;
	padding: 0;
	border-bottom: 1px solid #aaa;
}
div.Tabs ul {
	padding: 0 8px;
	white-space: nowrap;
}
div.MessageForm {
	padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
	padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
	font-size: 11px;
   margin: 0;
   border: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: #F6F6F2;
   color: #336633;
   text-decoration: none;
   padding: 8px 10px;
	line-height: 11px;
}
div.Tabs li a:hover {
   text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
   background: #F6F6F2;
   color: #336633;
   margin: 0;
   border: 1px solid #aaa;
	border-bottom: none;
   border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   display: inline-block;
	font-size: 12px;
	line-height: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 10px;
	position: relative;
	top: 1px;
}
div.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
	background: #F6F6F2;
   color: #4A7023;
   margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
	font-size: 11px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-top: 1px solid #aaa;
	background: #F6F6F2;
	margin:0;
	padding:4px 8px;
}
div.HeadingTabs ul {
	margin: 8px 0 0;
}
body.Discussion a.Bookmark {
	margin: 6px 2px;
}
div.Preview {
	border: 1px solid #aaa;
	background: #F6F6F2;
	margin:0 0 8px;
	padding: 8px;
}
.Foot {
	background: #F6F6F2;
	border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: #F6F6F2;
	border: none;
	color: #4A7023;
	line-height: 1;
	padding: 0;
	text-decoration: none;	
}
div.MorePager a:hover {
	color: #4A7023;
	text-decoration: underline;
}
body.add #Content {
	margin: 0 10px;
	background: #F6F6F2;
}

/* Panel Boxes */
#Panel div.Box {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: #F6F6F2;
	padding: 0;
}
div.Box h4 {
	color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
	border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
	background: #F6F6F2;
	border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
	background: #F6F6F2;
}
#Status {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #eee;
	color: #000;
	line-height: 1.6;
	padding: 3px 6px;
	margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
	border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
	margin: 0;
	padding: 0;
}
body.Profile ul.PanelInfo li a {
	font-size: 12px;
	display: block;
	padding: 0 6px;
	background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
	background: #F6F6F2;
}

/* Sign In Page */
body.Entry #Content {
	text-align: center;
	margin: 0 auto !important;
}
body.Entry #Content div.Box {
	background: #F6F6F2;
	border: 0;
}
div.Methods {
	border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
	background: #F6F6F2;
	border: 1px solid #ccc;
	padding:6px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
	color: #000;
}
div.Warning {
	background: #d00;
	border: 1px solid #b00;
	color: #F6F6F2;
	text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
	color: #F6F6F2;
}
#Content div.Box {
	color: #000;
	background: #F6F6F2;
	border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
	border: none;
}
/* Autocomplete */
.ac_results {
   border: 1px solid #d7d8da;
	color: #000;
   border-top: 0;
   background-color: #F6F6F2;
}
.ac_results li {
   border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
   border-bottom: 0 !important;
}
.ac_results strong {
   background: #F6F6F2;
}
.ac_over strong {
   background: #F6F6F2;
}
.ac_over {
   background: #3b5998;
   color: #fff;

}

I have table in html with 3 col and 15 rows. I want to set the color of the even rows 'red' and odd 'blue'. How it is possible.
please help?

Adil

i've been trying to get a button that i made with <div> tags to light up when the mouse goes over it, but i cant.

Only the link within the <div> tag lights up.

Please show me the problems with my ways...

thanks

Hello, can anyone helpme ?

i'm searching a command to change the combobox color...

i mean, not the background or font.. something like the button (arrow button) ...

does anyone know how to do it with CSS ??

thanks

Hi,

I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background?

I have a css for a sliding menu and cannot get this color to work. Here's the code:

Code:

.transMenu .item.hover {
	color:white;
	background:#F79A00;
	}

If i use "white" nothing will show up. I can use red, green, etc, but not white. I tried substituting "#ffffff" but still didn't work. Is it not possible to use white in this circumstance? (I'm a noob with this stuff)

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFE648;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: underline;
}
a:link {
text-decoration: underline;
color: #FFFFFF;
}
.main_border {
border-top: none;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;

}
.field_style1 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #666666;
}
.whitebold_12px {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.whitebold_11px { font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: none;
color: #FFFFFF;
}
.arrow_bold {
font-size: 14px;
color: #FDDB00;
font-weight: bold;
}
.disclaimer {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
.footer_text1 {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
-->
</style>

<style type="text/css">
.footer_text2 {FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A {COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A:visited {COLOR: #333333; TEXT-DECORATION: underline}
A:hover {COLOR: #cccccc; TEXT-DECORATION: none}
A:active {COLOR: #333333; TEXT-DECORATION: underline}
A:link {COLOR: #333333; TEXT-DECORATION: underline}
</style>


This my style tags. I have bunch of links on the page. Now it possible that links could be in different colors and also visted and hover links could be different. When I put class .footer_text2 , it over writes everything that I hade before and all my links get style accorrding to footer_text

i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color.
is there any way that i can set so that their choice will stay throught their surfing ?
any thoughts ?

hanks

Okay, I have a navigation and one link, "SERVICES" has a sub-menu. The submenu looks good in Firefox, Safari, and Netscape for the Mac. Also Firefox for the PC, but not IE7 for the PC.

Here's the site: http://www.caillouette.com/Villere_dynamic2/rentals.php

Please rollover, "SERVICES" in IE.

Here's the style sheet (*note: I created it Dreamweaver using Spry. I am only including the code of interest)
Code:

/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 9pt;
	font-weight: bold;  
	color: #FFFFFF; /*text color*/
	padding: 0px 0 0 12px;
	text-decoration: none;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
	display:block;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 100%pt;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers  */
ul.MenuBarHorizontal ul
{
	border: 0px;
	background-color: #AEB0B3;
}



/*  status for the new colors  */
ul.MenuBarHorizontal ul a
{
	border: 0px;
	color:#FFFFFF;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hover
{
	border: 0px;
	color:#444343;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}

/*  end new colors  */





ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,  ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
	text-size:9pt;
	font-weight:normal;
	/* background-color: #AEBOB3; */
	color: #9dba44;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
*/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
*/
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
	ul.MenuBarHorizontal ul aIE
{
	border: 0px;
	color:#FFFFFF;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hoverIE
{
	border: 0px;
	color:#444343;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
}

thanks

Hi,

I have made a page using <div> tags.

<div id="page">
<div id="leftmenu">
</div>
<div id="mainarea">
</div>
</div>

My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3)

How can I do this? Plz Help!

I have pasted the style codes for the 3 tags below.


(1)


(2)



(3)

#mainarea {
background-color:#FFFFFF;
float:left;
position:relative;
right:0pt;
width:630px;
}

#leftmenu {
background-color:#EEEEEE;
float:left;
left:0pt;
position:relative;
width:140px;
}

#page {
background-color:#FFFFFF;
position:relative;
width:770px;
}