Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
423 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 400 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 1200 total points
ID: 39777082
Make sure you do an hard refresh if you previously had the page loaded in the browser
0
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 400 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

721 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