CSS not linking with HTML - html

My styles are not showing up. I linked it like normal, it made sure the name was correct, the are in the same directory, but still nothing. It works on every other web page I make, it just isn't working right now.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="classyclass.css">
<title>Classy Fun</title>
</head>
CSS:
body
{
color: white;
background-color: navy;
font-family: Times;
}
That is just a sample of the code, there is more.
Edit: It works in IE, but not Chrome.
I tried it on a different computer, it still only works in IE.

You may need to clear your browser cache. You can do that by pressing ctrl + alt + delete and select cache. If you are using an older version of Internet Explorer you will need to go to tools->Internet Options.
ctrl + F5 also reloads everything without cache in most browsers.

Related

CSS doesn't apply to class but does to the body element

I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.

CSS formatting showing in IE but not Chrome or Firefox

This one is stumping me, as I've searched and searched through similar issue topic threads on this site but none of them are helping me resolve the issue.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
and the below CSS file code in my main.css file in the same directory as my HTML file (C:\HTML)
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
The text formatting works correctly when I open the code in IE, but not in Chrome or Firefox, what might I be missing about these two browsers that could be causing the issue?
Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)
To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.
To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).
The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.
To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
This also stumped me for a long time - Page looks okay in Edge\IE11 but not Chrome or Firefox. Eventually found there was nothing wrong with the HTML or CSS syntax. The fix was simple. The HTML file was encoded in UTF-16. I overwrote the file saving it as UTF-8. It now works fine in all four browsers.

Google Chrome clears CSS styles for current page when opening link in new tab or opening a new window

This is odd one, I was troubleshooting for 3 days.
Only happening in Chrome Version 53.0.2785.116 m (64-bit) on Windows.
Web server must have header set (meta tag doesn't work in this case):
Apache's .htaccess: Header set Cache-Control "no-cache"
or nginx: add_header Cache-Control no-cache;
You can't recreate it using jsfiddle or built-in code snippet, because css file must be loaded separately using <link href='style.css' rel='stylesheet' type='text/css'>. (but I will include code in snippet anyways).
Steps to recreate:
Visit: http://test.xmpsoft.net/
Click on link 1 (should reload the page);
Click on link 2 (should bring up new tab with the same page);
Switch to the original tab and repeat same steps;
All CSS styles are gone from the original tab.
If not, repeat same steps again.
Please assist to make sure where is nothing wrong with the code before I submit it to Google.
Thanks.
P.S. There is another way or recreating it (that's why I mentioned 'new window' in my Title: Visit same page, reload it, right click -> Inspect (new Development Tools window opens), switch back to the page (repeat if not able to recreate).
.menu div {
display: inline-block;
width: 15em;
height: 15em;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Chrome bug</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='menu'>
<div class='red'>Red</div>
<div class='yellow'>Yellow</div>
<div class='green'>Green</div>
</div>
<a href='/'>1. Reload this page</a><br>
<a href='/' target='_blank'>2. Open same page in new tab</a>
</body>
</html>
This issue was fixed by Google developers and will be merged to the stable channel soon already merged into Version 53.0.2785.143 m (64-bit).
https://bugs.chromium.org/p/chromium/issues/detail?id=648237#c6

External CSS not working in IE11

I have wrote my own embed-server, which can generate response to web browsers.
The generated "main page" is like the following html.
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css"><title>ABC Inc. Web Configurator</title></head><body>
<nav><p>[<b>Home</b>]</p></nav>
<table>
<tr><td><a href=Config>Config</a></td></tr>
<tr><td><a href=Logger>Logger</a></td></tr>
</table>
<footer>Web Configurator © ABC Inc. 2014 - 2015</footer></body></html>
And the generated CSS file is
.even{
background-color: #EFF;
}
.odd{
background-color: #FFE;
}
.title{
background-color: #226;
color: #EEF;
}
a{
color: #36C;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
body{
font-family: Tahoma;
font-size: 100%;
}
footer{
color: #999;
font-size: 0.7rem;
}
nav{
background-color: #DDF;
font-size: 1.1rem;
}
td{
min-width: 60px;
}
When I browse the main page by Chrome 43 or Firefox 39, they're both okay.
However, when I use IE11, the CSS not apply to the html, even though that I can make sure IE11 have access the CSS file from my server. If I press F12 in IE, the DOM manager shows no stylesheet in this page.
BTW, my URL is http://localhost:8888/, and need a basic authentication.
Any idea how can I fix it?
UPDATE
I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.
I've tried Chrome + IE tab2, the CSS works, but not apply to nav and footer tag. I guess IE tab not support HTML5.
UPDATE
I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.
I've try to disable Basic Authentication, still not working.
UPDATE
The CSS also works in Firefox 39.
The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).
Try adding this attribute to the link tag:
type="text/css"
Example:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
After I compare a lot of website, I find out this problem could be solved easily by just remove the html5 declaration <!DOCTYPE html>. However, I don't understand why IE11 act like that, it should have support html5.
PS. I've read this SO article and add type="text/css", but it seems IE11 never care about that.
I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.
IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):
SEC7113: CSS was ignored due to mime type mismatch.
Fix was simply to mark the HTML response mime-type as "text/css" and all was OK.
Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.
Check if HTML1202 issue described here can resolve your problem.
if so, check this: How to avoid ie8 compatibility button?

CSS works with FF and IE, but not Chrome

I know this is probably one simple mistake I'm missing, but a second set of eyes would be great. The following HTML and CSS is connecting on Firefox and IE, but not Chrome. I'm testing it with the font size. It is like Chrome is ignoring the CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Put A Title Here Later</title>
<meta name="description" content="What is this about?">
<meta name="author" content="My Name">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>
CSS:
p {
font-size: 100px;
}
Chrome likes to cache stylesheets. That's the only thing I think would be different here given the code provided. When you have this page loaded in Chrome, try pressing Ctr + Shift + R for a hard reload.
If that doesn't work, press F12 to open the inspector, then go back to your main browser window and click and hold the reload button until a sub menu pops up. From there select "Empty Cache and Hard Reload".
Also, be sure that you have actually typed this CSS and not copy and pasted it. It's rare, but I have seen a copy-and-paste introduce hidden characters that caused strange browser errors.