CSS - Ie Error, Improper Gap

I'm not sure what settings I changed, but now my page doesn't display properly on IE 5.0 Win. My right column is getting pushed to the bottom and I get that error on page message on IE 5.0. IF anyone has that browser installed, can you take a look and see if you notice any glaring problems?? It looks fine in IE 6, Mozilla, Firefox, and Opera. But, I'd like it to work in IE 5.0 as well, or at least well enough. But, the right column dropping down doesn't look good. Thanks in advance. The site is http://www.marginalspace.com and I am using Wordpress for the index.php page. I don't think it's a php error. At least I don't think so.

Thanks!
Amit

Hi, I dont get this,
I have this code:
Code:

 @media screen and (min-width: 1023px){
#menu {float:left; width:756px; margin:0; padding:0 5px 0 5px;}
#menu ul {list-style:none; margin:0; padding:0; width:150.2px; float:left;}
#menu ul ul .level3{width:355px;}
#menu ul ul .level4{width:200px;}	
#menu ul ul .level5{width:240px;}	
#menu ul ul .level6{width:150px;}				
#menu p {display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
padding:2px 3px; color:#000099; text-align:center;background:url("background5.gif");
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;}
#menu ul ul .level2{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb;
margin:0; color:#000099; background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:200px;}	
#menu a.links{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
color:#000099; background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; 
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF66;}
#menu a.links:hover {color:#000099; background:#FFFF99;}
#menu a.topmenu{text-decoration:none;}
#menu a.topmenu:hover {color:#000099; text-decoration:none;}
#menu li:hover {position:relative; z-index:500;} 
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left: 100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;} }

And w3.org checker gives me this error:
Feature width doesn't exist for media screen
Does not get it, cant I use width inside @ media?
Dont see how I can do it without out.
Thanks Helen

I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with.

In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line

Quote:
property bgcolor doesn't exist : #666666


This is my CSS code:

Code:

td.corner {
	bgcolor: 666666;
	height: 30px;
	width: 15px;
	}

I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated!

Thanks!

I'm new to the forums here and wondering if anyone can help me out with a little problem I'm getting.

http://brandonblume.commerceculture.co.uk/

What I want is for the top banner to be on top of everything and the left navigation menu to be at the left of everything and for the rest of the page to be in whatever's left of the browser space. I want the news text boxes to fit 100% into the extra space. Firefox does this fine but when you view it in Internet Explorer the news boxes take up 100% of the space plus some additional space of the exact same x dimensions as the navigation bar. So you have to scroll right to see the whole page. A workaround is to limit the size of the news boxes but I don't really want to do that. Also, the footer notes on my webpage are centered only according to the browser window, it seems, and not according to the blank space area.

Here's my current sheet. ul.banner is the top banner, ul.navbar is the left menu, and ul.body is the extra space.

