CSS for HTML only appearing in Chrome not MS edge or IE

Question

I was wondering if someone had an answer as to why the CSS for my HTML file only appears to be formatted in Google Chrome, but appears not formatted in Microsoft Edge, or Internet Explorer. First time post over here, so feedback would be much appreciated.

Here's my CSS and then my HTML:

html {
 margin: 0;
 padding: 0;
 background-color: #777;
}
body {
 width: 70%;
 margin: 0 auto;
 font: 100% Arial, Helvetica, sans-serif;
 padding: 1em 50px;
 background: white;
 border-bottom: 10px solid gold;
}
h1 {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 2em;
 font-weight: normal;
 font-style: italic;
 margin: 0 0 .4em;
 color: #ddd;
 background-color: rgb(44, 45, 140);
 padding: 5px 10px;
}
p {
 line-height: 1.6;
 text-align: justify;
 width: 60%;
 margin: 0;
 margin-bottom: 1em;
}
a {
 text-decoration: none;
 color: red;
}
a:hover {
 color: black;
}

//And here's my HTMl

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML and CSS</h1>
<p><a href="page2.htm" title="page two">Page 2</a></p>
<p>One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don&rsquo;t really know how the building is going to look. Once the frame is complete, the &ldquo;skin&rdquo; of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.</p>
<p>HTML and CSS work much the same way. HTML gives us the structure, or &ldquo;frame&rdquo;, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What&rsquo;s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page&rsquo;s CSS.</p>
<p>This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.</p>
</body>
</html>

There is nothing wrong with either your CSS or HTML. Caching maybe? — Turnip, Jun 12 '17 at 11:44
What does your console say? Does it load styles.css file? When you select element does it not have any styles? — Volvox, Jun 12 '17 at 11:44
Console says: SCRIPT7002: XMLHttpRequest: Network Error 0x5, Access is denied. 9 — Shad Khan, Jun 12 '17 at 11:55
As in, your browser may have cached an old version of styles.css so your changes are not loaded. - http://www.refreshyourcache.com/en/home/ — Turnip, Jun 12 '17 at 11:57
[Use a web server](https://stackoverflow.com/questions/30896958/xmlhttprequest-network-error-0x80070005-access-is-denied-on-microsoft-edge-bu). — André Dion, Jun 12 '17 at 11:58

score 0 · Answer 1 · edited Jun 12 '17 at 11:54

0

if your structure project

root
- index.html
- style.css

If you include style.css,

<link href="style.css"/>

But if your structure project

root
- index.html
- assets
  - style.css

You can include location style.css

<link href="assets/style.css"/>

edited Jun 12 '17 at 11:54

Turnip

35,836
15
89
111

answered Jun 12 '17 at 11:53

Apolbox

11
2

If the path was incorrect, the CSS wouldn't work in _any_ browser. Q: _"CSS for HTML only appearing in Chrome not MS edge or IE"_ – Turnip Jun 12 '17 at 11:55
There should be no problem if the css location is correct. Try to clear the browser cache. – Apolbox Jun 12 '17 at 12:00

CSS for HTML only appearing in Chrome not MS edge or IE

1 Answers1