Help - Search - Members - Calendar
Full Version: Style Error
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Zouheir
Hi there,

Oki, basically I am beginner trying to learn html css online. and I would really appreciate pros/expert to help me solve the below issue.

Error: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
From line 1, column 1; to line 1, column 6
body {↩ fon

and this is how it is. saved as utf-8

I am totally lost I am just getting to understand the codes and how does it work. if you also give explaining for the resolve would be so thankful.

body {
font-family:Arial,helvettica,sans-serif;
background-color:#333333;
}
Frederiek
Are you aware of the structure of an HTML page?
See http://htmlhelp.com/reference/html40/structure.html and read http://diveinto.html5doctor.com .

The snippet you posted is CSS, that can be linked or embedded in several ways. See http://htmlhelp.com/reference/css/style-html.html .

Since you are a beginner, you might not understand what's written in the links I posted. If that's the case, just ask. And show us the entire page you are creating, so we might help you from there.
pandy
There are different validators for HMTL and CSS. If you are trying to validate a style sheet, i.e. a CSS file, here's the one you should use.

https://jigsaw.w3.org/css-validator/
Zouheir
QUOTE(Frederiek @ Apr 22 2016, 04:43 AM) *

Are you aware of the structure of an HTML page?
See http://htmlhelp.com/reference/html40/structure.html and read http://diveinto.html5doctor.com .

The snippet you posted is CSS, that can be linked or embedded in several ways. See http://htmlhelp.com/reference/css/style-html.html .

Since you are a beginner, you might not understand what's written in the links I posted. If that's the case, just ask. And show us the entire page you are creating, so we might help you from there.




thanks for your reply appreciate your time and effort.

I am totally beginner I know nothing about how to write codes and stuff. just started yesterday learning online. so for me to understand the link you sent me probably could happy but resolving issue way hard for a starter.

now on the video he opened a new notepad for linking a stylesheet. I did the same no damn mistake.

I am pretty sure the codes is totally right and nothing wrong about it now still doesnt show any background color.

the style.css file below

body {
font-family:Arial,helvettica,sans-serif;
background-color:#333333;
}

header {
width:80%;
background-color:black;
color:white;
margin-right:auto;
margin-left:auto;
}

section {

}

footer {

}

the html file below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 and CSS3 Fundamentals</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>

<header>

<hgroup>
<h1>Channel9</h1>
<h2>HTML5 and CSS3 Fundamentals</h2>
</hgroup>

<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>

</header>

<section>

now both been validated as confirmed with no errors.
Zouheir
QUOTE(pandy @ Apr 22 2016, 05:10 AM) *

There are different validators for HMTL and CSS. If you are trying to validate a style sheet, i.e. a CSS file, here's the one you should use.

https://jigsaw.w3.org/css-validator/



thanks pandy for your help appreciate it.

based on the link you gave me for validation. it shows no errors. but still doesnt do any background color which means its not being linked to the html file!!!!!!!!!!!!!!! drives me crazy.
pandy
Could you link to the page? If it isn't online, please attach both the HTML and CSS to your post or paste it all in if it's short. But if you can, please link.
Frederiek
Well, I think that's all the OP has for the moment; nothing online. Apart from the missing closing tags to end the file, everything is there.

So I closed the necessary tags, pasted in the CSS and tested. I get a dark grey page with a black header, as intended so far I suppose.

Validating the HTML returned an error on the obsolete HGROUP element (just delete it) and one on the missing heading in the SECTION element. But since the rest of the page has not been written yet, that heading will come later upon continuing.

The CSS so far validates.

Since you use HTML5, it's a good idea to bookmark http://html5doctor.com as a reference to understand the elements of HTML5.

And reading the articles by Mark Pelgrim at http://diveinto.html5doctor.com will help you to learn too.

So, all in all, you're doing fine so far.
pandy
Sorry, missed the post with the markup and CSS. blush.gif
Zouheir
Hey Freddie, Thanks for your help. Again, Would you tell me how you closed tags in the CSS file?

as for the html I deleted the hgroup. still it didnt work for me. its driving me crazy!

bear with me as I stated previously I just started so my first couple of help could look dumb just untill I discover how things goes!!!
Zouheir
Oki Oki, I got it fixed,

so bassically the problem wasnt from the code at all and the problem was it didnt work on web explorer 9.0 but it worked now finally on google chrome.

appreciate it if you could explain to me why ?
pandy
I think Frederiek meant the closing tags for SECTION, BODY and HTML in your markup. You probably have them and just left them out when you pasted it here.

Does it still not work in IE9? I don't see why it wouldn't, but I don't have that version of IE so I can't try.
Frederiek
Indeed, that's what I meant.
I don't have IE either, as that is no longer available on Mac.

Wow, you just started out and already stumbled upon browser inconsistencies.

It doesn't work in IE9 as it doesn't seem to support all HTML5 tags. See http://caniuse.com/#feat=html5semantic .

That probably means that unknown elements (or tags) need to be set to display: block;.
I suggest you use Eric Meyer's reset css for this. You can get that here: http://meyerweb.com/eric/tools/css/reset/ .

It will reset several browser default stylings, e.g. getting rid of margin/padding. You can then set these settings back in elements where you need them.
Zouheir
thanks guys for your help.
Frederiek
[Actually, only women have replied to you here.]

You're welcome.
Zouheir
thanks ladies for your help.

hehehe sorry about that I didnt know both were women. now I know why it was a smooth sweety help.
Frederiek
That's ok. You couldn't guess by a name that looked so male. I'm used to that [unfortunately] happy.gif
pandy
And a woman can be a guy too. tongue.gif
Frederiek
These days, true laugh.gif
Christian J
On the web all women are men, and all men are 14 year old boys. unsure.gif
pandy
So now we know what kind of chat rooms you frequent. rolleyes.gif laugh.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.