SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS not working at all in IE11!

    Hello,

    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.

    Thanks again,
    Don

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


    CSS
    body {
    font-family:arial,helvetica,sans-serif;
    }

    <header>

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,397
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    Code:
    <!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>
    
    
     CSS
     body {
     font-family:arial,helvetica,sans-serif; 
     }
    
     <header>
    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:
    Code:
    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:
    Code:
    <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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/>

    Thanks for your patience.
    Don

  4. #4
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,397
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    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:
    Code:
     body {
     font-family:arial,helvetica,sans-serif; 
     }
    
    Rest of the css code goes here
    Your html page will start like this:
    HTML Code:
    <!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>
    If you do not have an external style sheet your html page will start like this:
    HTML Code:
    <!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.

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it looks just like it. Here is the code:
    Code:
    <!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>
    and......

    Code:
    body {
      font-family:arial,helvetica,sans-serif;  
    }
    I hope you see something!

    Thank you,
    Don

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    There's nothing obvious in these snippits.

    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Toolman55 View Post
    CSS
    body {
    font-family:arial,helvetica,sans-serif;
    }

    <header>
    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.

    Code:
    header {   }

  10. #10
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,397
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    The original post was a bit mixed up Ralph as the user had not got the hang of posting code on the forum. His actual code is in post #7

    I would download notepad++ and start again with a very simple file; there is then no need to set the encoding etc.

    index.html
    HTML Code:
    <!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>
    <p>Test paragraph</p>
    </body>
    </html>
    styles.css
    Code:
    body {
     font-family:arial,helvetica,sans-serif; 
    color: Red;
     }

  11. #11
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,397
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    I am glad it is getting sorted Dan

    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.

  13. #13
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Don

  14. #14
    SitePoint Member
    Join Date
    May 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Toolman55 View Post
    Hello,

    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.

    Thanks again,
    Don

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


    CSS
    body {
    font-family:arial,helvetica,sans-serif;
    }

    <header>
    Hi Don,
    do not check your html code, it must be ok.

    Please run regedit.exe and navigate to the key HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.css

    Modify: "Content Type" from "text/plain" to "text/css"

    Regards


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •