CSS - Radio Button Background Color?

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;

}

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 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

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;
}

Having an issue with the background color in a div.

The color shows up in I.E. but not in Firefox.

I have a div with a width of 100%. Inside the div is an unordered list with two list items.

Here is the css:

div#nav {
width: 100%;
margin: 0;
background-color: #EAE9E4;
}

#nav ul {margin: 0; padding: 0; }

#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15%;
font-size: 11px;
line-height: 20px;
white-space: nowrap;
}

Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color.

Any help appreciated.

Hi there people,

I have a question about CSS but before I start off asking this question I'll introduce myself.

I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer".

Ok so now you know me a little, I'll start off asking my question.

Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it).
So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes?

Tnx, Dwight

I tried to create a button with an outline color, but it doesnt seem to work. Does anyone has worked on outline property ,can u help me!!!

<button STYLE="outline: red solid thick">I'm a Button - CLICK ME!</button>

My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag.

I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up.

Thanks in advance for any help!

html code -> cosmosristorante dot com / ox / index.asp

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!

On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops.

Here's the main css behind it:
#slogan
{
border-bottom:2px solid black;
border-right:2px solid black;
border-left:2px solid black;
background-color:#ABAABB;
font-family:comic sans ms;
width:40%;
}

Attactched is the screenshot from IE and firefox.

How can I make it look like it does in IE for all browsers (i.e., what is the correct code?)

The full code can be seen here.

Hi all,

I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox.

Here's xhtml code:
xhtml Code:
Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html>

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="toparea">

<div id="header"></div> <!--end header-->

<div id="menuarea">
<div id="menubox">
</div> <!--end menubox-->
</div> <!-- end menuarea-->

</div> <!--end toparea-->

<div id="middlearea">

<div id="mainwrap">

<div id="topwrap"></div> <!--end topwrap-->

<div id="leftcolumn">

<div id="content"></div> <!--end content-->

<div id="recentwork"></div> <!--end webwork-->

</div><!--end leftcolumn-->

<div id="rightcolumn"></div> <!--end rightcolumn-->

<div id="bottomwrap"></div> <!--end bottomwrap-->

</div> <!--end mainwrap-->
</div> <!--end middlearea-->

<div id="bottomarea"></div> <!--end bottomarea-->

</body>
</html>

Heres the CSS:

css Code:
Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; }

  

 /* CSS Document */


 body {


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     font-family: Tahoma, sans-serif;


     margin: 0;


 }


  


 /* Begin top area */


  


 div#toparea {


     width: 100%;


     height: 128px;


     background-image: url(../images/topareabg.jpg);


     background-position: top;


     background-repeat: repeat-x;


     float: left;


 }


  


 div#header {


     width: 800px;


     height: 100px;


     background-image: url(../images/headerbg.jpg);


     margin-left: auto;


     margin-right: auto;


 }


  


 div#logo {


     float: left;


     margin-top: 25px;


     margin-left: 5px;


 }


  


 div#tagline {


     margin-top: 37px;


     margin-left: 5px;


     float: left;


 }


  


 div#menuarea {


     width: 800px;


     height: 25px;


     margin-left: auto;


     margin-right: auto;


 }


  


 div#menubox {


     float: right;


 }


  


 .buttonbox {


     float: left;


 }


  


 .buttonbox img {


     border: none;


 }


  


 /* Begin middle area */


  


 div#middlearea {


     width: 100%;


     background-image: url(../images/middleareabg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 div#mainwrap {


     width: 800px;  


     margin-left: auto;


     margin-right: auto;


     background-color: #FFFFFF;


 }


  


 div#topwrap {


     width: 800px;


     height: 20px;


     background-image: url(../images/topNavbg.jpg);


     float: left;


 }


  


 div#leftcolumn {


     width: 550px;


     background-color: #FFF;


     float: left;


 }


  


 div#content {


     width: 500px;


     margin-left: 10px;


     margin-top: 10px;


 }


  


 div#content p {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 13px;


     line-height: 20px;


     margin-bottom: 15px;


 }


  


 div#recentwork {


     width: 540px;


     height: 250px;


     background-color: #666666;


     margin-left: 10px;


 }


  


 div#rightcolumn {


     width: 250px;


     background-color: #FFF;


     float: left;


 }


  


 div#bottomwrap {


     width: 800px;


     height: 25px;


     background-image: url(../images/bottombgNav.jpg);


     float: left;


 }


  


 /* Begin bottom area */


  


 div#bottomarea {


     width: 100%;


     height: 200px;


     background-image: url(../images/bottombg.jpg);


     background-repeat: repeat;


     float: left;


 }


  


 /* Text styles */


  


 h1 {


     font: 100 normal 22px/normal Tahoma, Arial, sans-serif;


     text-transform: none;


     color: #999999;


 }


  


 .tagline {


     font-family: Tahoma, Arial, sans-serif;


     font-size: 12px;


     color: #999;


 } 

