We help IT Professionals succeed at work.

CSS validation parse error

burnedfaceless
burnedfaceless asked
on
I am working on a website for a class assignment. Part of the requirements are for all pages to be validated by W3C's validation service.

I'm in a bit of a catch-22. I have the CSS set to where it renders the page as I want it. When I validate the CSS it returns a Parse Error at line 7 (see attached .jpg).

Here's line 7: .image     {float: left; padding-right: 10px}; I know what it's referring to, the ; after the }. When I remove the semi colon the .css validates but my page is not rendered properly...The text is placed below the image instead of having the columnar effect.

For what it's worth the semicolon makes the page render the way I intended it in multiple browsers. It's not a fluke with one browser.

Does anyone know why the semi colon causes it to render the way I want it to? Is there any way I can get the page to render "correctly" and have the CSS validated? I've attached the files in a .zip.

Thanks for your replies I'm looking forward to learning something.
validation-error.jpg
interests.zip
Comment
Watch Question

Commented:

Try this modified CSS file.

Nrisimha stylesheet.css

Commented:


Im was confused about a code as:

background-color: #ccc  ???

Author

Commented:
Thanks for taking the time to help me.
It's still giving the same validation error at http://jigsaw.w3.org/css-validator/. The issue is the semicolon after the end of the } on line 7. A semicolon isn't supposed to go there. I put it there as a habit because I was doing a lot of JavaScript. Even though it's not supposed to be there it makes the page render like I want it in google chrome, mozilla firefox, and internet explorer.

If you take the semicolon out the css validates on the w3 site but the layout of the site goes to shit.

Author

Commented:
Im was confused about a code as:

background-color: #ccc  ???

Should I use background instead?
Commented:

Everything is OK, because I did web pages with using background-color: #cccccc.

For example:

<body bgcolor="#000000">  -  this is a black background

or

<body bgcolor="#FFFFFF">  - white background


But I have to say that there is a text breaking when I watch your web page with IE:

 IE
Then I replace code in stylesheet.css next.

Instead of

.image {float: left; padding-right: 5px};

I replace 5px and put

.image {float: left; padding-right: 4px};

And I get correct preview:

 IE1

I have attached your interests.html file and CSS that I have corrected:

 interests.html

 stylesheet.css


And don't worry about W3 rules. Bill Gates said a 15 years ago that he has his own rules when his programmers create a Internet Explorer and he never mind about regulations about how to display a web pages under IE !
At 1995 he said that "Internet has no future" so this was a reason why Microsoft "hide a Internet Explorer v2  icon" in Windows 95 !


with my best regards

Nrisimha

Author

Commented:
Thanks man