Solved

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

Posted on 2014-01-13
3
407 Views
Last Modified: 2014-01-14
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

0
Comment
Question by:LB1234
3 Comments
 
LVL 9

Assisted Solution

by:WebDevEM
WebDevEM earned 100 total points
ID: 39776864
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
 
LVL 58

Accepted Solution

by:
Gary earned 300 total points
ID: 39777082
Make sure you do an hard refresh if you previously had the page loaded in the browser
0
 
LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 100 total points
ID: 39777245
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

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question