Thanks for your time!

Can someone look at my site at http://www.personalhurricanecenter.....com/index.php? using Internet Explorer?

The problem is that on the initial load, the background of the main section (white in the middle) is fine, even though I had to drop the padding to 3em. You'll notice if you minimize and then maximize the window, resize it, or click on the "submit" button on the upper-right (which will redirect you back to this page) that the background turns blue. If you scroll down, then the lower portion is white. If you scroll back up, the background miraculously turns white again. But the section that remains visible during scrolling stays blue. Also, you can select the text in the blue and then deselect it and it'll be white! This does not occur in Netscape or Firefox.

Can someone tell me what in the world is the deal? I've spent a week getting this layout set so I can move on and it's holding me up. Thanks.

Tim

P.S. I have my background color set to blue in the body section of my css, and the main background color set to white. Those are the only bg color configurations (except for link options).

I have three "buttons" that are essentially <div> elements on a page made to look like a button. I would like to make the background color change for the button on the "hover" state, but for some reason the only part of the background that changes on the hover state is the area only behind the text.

Here's my code. I'd like the whole background area to change, anyone know what I'm doing wrong?

Code:

.prioritycontainer {
width: auto;
float: left;
display: inline;
margin: 0px 0px;
padding: 10px 0px;
}

.prioritybutton {
float: left;
width: 150px;
height: auto;
display: inline;
margin: 0px 20px 0px 0px;
padding: 3px 3px 3px 3px;
background-color: #978047;
border: solid 1px #CCBC77;
color: #fff;
font-weight: bold;
text-align: center;
vertical-align: middle;
}

.prioritybutton a:link {
color: #fff;
text-decoration: none;
}

.prioritybutton a:visited {
color: #fff;
text-decoration: none;
}

.prioritybutton a:hover {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

.prioritybutton a:active {
color: #fff;
background-color: #A19058;
text-decoration: none;
}

Markup on .html page is as follows:

Code:

<div class="prioritycontainer">
<div class="prioritybutton"><a href="one.htm">One</a></div>
<div class="prioritybutton"><a href="two.htm">Two</a></div>
<div class="prioritybutton"><a href="three.htm">Three</a></div>
</div>

Any help would be very helpful.

Thanks,

Brian

With IE, the background of SELECT elements is not respecting the CSS file setting. But IE does respect the CSS for the INPUT element. Netscape 7.1 and Mozilla Firefox work correctly for SELECT and INPUT.

Here is a snippet from my stylesheet file:

SELECT
{
FONT-WEIGHT: normal;
BACKGROUND: beige;
COLOR: darkgreen
}
INPUT
{
FONT-WEIGHT: normal;
BACKGROUND: beige;
COLOR: darkgreen
}

I have tried #FFFFD8 and #F5F5DC as alternatives to the name "beige" for the SELECT entry. Result is always white. Yet my text boxes show properly as beige so I am confused about why that name is ignored for SELECT elements. Note that I can change the entry to something basic like BACKGROUND: yellow and that displays correctly (but I don't want yellow - I want beige - like the INPUT element).

These SELECT and INPUT elements are always in some table such as:
<td class=genericinputleft>Starting Date<select name=dd1 etc.

Could there be a cascading problem in IE ? Here is the CSS:

.genericinputLeft
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
FONT-FAMILY: Arial;
text-align: left;
vertical-align: top
}

I have tried commenting out the BACKGROUND entry from the class above but that does not seem to help. Thanks.

My problem is that I need to get the Body Background color that is in a css file using php to then introduce this color to an applet.
My CSS file has:

BODY {
FONT-SIZE: 12px;
COLOR: #6699ff;
BACKGROUND-COLOR: #ffffff;
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #CC6699;
SCROLLBAR-SHADOW-COLOR: #CC6699;
SCROLLBAR-3DLIGHT-COLOR: #CC6699;
SCROLLBAR-ARROW-COLOR: #CC6699;
SCROLLBAR-TRACK-COLOR: #FFFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #CC6699;

FONT-FAMILY: "Times", serif;

}

But I use different CSS so very time I change the file I need to know in the php page what BACKGROUND-COLOR it has.