Code:

  body {
    margin: 0;
    padding: 0;
    font: 10pt "Helvetica";
    color: #BCCACE;
    background: url(fade-to-black.gif) #161616;
    background-repeat: repeat-x;
    background-position: 0px 74px;
    scrollbar-face-color: #14192A;
    scrollbar-highlight-color: #303F56;
    scrollbar-shadow-color: #303F56;
    scrollbar-3dlight-color: #14192A;
    scrollbar-arrow-color: #9CA9AD;
    scrollbar-track-color:  #161616;
    scrollbar-darkshadow-color: #14192A; }
  a:link {
    text-decoration:none;
    color: #BCCACE }
  a:visited {
    text-decoration:none;
    color: #BCCACE }
  a:hover {
    text-decoration:none;
    color: #eeeeee; }
  body font.highlight {
    font-weight: bold;
    font-style: italic; }
  body font.small {
    font-size: 85% }
  body font.big {
    font-size: 120%;
    font-weight: bold }
  ul.banner {
    padding-left: 0;
    padding-top: 4px;
    margin-top: 0;
    margin-left: 0;
    top: 0;
    left: 0;
    background: url(new_title_bg.gif) black;
    background-repeat: repeat-x;
    width: 100%; }
  ul.navbar {
    position: absolute;
    margin-top: 75px;
    margin-left: 0px;
    padding-left: 0px;
    top: 0;
    left: 0;
    list-style-type: none;
    color: #BCCACE;
    width: 11.5em }
  ul.navbar li.heading {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    height: 16px;
    background: url(new_title_bg2.gif) #17284F;
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0.18em;
    border-top: 1px solid #17284F;
    border-left: 1px solid #17284F;
    border-right: 1px solid #17284F;
    border-bottom: 1px solid #445372; }
  ul.navbar li {
    background: #151D36;
    margin: 0;
    padding: 0.18em;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372 }
  ul.navbar li.sub {
    color: #445372;
    font-size: 80%;
    font-style: italic;
    background: #151D36;
    margin: 0;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372 }
  ul.navbar li.worldworx {
    color: #BCCACE;
    text-align: center;
    font-size: 80%;
    background: #151D36;
    margin: 0;
    border-left: 1px solid #445372;
    border-right: 1px solid #445372;
    border-bottom: 1px solid #445372 }
  ul.navbar li.bottom {
    border-left: 1px solid #445372;
    border-right: 1px solid #445372;
    border-bottom: 1px solid #445372 }
  ul.body {
    float: right;
    position: absolute;
    top: 74px;
    left: 11.5em;
    right: 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    margin: 0; }
  ul.body table.news {
    border: 2px solid #172641;
    width: 100%;
    background: black; }
  ul.body td.head {
    background: url(head_bg.gif) #151D36;
    background-repeat: repeat-x;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0;
    border-top: 1px solid #303F56;
    border-left: 1px solid #303F56;
    border-right: 1px solid #303F56;
    height: 32px;
    margin: 0px;
    top: 0px;
    bottom: 0px;
    font-size: 13pt;
    font-weight: bold; }
  ul.body td.news {
    background: #14192A;
    border: 1px solid #303F56;
    margin: 1em;
    padding: 1em; }
  ul.links {
    position: absolute;
    padding-left: 2em; }
  ul.gamelinks {
    white-space: nowrap;
    padding-left: 30em; }

The site looks okay in ie6, but in ie8 it's off. Could someone take a look?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns=
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Northwest Open Access Network one of the largest in the region with Internet, Ethernet and TDM at service levels more advanced than in some metro areas." />
<meta name="keywords" content="ASP, ISP, ILEC, CLEC, IXC, RSP, DNS, DWDM, Northwest Open Access Network, Noanet" />
<title>Noanet Network Services</title>
<link href="dictionary.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding: 0px; margin: 0px; background-color: #0E0E0C">
<div style="width: 100%; height: 183px; background-color: #0E0E0C">
<div style="background-image: url(images/2-14.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 183px">
<div style="width: 140px; height: 183px;float:left;"></div>
<div style="width: 549px; height: 183px;">
<div style="height:15px;"></div>
<div style="margin-top:7px; margin-bottom:7px;"><a href="index.htm" class="menu">HOMEPAGE</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="overview.htm" class="menu">OVERVIEW</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="tech-support.htm" class="menu">TECH SUPPORT</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Contact%20Options.htm" class="menu">CONTACT OPTIONS</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Network-Services.htm" class="menu">NETWORK SERVICES</a></div>
<div style="margin-top:6px; margin-bottom:7px;"><a href="Infrastructure.htm" class="menu">INFRASTRUCTURE</a></div>
<div style="margin-top:6px; margin-bottom:0px;"><a href="Press-info.htm" class="menu">PRESS INFO</a></div>
</div>
</div>
</div>

<div>
<div style="background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 932px; background-image: url('images/nn_02-2-long.jpg'); background-repeat: no-repeat; background-attachment: scroll;">
<div style="margin-right: 150px; margin-left:290px;margin-top:60px; text-align:justify;">
<h1>Network Services</h1>
NoaNet delivers leading-edge technologies across an extensive
high-speed backbone transport network to wholesale providers
such as ILECs, CLECs, IXCs, RSPs, ISPs, ASPs and cable companies.<br />
&nbsp;<br />
NoaNet service offerings include: <br />
<br />
<span class="style6">IP services</span><br />
NoaNet Internet features path-protected, unaggregated transport
across the NoaNet backbone to the <a href="POP.htm" title="Point Of Presence. The IXC equivalent of a local phone company's central office. The POP is a long distance carrier's office in your local community (defined as your LATA). A POP is the true place your long distance carrier, called an IntereXchange Carrier (IXC), terminates your long distance lines just before those lines are connected to your local phone company's lines or to your own direct hookup. Each IXC can have multiple POP's within one LATA. All long distance phone connections go through the POPs.">PoP</a>
closest to the customer. <br />
<ul>
<li>At least four multi-homed upstream tier-one providers
in Seattle and Portland </li>
<li>Automatic fail-over within 50ms of interruption </li>
<li>IP Addressing, <a href="BGP.htm" title="Border Gateway Protocol is a Gateway Protocol which routers (other non-router devices also maybe involved as intermediaries) employ in order to exchange appropriate levels of routing information.">BGP</a>
routing and <a href="DNS.htm" title="Domain Name Server. Domain Name Servers, also known as resolvers, are a system of computers which convert domain names into IP addresses,which consist of a string of four numbers up to three digits each.">DNS</a>
</li>
<li>IPV6 Support </li>
</ul>
<p /> <span class="style6">TDM transport circuits</span><br />
NoaNet can design and deliver complex multi-point <a href="TDM.htm" title="Time Division Multiplexing. A technique for transmitting a number of separate data, voice and/or video signals simultaneously over one communications medium by interleaving a piece of each signal one after another.">TDM</a>
rings over SONET, as well as two-point circuits.
<ul>
<li>Equivalent to DS-3 (<a href="STS-1.htm" title="Synchronous Transport Signal level 1. An electrical signal that is converted to or from Sonet's optically based signal; equivalent to the OC-1 signal of 51.84 Mbps.">STS-1</a>
or 51.84 Mbps) and <a href="OC-3.htm" title="Optical Carrier Level 3. A SONET channel equal to three DS-3s, which is equal to 155.52 Mbps. ">OC-3</a>
through <a href="OC-192.htm" title="Optical Carrier-level 192. SONET channel of 9.953 thousand million bits per second (Gbps). How you calculate the capacity of an OC-192 is to multiply times 192 by 51.840 million bits per second and thus you get 9.953 thousand million bits per second--gigabits per second.
">OC-192</a> </li>
<li>Protected or Single-Thread configurations </li>
</ul>
<p /> <span class="style6">Ethernet services</span> <br />
NoaNet provides scalability, security and ease of configuration
over a resilient Gigabit Ethernet network.
<ul>
<li>Connect two or more sites that use Internet, data, video
and/or VOIP applications </li>
<li>Billed on an "pay as you grow" basis, with the ability
to <a href="burst.htm" title="A method of transmission that combines a very high data signaling rate with very short transmission times. ">burst</a>.
</li>
<li>Capacity is guaranteed and unaggregated </li>
<li>Ethernet WANs can be designed to handle 10Mb to <a href="10GigE.htm" title="10 Gigabit Ethernet. Positioned as a high-speed technology for MAN (Metropolitan Area Networks) applications, 10GbE is a developing IEEE 802.3ae standard that will enable networks to scale from the traditional 10 Mbps beyond the common 100 Mbps and increasingly common 1 Gbps, up to 10 Gbps.">10GigE</a>.
</li>
</ul>
<p /> For more information about our Network Operations Center,
please refer to the <a href="noc.htm">Technology Center overview</a>. Please review
the NoaNet Terms and Conditions in the <a href="documents/MSA_original_72903.pdf">Master
Services Agreement (MSA)</a> which is the basis for all services.
Contact NoaNet for additional information.
</div>
</div>
</div>

</body>
</html>

Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 ,
Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes.


hello again folks,

Man I am lost on this warning any help? Below is my print.css file

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
width: auto;
background-position: center center;

}
a {
text-decoration : underline;
color : #0000ff;
}



Thanks once again for all your help!

whonoes

I have been designing for a few years now, and never come across this error when I use w3c CSS validation, but when I attempted to validate my CSS for a wordpress theme I've created, I received the following error:
Quote:
Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!"

My CSS is valid, as I keep it really simple, but from a quick Google search, it would seem that w3c CSS validation is attempting to validate my XHTML before my CSS?
Does anyone have any suggestions (aside from pasting the CSS directly into the validation page)?
Here is my CSS:
Code:

body {
background : #003 url(images/bground.png) repeat-x;
color : #fff;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 11px;
margin : 0;
padding : 0;
text-align : center;
}
a {
color : #66f;
text-decoration : none;
}
p {
line-height : 14px;
margin : 0;
padding : 0 0 8px 0;
}
h1 {
background : url(images/h1-logo.png) no-repeat;
color : #300;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 48px;
height : 48px;
margin : 0;
padding : 0 0 0 56px;
}
#index-header {
height : 48px;
margin : 0;
padding : 24px;
text-align : left;
}
#index-header h1 a, #index-header a {
color : #300;
text-decoration : none;
}
.hdr1 {
float : left;
}
.hdr2 {
float : right;
}
.hdr2 ul {
font-size : 12px;
font-weight : bold;
list-style : none;
}
#navigation {
background : url(images/navbar.png) repeat-x;
height : 32px;
}
.nb {
float : left;
}
.nb2 {
float : right;
}
ul#navbar {
height : 16px;
margin : 0 12px;
padding : 0;
}
ul#navbar li {
float : left;
font-size : 13px;
font-weight : bold;
line-height : 16px;
list-style : none;
margin : 0;
padding : 8px;
}
ul#navbar li a {
color : #333;
text-decoration : none;
}
form#searchform {
float : right;
margin : 0;
padding : 6px;
}
form#searchform #s {
background : inherit;
border : 1px solid #333;
}
form#searchform #searchsubmit {
background : inherit;
border : 0;
color : #333;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 13px;
font-weight : bold;
}
#index-wrapper {
border : none;
margin : 0;
padding : 12px;
width : 100%;
vertical-align : top;
}
#slideshow {
background : url(images/Natural-Wonders.gif) no-repeat;
height : 300px;
width : 400px;
}
#recentposts {
padding : 0 0 0 12px;
text-align : justify;
width : auto;
vertical-align : top;
}
.index-post {
background : #306 url(images/post-h2.png) repeat-x;
margin : 0 0 12px 0;
padding : 6px;
}
.index-post h2, .index-post h2 a {
border-bottom : 1px solid #666;
color : #fff;
font-size : 16px;
font-weight : bold;
margin : 0 0 4px 0;
padding : 0;
text-decoration : none;
}
.postmetadata {
border-top : 1px solid #666;
color : #666;
font-size : 10px;
}
.tags {
margin : 0;
padding : 0;
vertical-align : top;
width : 400px;
}
#footer {
border-top : 1px solid #666;
margin : 12px 0;
padding : 12px 0 0 0;
}
#footer a {
color : #999;
text-decoration : none;
}

