Very simple CSS for very simple HTML not showing up in Chrome, but is showing up IE and FireFox.

Here's the simple HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<link href="default.css" rel="stylesheet" type="text/css">
</head>

<body>



<div id="header">Longbow Database Proof of Concept</div>

<div id="nav">
    <ul>
        <li>Reports</li>
        <li>User Management</li>
        <li>Credit Card Management</li>
    </ul>
</div>

<div id="menu">
    <ul>
        <li>Outstanding Reports</li>
        <li>Open Report</li>
    </ul>
</div>

<div id="content">Content for  id "content" Goes Here</div>





</body>
</html>

Open in new window


and the CSS:

@charset "utf-8";
/* CSS Document */

#header {
	background-color: red;
}

Open in new window

LVL 1
LB1234Asked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Make sure you do an hard refresh if you previously had the page loaded in the browser
0
 
WebDevEMConnect With a Mentor Commented:
Hi -

I tested it on my machine with Chrome Version 31.0.1650.63 and it worked as I expected it to... red background in the whole #header DIV.  Is there any other CSS in the real page that could be interfering?  I would also have asked if the CSS was in the same folder so that it was being loaded, but if you say it works in IE and FireFox it sounds like it must be.

Can you put those files on a server and provide a link, so we can test it live?

Thanks,

WebDevEM
0
 
Ray PaseurConnect With a Mentor Commented:
If you put your CSS inline, at least during the development cycle, you will always get the latest CSS whenever you load the document.  Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<!-- INLINE STYLE SHEET USED DURING DEVELOPMENT -->
<style type="text/css">
@charset "utf-8";
/* CSS Document */

#header {
	background-color: red;
}
</style>

</head>

<body>



<div id="header">Longbow Database Proof of Concept</div>

<div id="nav">
    <ul>
        <li>Reports</li>
        <li>User Management</li>
        <li>Credit Card Management</li>
    </ul>
</div>

<div id="menu">
    <ul>
        <li>Outstanding Reports</li>
        <li>Open Report</li>
    </ul>
</div>

<div id="content">Content for  id "content" Goes Here</div>





</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.