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
413 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 110

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

752 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