CSS - Image Missing After Background-color Is Set

I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox.

css code for the body tag is:

body { background-color: #0d005e;
background-image: url('images/bgmain.jpg');
background-repeat: repeat-x; }

Any thoughts?

http://www.pocketfives.com/badges/triple-crown/

Don't we all just love IE7? The heading 'About the badge', in div about-badge should have some css assigned to it(background on the h2 etc..) but IE7 isn't rendering it. According to Firebug Lite it's assigned correctly. The page renders normal in all other modern browsers.

The area of the page in question passes xhtml validation as well. Ideas?

When I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there.

I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful


Code:

.tuesday { 
background-image: url('images/tu.jpg');
}

Code:

<div class=tuesday> blah blah </div>

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

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

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

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.

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!

OK - I know all about the media="print" attribute. But I don't know how to force a background color (styled in a div tag; ie "background-color: black;") to print when the webpage is printed. I would think this would be a fairly common requirement but have not stumbled upon it.

Also, it probably doesn't matter but I have been using Javascript to add the divs to the page dynamically, so I don't know if that would have any effect. Probably not.

Any help would be appreciated.

What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas?
What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas?

http://buffalonationsmuseum.ca

Right now the property is just "background" but I have tried...

background-color:

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

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 want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color?

(I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point)

Thanks, Beth