[Webinar] Streamline your web hosting managementRegister Today

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
?
436 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 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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

591 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