Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Compile 'em all

macrumors 601
Original poster
Apr 6, 2005
4,131
359
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory.Any idea what might be the problem?

index.html
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Home Page</title>
      
     <link rel="stylesheet" href="style.css" media="screen" />
     		<meta name="viewport" content="width=1100">    
    </head>
    <body>
        <div id="main">
            Hello
        </div>
    </body>
</html>

and style.css which is in the same directory

Code:
body{
    background-color: #F9F9F9;
	background-image: url(images/bg3.png);
	background-position: center top;
	background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
	font-family: "Georgia", "Times", serif;
	-webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

however, this works

Code:
 <!DOCTYPE html>
<html>
    <head>
        <title>Homepage</title>
      

  
  
  <style type="text/css" media="screen">
  
  
  body{
    background-color: #F9F9F9;
	background-image: url(images/bg3.png);
	background-position: center top;
	background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
	font-family: "Georgia", "Times", serif;
	-webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

</style>
     		<meta name="viewport" content="width=1100">    
    </head>
    <body>
        <div id="main">
       Hello
        </div>
    </body>
</html>
 
Nope. style.css. I even changed the name just to to make sure, and nothing. Same problem.
 
My external stylesheet declarations have one more attribute than yours:

<link rel="stylesheet" href="style.css" media="screen" type="text/css" />

I'm not sure that will make a difference, it was just a thought.
 
My first step in figuring out why HTML/CSS code is not working as I expected, is to run the code through a validator. The validator I use the most is the W3C Markup Validation Service.

http://validator.w3.org/

There is a link on the above page to also validate CSS stylesheets.
 
Have you tried running your CSS through a validator? Perhaps you left a bracket or semicolon off somewhere...

What about shift-refreshing the page or clearing the cache?
 
I'm going with MasConejos idea – permissions.

Open the page in Safari, open the webkit inspector, go to the network tab and then see what it says for "style.css".

If it's a 404 and it is in the same directory, then it will more than likely be permissions.

How you are accessing index.html:
[1] file://
[2] localhost?
[3] remote server?

Hope that make sense? I was being brief because I am lazy, but I am happy to provide a more in depth explanation of the above if required.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.