|
CSS - Background-color Issues
Howdy,
Okay, this is driving me nuts...i have the background-color set the same for the header and the footer, only the header is displaying darker than the footer. I've been going over it with a fine-toothed comb, but can't find the problem. here's the site and here's the css; Code:
/* Graphix Plus V 4.0 Styles */
h1 {
font-family:arial;
font-size:16px;
font-color:#006696;
font-weight:bold;
}
h2 {
font-family:arial;
font-size:14px;
font-color:#006696;
font-weight:bold;
}
body {
padding:0px;
margin-top:0px;
background-image:url(images/bground-pattern.gif);
background-color:#FFFFFF;
font-family:arial;
font-size:12px;
color:black;
text-decoration:none;
text-align:left;
border: 1px solid #E5E5E5;
}
.contentarea {
background-color:#FFFFFF;
padding:6px;
border: 1px solid #E5E5E5;
}
.flankers {
background-color:#C6C6C6;
padding:4px;
border: 1px solid #E5E5E5;
}
.header {
background-color:#006696;
padding:4px;
background-image:url(images/gp_v4_header.gif);
background-position:top left;
background-repeat:no-repeat;
}
a.mainnav:link {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}
a.mainnav:visited {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}
a.mainnav:hover {
font-family:arial;
font-size:12px;
color:#006696;
text-decoration:underline;
}
/* MAIN MENU LIST STYLE BEGINS - UL class = 'NAV'*/
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
border-bottom: 1px solid #E5E5E5;
background-image: url(http://www.graphixplus.com/images/no-pic.gif);
background-color:#C6C6C6;
}
ul#nav li {
position: relative;
}
li ul {
position: absolute;
left: 99%;
top: 0;
display: none;
background-color: #006696;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:#E5E5E5;
background-color:#006696;
}
ul#nav li a {
display: block;
font-family:arial;
font-size:11px;
text-decoration: none;
color: #006696;
padding: 1px;
border: 1px solid #E5E5E5;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
/*MAIN MENU LIST STYLE ENDS */
/* FOOTER STYLES */
.footer {
padding:10px;
background-color:#006696;
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:none;
border: 1px solid #E5E5E5;
}
a.footnav:link {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}
a.footnav:visited {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}
a.footnav:hover {
font-family:arial;
font-size:10px;
background-color:#E5E5E5;
color:#006696;
text-decoration:underline;
}
/* end of footer */
Any help is greatly appreciated! Similar TutorialsHello, I'm new to this forum, and somewhat new to CSS. I have learned enough about it to find my way around though, and I am still having problems changing one color on a theme. I have a Wordpress blog and am using a free theme I downloaded. It has a right and left sidebar. I would like to change the background color for both sidebars (they are not visually separated except by text). I have tried: .sidebar { line-height: 14px; font-size: 12px; background: #C4C2C2; } ...and that does change the background for them; but it does not extend to the footer. This new color only extends to the bottom of each sidebar content (so that if the blog portion is longer, the old color shows up below the new color). I have checked every single color in the css file, and I cannot find where this color is defined. Help, please!! http://www.turboconceptsllc.com/testmain ok in IE 6 AND 7 this happens. basically the pictures are pngs with background colors the same as the boldy {} color which is 4D4D4D. BUT its showing a contrast. opera and mozilla this of course isnt a problem any ideas how to get around this? transparent PNGs are not an option as IE6 doesnt render them. also gifs are not an option as the quality is horrible 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 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 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, 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 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 I'm using Wordpress 3.0.4 with the WP Remix theme 3.0 for my website. URL: joelwyant.com I want to be able to add a page to the site during the Christmas season. To make it standout more, I'd like that specific page to always have a different background color in the navbar than the other "normal" pages. I have the CSS for the navbar style, but I don't know where to begin to make it specific to just that one page. In other words, how do I create CSS that overides the normal navbar background color for just that one specific page? Any thoughts, suggestions, or guidance is much appreciated! Joel 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 i have a problem dynamically setting the html background color when i initially set it with css. if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks for some reason my background color won't show in firefox.. http://losemybreath.org/ take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas? this is the css Code: body {
margin: 0;
padding: 0;
background: #ECF0CD;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #666; }
#header {
margin-left: 25px;
width: 800px;
height: 524px;
background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
}
#center {
margin: auto;
width: 800px; }
#content {
width: 495px;
margin: auto;
text-align: left;
background: #BCD4B2; }
#blog {
float: left;
margin-left: 10px;
width: 290px;
text-align: justify;
display: inline;
background: #BCD4B2; }
#sidebar {
float: right;
margin-right: 10px;
width: 165px;
text-align: justify;
display: inline;
background: #BCD4B2;}
p {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin-top: 0;
text-align: justify; }
h1 {
text-align: center;
background-color: #ECF0CD;
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
letter-spacing: 3px;
font-weight: bold;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #77936C; }
ul,li {
list-style-type: none;
margin: 0;
padding: 0; }
a:link, a:visited {
color: #669257;
text-decoration: none; }
a:hover,a:active {
color: #666666;
background: #ECF0CD;
text-decoration: underline; }
hr {
width: 100%;
color: #ECF0CD; }
.right {
float: right; }
textarea, select, input {
color: #666666;
background: #ECF0CD;
border: 0px none;
margin: 0px;
padding: 2px;
font: 10px Arial, Helvetica, sans-serif; }
#question {
border: 1px solid #ECF0CD;
padding: 2px; }
I have this transparent png image and it looks great on a web page when you put a background color on it. the only transparent part is the border, the rest is white, so the bg color is really for border. When you go to print it, however, printers dont normally show bg colors Is there some way how I can force printing the the bg color when the user prints the page? (I know some times u can configure that on their printer but I don't want them to have to do anything. ) 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. I haven't succeed in getting the Javascript's DOM to tell me what the body's background color is... Here's the code I got Code:
mybody = document.getElementsByTagName("body");
alert(mybody.getAttribute("background-color"));
//alert(mybody.style.backgroundColor);
Nice references I looked up from are http://www.mozilla.org/docs/dom/technote/tn-dom-table/ http://www.sitepoint.com/print/rough-guide-dom http://www.mozilla.org/docs/dom/domref/dom_style_ref.html http://developer.apple.com/internet/webcontent/dom2ii.html I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out. The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after. http://sonicparke.com Has anybody done this or know how it should be done? I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong? CSS code: Code:
#content {
margin-left: 25px;
background: #fff;
width: 990px;
padding: 15px 20px 20px 20px;
}
#blog {
padding: 0;
margin-right: 40px;
background: #fff;
width: 660px;
color: #545454;
float: left;
padding-top: 5px !important;
}
#sidebar {
width: 250px;
padding: 8px;
background: #ccc;
}
XHTML/HTML code: Code:
<div id="content">
<div id="blog">
blah blah blah
</div>
<div id="sidebar">
<h2>blah</h2>
blah blah blah
</div>
</div>
I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out. Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar. 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! I have a horizontal ul: Code: <ul> <li>blah</li> <li>loooooooooooooooooooooong blah blah blah</li> </ul> If I set the background color: Code:
li { background-color: yellow; }
It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height. Is that possible? I don't want to have a fixed value for the height |
|||||||