My first post. Please let me know if I am not following proper procedure.
I am VERY new to HTML and CSS. I’m following a tutorial I found online and everything was working fine until I introduced CSS. The tutorial had me set up an HTML5 webpage. Then we were being introduced to CSS. I followed everything exactly but the CSS file simply won’t work in IE11. I downloaded Google Chrome and it works like a champ. I’ve run both the HTML5 and CSS through validators and everything comes up shiny! Could someone look at my code and make a suggestion? Thank you. My OS in Win 7 - all updates installed.
The HTML & CSS were written in Notepad.
This is calling an extermal stylesheet - <link rel=“stylesheet” type=“text/css” href=“styles.css” media=“screen”> are you using an external style sheet?
If so you do not need this:
CSS
body {
font-family:arial,helvetica,sans-serif;
}
The above is incorrect anyway as it does not need the CSS and if you are not using an external style sheet ( or it is special to this page ) should be in the header like this:
<style>
body {
font-family:arial,helvetica,sans-serif;
}
</style>
I presume you are confusing the browsers and they are all interoperating your code in different ways.
Rubble,
Thank you so much for your quick reply. The “CSS” you see was my way of indicating that this was the CSS code. It is NOT in my Notepad file. I will not do that again. Sorry.
All objects (HTML, css, images, etc,) are all in one folder in my documents.
Are you saying that my CSS code should be between the <style><style/> tags? If so, does all the CSS go in here (there is considerably more to add)? Or do I have to do this to each element (if I’m using the right term)? IE: <style>body<style/>, and <style>p<style/>
That’s OK Don everyone has to learn sometime and you will soon get the hang of it.
If you have an external style sheet called styles.css in the same folder as your html page and it contains something like this:
body {
font-family:arial,helvetica,sans-serif;
}
Rest of the css code goes here
If you do not have an external style sheet your html page will start like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 and CSS3 Fundamentals</title>
<style>
body {
font-family:arial,helvetica,sans-serif;
}
Rest of the css code goes here
</style>
</head>
<body>
<header>
The problem with the second method is that the style will only be for that page aand you would need to add the style code to every page.
The best method is to use an external style sheet.
Rubble,
I do have an external style sheet, if I’m understanding things properly. I have a folder named HTMLLessons. Inside it is Lesson1.html, styles.css, picture1.gif and picture2.gif. So the code I have should(??) work! But IE simply won’t recognise the css. BTW, I typed my code in Notepad, then did File > Save As > Set the name to styles.css > set file type to All Files > then set Encoding to UTF-8 and hit save. Any other ideas?
Don
Does your link to the external style sheet look exactly like Rubble’s? No leading slash? No extra spaces? No capitalized lettes, etc?
It should work. If it doesn’t, please copy and paste the head of your page into a post.
Click the hash icon at the right end of the message pane menu bar and paste your code between the code tags.
You can follow the link at the bottom of my post for more detailed instructions about posting code examples.
Is there any stray HTML code at the top of (or anywhere within) the CSS file? If not, and assuming that you are working entirely on your PC and not a server, then post the entire contents of both the HTML and CSS files between “code” tags in your next message.
Just checking here, but if you have “<header>” in your style sheet, it will fall apart, because you are placing HTML inside a stylesheet, which isn’t allowed. If you are trying to style a <header> element in your stylesheet, make sure to write it without the < > tags. E.g.
Rubble;
I did what you suggested—I created a Test folder. Inside it, using Notepad++, I created my Test.html file with the very basic code you suggested. I also created my styles.css file. SUCCESS! Everything works great in IE. I changed the font color, from arial to times new roman to others, and the background color.
A question or 2:
Notepad++ doesn’t seem to have the option to specifically set the Encoding to UTF-8. Is this not necessary? see edit below
Also, as a method to find the problem with my original work, is it trial and error? Do I take chunks of code from my original and re-do things to see what section might be causing the problem?
Lastly, thanks very much for your help and the others who responded. I really appreciate it. I was getting very frustrated!!
Don
EDIT–I answered my first question. I see that by default Notepad++ is set to UTF-8 without BOM. Since Notepad doesn’t have this distinction, could the Byte Order Mark be the problem? I’m just wondering why Notepad++ worked but Notepad didn’t.
I’m just wondering why Notepad++ worked but Notepad didn’t.
I have no idea but notepad++ is designed for this sort of thing; I have used it for years. People used to use notepad without a problem as well so I am not sure why it didn’t work.
Do I take chunks of code from my original and re-do things to see what section might be causing the problem?
I would first try coping the pages you have into notepad++ and resaving it and see if that works. After that if it does not work I would start with the page that works and copy chunks into it and see if it breaks at a certain point.
Rubble,
I did a copy/paste of my original work from Notepad into Notepad++ . Worked perfectly!! What was the problem?? Probably something I did! At least that is what my wife always says!! But in any event I seem to be back on track. Notepad++ is my preferred tool from now on.
Thanks again for your help, and especially your patience.