And just for good measure, here's the portion of the <head> tag that it is referring to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

My pages work fine in most browsers, but the positioning of the menu bar is wrong in IE7 browsers. I only discovered by chance when someone told me.

The menu bar is offset too the right and upwards, part covering the logo.

http://www.firstpokertips.co.uk/

I have looked and looked but cant find why this would be.

In other browsers it is fine. Thanks for any advice.

I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners.

I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great!

Code:

<div id ="filterDIV" style = "background-color: #666666;">
	<div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif);  float:left"></div>
	test
</div>

I'm currently re-developing the page templates for the company I work for and have come across an anomaly in IE (suprise, suprise).

Here be the test page.

Here be the CSS

If you observe the top navigation list - the left margin is bigger in IE than it is in Fx.

Even if I am to apply a pixel margin, it appears larger in IE, could anyone tell me why and if possible, how to get around this?

Cheers!

For those of you using BETA IE7 you will not see this error, which makes me believe that it is just IE6 being retarded.

But because there are very few out there viewing sites with IE7 I have a problem. becuase I cannot post the code, unless you want my entire stylesheet and all my source, because I literally have no idea what is causing this error, but I will post the code relating to it.


http://www.unlimitedgamer.net/area51/
this is a beta page for the layout I am working on, if you scroll down you will see the news becomes gradually more and more distorted, the site is 100% valid, I just ran it through the w3.org validator.

