CSS not loading

HTML & CSS
1

This is strange because for some reason, my style sheet is not loading. Also, sometimes, it does appear not to be loading the style sheet and if I wait for a while, it tends to work… This is the html page that I am working on…

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tutorial</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class ="wrapper" >
		

	
   <nav>
      <ul>
      	<li><a href="wrapper.html">Home</a>
      	<li><a href="portfoliio.html">Portfolio</a>
  		<li><a href="about.html">About me</a>
		<li><a href="contact.html">Contact</a>
      	</li>
	   </ul>
     </nav>
     <h1>Home</h1>
     </div>
</body>
</html>

Here is my CSS code:

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #eee;
}

.wrapper {
	margin: 0 auto;
	width: 1000px;
}

nav {
	width:100%;
	height: 100%;
	background-color: #fff;
}


ul {
   margin-left: 0px;

}

ul li {
  list-style: none;	
  text-decoration: none;
  display:inline-block;
  float:left;

}

ul li a{
	 text-decoration: none;
	 font-size: 14px;
	 font-family: arial;
     color: #1e1e1e;
	 padding: 0 25px;
}

But at the moment, my page is looking liked this…

2

With the code you posted, that’s how I would expect the page to look. Unless I missed something this early in the morning. Is there some CSS you haven’t posted?

3

I have been following this tutorial by mmtuts…

4

Your styles are all in a stylesheet called style.css, which is located in the same folder as your HTML page, correct?

If the path to the stylesheet is correct, then the usual reason styles are not applied as expected is because there’s an error - often a simple typo - in the stylesheet. Without seeing the contents of style.css, I can’t comment further.

5

!DOCTYPE html> should be <!DOCTYPE html>

Please look carefully when you copy/paste that you copy the entire thing.

2 Likes
6

Try the free W3.org html and CSS validation scripts which no doubt has been mentioned previously.

3 Likes
7

They have:

2 Likes
8

Thanks… I will try out the validator

9

Free Advice that won’t show up in the validator:

NEVER use

* {
	padding: 0;
	margin: 0;
}

Assign or negate padding and margins where needed. NOT GLOBALLY.

10

I got no errors in my css validator and my html validator just mentioned about using lang… but I will try to remove the * {}… It still doesn’t work…

11

Try closing every <li> tag instead having them nested.

12

This is very weird! I can get it to work with IE but not on on chrome…

13

RE: CSS not loading or slow to load. How modern in your PC? How much space to you have on your hard drive.

Show us a screen shot from IE of what it is supposed to look like.

14

Are you sure it isn’t just a caching problem? Have you tried refreshing the page in Chrome?

15

Floats aren’t cleared.

First try NOT floating the list items.

If they must be floated, then add {overflow:hidden} (or another clearing mechanism) to the ul

16

I have refreshed the page in Chrome but will send a pic of the ie later when i am free… I tend to notice that as well. I usually have to wait for a while before i can get the chrome to work…

17

My PC turns into a morass frequently. It’s an old bugger with too little RAM and a hard drive that is nearly maxed out. Very little usable swap space. I restart it frequently.

Using this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tutorial</title>
    <style>
body {
    background-color: #eee;
}
.wrapper {
    width:1000px;
    margin:0 auto;
    outline:2px dashed blue;  /* TEST Outline. TO BE DELETED. */
}
nav {
    background-color: #fff;
    outline:2px solid magenta;  /* TEST Outline. TO BE DELETED. */
}
ul {
    overflow:hidden;  /* use this to clear the li floats */
    padding-left:0;
}
ul li {
    list-style:none;	
    display:inline-block;  /* inline-block should work fine by itself */
    float:left;
}
ul li a {
    text-decoration:none;
    font-size:14px;
    font-family:arial;
    color:#1e1e1e;
    padding:0 25px;  /* this padding left and right is centering the text within the list items */
}
    </style>
</head>
<body>

<div class="wrapper">
    <nav>
        <ul>
      	    <li><a href="wrapper.html">Home</a></li>
      	    <li><a href="portfoliio.html">Portfolio</a></li>
            <li><a href="about.html">About me</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
    <h1>Home</h1>
</div>

</body>
</html>

This is what I see in Firefox and Chrome.

1123×220 20.6 KB

EDIT: I replaced the screen shot from FF with the latest one from Chrome.

@piano0011, notice how the use of outlines can help one visualize how the page is arranged… how the code is working.

1 Like
18

Mmm… I don’t know why it didn’t work before in chrome but i will try it again tomorrow and post back on how it looks like on both chrome and ie. As previously mentioned, sometimes i have to wait for a while for chrome to load the css…

19

It sounds to me like you are loading other HTML and CSS instead of just copying the above “working page” to a new file with an HTML suffix and double-clicking the new file to open it in your browser.

For your first test run on the code that I posted, copy and paste the “working page” to a new file on your computer. Give that file a .htm or .html suffix and double-click it to open it in your browser. It should open instantly. Make a screen shot if it does not resemble my screen shot.

Please notice that each opening list item tag has a close tag. HTML5 may not require the close tags, but using them is good practice. Never assuming that browsers can determine where missing close tags of any element belong is the best.

Lists, ul and ol, have default padding-left, not margin-left; therefore, your ul {margin-left:0} has been replaced with ul {padding-left:0;} to negate the default indentation padding. Lists do have default margin-top and margin-bottom vaues, so ul {margin:0;} could be added to negate those top and bottom default margins, if desired.

When you list font-families, it is wise to include a fall-back at the end. You have specified Arial, so it would be good to add sans-serif as a generic fallback for everyone who does not have Arial on the computer.

When you list font sizes, using em or rem or even percent is recommended rather than px.

The page has a fixed width of 1000px. As such, it is not responsive - viewable on small devices. Instead of {width:1000px;}, consider using {max-width:1000px;} which will allow the page to become narrower when viewed in a window that is less than 1000px wide. Go ahead, try it. Drag the edge of your browser window narrower to test.

Spelling, case and punctuation matter. One of the “portfolios” is misspelled.

<li><a href="portfoliio.html">Portfolio</a></li>

To troubleshoot the slow loading CSS, you may need to tell us about your development environment: your computer, operating system, browser, and whatever coding aids you use. Is the slow loading CSS the result of a delay reaching the server after being modified? Or what? We need more info, otherwise we’re guessing blindly.

Feedback is helpful so please respond to our questions and “guessess”. Let us know what you find. :slight_smile:

3 Likes
20

Thanks for the detailed explanation and I will try that when I have time later. I was trying to follow mmtuts tutorial and he used margin left for UL but I understand that you guys are trying to help me out here. So is the tutorial incorrect by using margin left for ul?