CSS - Validator Error

Question One

I just wanted to validate my css code and all is good except for some warnings. I am unclear as to what they mean or how to fix them. Does anyone know what these warnings are about?

CSS Validator Warnings
------------------------------------------

Question Two

When viewing my reviews page in IE there is little while lines dividing the table cells. Does anyone know why this is and how to fix it? Problem in is only in IE.

Page showing the white lines


Thanks in advance for feedback and help.

Regards,

CH...

Thought I'd run a page I'm working on through the W3C CSS validator... it doesn't seem to recognise decimals for the opacity property? Is this a bug, I don't think I've written anything incorrectly?

Hello all,

I understand that it is important to have your CSS & XHTML correctly validated. However, recently I have seen a surge of links usually at the footer of some websites which link directly to the W3C Validator website, 'proving' validation of the website.

Is their any particular reason for this?

Here is an example:
armadadesign.ca


I would appreciate any feedback, thanks!

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

I am getting a CSS validation error
It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; }

If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar.

My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out.

I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one!

Thanks for your help.

Hello Fellas:

http://global.espritwebdesign.com/muros.html

This webpage will display correctly on IE, Chrome and Safari
But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues?

hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox..

how can i fix it? Site link is provided below. Thanks

-------- testing ------
http://midnite-pandaz.com/visionmag/

I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area):

http://medieval.shadowedrealm.com/mpi/index.php

If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide.

Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem.

Here's my CSS code for the status bar:
Code:

.statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}

.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}

.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}

.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}

.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}

.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}

.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}

.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}

.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}

.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}

Here's the HTML for the status bar, minus the php code:
Code:

<div class="statusbar">
  <div class="titleback">
    <div class="title">
      MPI Status Bar
    </div>
  </div>
  <div class="text">
    <ul>
    <li>
       <div class="category">
         <a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
         Agriculture</a>
		 <?php
			//PHP code
		 ?>
	   </div>
    </li>

This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense.

Does anyone know how I can correct for this error within my CSS code?

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

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>

I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link.

If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so )

Heres an image.
Code:

http://i4.photobucket.com/albums/y102/Macceth/error.jpg

EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S

and here are the html code and styles.css code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" />
      <title>Want For Destruction | The Official Want For Destruction Site</title>
      <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
      <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    
    <div id="container">
      
      <div id="header">
        <h1>Your Logo</h1>
        
      </div><!--ender header-->
      
     <div id="nav1"class="cms-editable">
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="band.htm">Band</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="music.htm">Music</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
    
      <div id="main">
        <div id="primary">
          <div id="header2" class="cms-editable">
<h2>EVENTS!</h2>
</div>
          
          <div id="content1" class="cms-editable">
<p><strong>Upcoming 2011 events!</strong></p>
<p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p>
</div>
          
        </div><!--end primary-->
      </div><!--end main-->
    </div><!--end container-->
    
  </body>
</html>

Code:

html {
background: #000000 url(images/BG.jpg) no-repeat center top;
}

body {
	text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}

a {
text-decoration: none;
*/ color: white */
}

a:hover {
text-decoration: underline;
}

a.selected {
font-weight: bold;
}

p {
color: #43433f;
line-height: 21px;
}

h2 {
color: #363era;
font-size: 31px;
}

li {
list-style: none;
}

img {
border: 0px;
}

#container {
position: relative;
margin: auto;
width: 971px;
text-align: left;
}

#header {
position: relative;
}

#header h1 {
text-indent: -9999px;
background: url(images/header.png) no-repeat center;
line-height: 251px;
}

#nav {
background: url(images/navBG.png) repeat-x;
overflow: hidden;
height: 40px
margin: 0 0 6px 0;
padding: 0 0 0 31px;
}

#nav li {
float: left;
line-height: 40px
}

#nav li a {
border-right: 1px dotted #959595;
padding: 0 1em;
color: white;
}

#nav li a.first {
padding-left: 0;
}

#main {
position: relative;
background: url(images/mainBG.png) repeat-y;
padding-bottom: 4em;
}

#primary h2 {
padding: 25px 0 15px 0;
margin-left: 38px;
margin-right: 38px;
border-bottom: 2px dotted #aab391;
color: white;
}

#primary p {
padding-left: 38px;
padding-right: 38px;
color: white;
font-size: 75%;
}

#content1 p {
border: 0px;
}

#padfix {
padding-left: 38px;
padding-right: 38px;
padding-top:0px;
padding-bottom:5em;
float:left;
} 

Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated!

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.