code relating to problem

HTML
Code:

			<div id="wrapper" class="clearfix" > 
				<div id="twocols" class="clearfix"> 
					<div class="maincol" > 
/////////////////////////ONE OF THE NEWS POST//////////
<div class="entry">
<div class="entrydate">
	<div class="entrymonth">February<br /> 2006</div>
	<div class="entrynumber">23</div>
</div>
<div class="entrytitle">
<h1 id="post-215">[<span class="comment_color">2</span>] <a href="http://www.unlimitedgamer.net/23/the-focus-on-black/" rel="bookmark" title="Permanent Link: The Focus on Black">The Focus on Black</a> - <i>Death God</i></h1>
</div>

	<div class="entrybody">
					<p>TEXT TEXT </p>
	
	<div class="news_footer">
		<img src="http://www.unlimitedgamer.net/wp-content/themes/gespaa_v2/images/file.gif" title="file" alt="*" /> 
		 <a href="http://www.unlimitedgamer.net/category/xbox/" title="View all posts in Xbox" rel="category tag">Xbox</a>, <a href="http://www.unlimitedgamer.net/category/playstation-2/" title="View all posts in Playstation 2" rel="category tag">Playstation 2</a>, <a href="http://www.unlimitedgamer.net/category/black/" title="View all posts in BLACK" rel="category tag">BLACK</a>
	</div>
	        
		
			</div>
</div>
/////////////////////////END OF THE NEWS POST//////////
</div> 
				</div> 
				<div id="leftcol" > 
				
<div class="Box">
	<h3>Welcome to Unlimited Gamer</h3> <p> TEXT TEXT</p>
</div>

</div>
</div>

I only posted one of the news post because the code doesn't change depending on the news post... now for the css of all those classes and ids

CSS
Code:

#wrapper
	{
	overflow: hidden; 
	}
#wrapper
	{
	float: middle;
	float/**/: none;
	}
#leftcol{
 width:149px; 
 float:left; 
 position:relative; 
	font-size: 8pt; 
	color: #e16c72 'Lucida Grande',verdana,arial,sans-serif; 
	text-decoration: none;  
  }
 
#twocols{
 width:630px; 
 float:right; 
 position:relative; 
  }
.maincol{
background-color: #FFFFFF;  
 float: left; 
 font-size: 8.5pt;
 position: relative; 
 width:630px; 
 }
#maincol{
background-color: #FFFFFF;  
 float: left; 
 font-size: 9px;
 position: relative; 
 width:630px; 
 }
 
 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

/*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}
/***********************************************************************
* Entry                                                                *
***********************************************************************/
.entrybody p, form p, .commentbody p{
	margin-top:0px;
	margin-left: 0px;
	padding-left:0px;
}
h1{
	font-size: 24px;
	color: #385abe;
}
h2.entrydate {
	font-weight: normal;
	font-size: 16px;
	color: #888;
	margin-bottom:3px;
	padding-top: 3px;
}
entrytitle {
	font-family: "Century Gothic", "Lucida Grande", arial, Tahoma, Verdana,helvetica, sans-serif;
	margin:0px;
	font-weight: normal;
	font-size: 24px;
	padding-top: 5px;
}
.entrybody{
	color: #424d53;
	font-size: 12px;
	padding-bottom: 10px;
	margin-bottom: 25px;
	border-bottom: 1px dotted #6d6d6f;
	padding-left:3px;
	padding-top: 5px;
}

I think thats everything, but you really need to see it for yourself to understand the error, it doesn't occur in firefox though :/

thanks for any help.

Once again, errors arise in the different browsers.

I'm working on a clients website and I have it looking exactly how I want it in Firefox, but of course it fails in IE.

Here is the link to the website:
http://www.amnbooks.com/test1.html

And to the CSS:
http://www.amnbooks.com/css/standard.css

Thanks for taking the time to read my question.

I tried validating my CSS page at http://jigsaw.w3.org/css-validator/

I got the following errors. No idea what they are talking about here.

Quote:
* Line : 2 (Level : 1) You have no color with your background-color : body
* Line : 8 (Level : 1) You have no color with your background-color : #MainBox
* Line : 19 (Level : 1) You have no color with your background-color : #FaderBar
* Line : 74 (Level : 1) You have no background-color with your color : #BioFooter
* Line : 86 (Level : 1) You have no color with your background-color : ul li
* Line : 124 (Level : 1) You have no background-color with your color : ul li a:link
* Line : 129 (Level : 1) You have no background-color with your color : ul li a:visited




Here is line 8:

Code:

background-color: #ffffff;

As far as I can tell #ffffff is white, and that's a color.

Any ideas?

Thanks,

Brad

Hello,

I receive error when validating my css from w3c.

Code:

Line: 89 Context : #header_navigation 
Invalid number : display inline-block is not a display value : inline-block 

Line: 119 Context : #header_left_navs 
Invalid number : border Too many values or values are not recognized : 0 0 2px 0 #ffcc00 solid 

Line: 271 Context : .welcome_title 
Invalid number : font Impact is not a font-size value : Impact,Arial 

Line: 522 Context : .clearfix 
Invalid number : display inline-block is not a display value : inline-block 

but why does it work's well on my page?