CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerfirefox
user3669644
user3669644

Reputation: 3

CSS not working at all in all browsers

I'm building a simple website, and discovered that the while the CSS works fine in Chrome (which I usually work with), it doesn't at all in Firefox or IE. As in it's a blank white page with pictures and text, like I hadn't written any CSS. The HTML loads fine, but it's obvious that the CSS isn't being used at all.

Here's all of my HTML:

<!DOCTYPE HTML>

<html>

<head>
<title>Apple Tree House</title>
<link rel="stylesheet" type="css" href="stylesheet.css" />
<link rel="shortcut icon" href="root/icon.ico" type="image/ico" />

</head>
<body>

<div id="container">

<header>
<img src="root/logo.png" id="logo" width="300px" height="300px">
<h2>New Bed and Breakfast</h2>
<h1>Opening January 2015</h1>
<h4>Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire</h4>
</header>

<div id="textcontainer">
---Basic text info here---
</div>

<footer>
<img src="root/footer.png" id="footbanner">
</footer>
</div>

</body>

</html>

And my CSS:

html, body{
margin: 0; 
padding: 0;

}

body {
background-color:#85A366;
font-family:Arial, Helvetica, Sans-serif;
font-size:12pt;
margin:0 auto;
padding-left:10px;
padding-right:10px;

}


#container{
width:80%;
height:100%;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
padding-top:0px;
text-align:center;
color:black;
background:#FFFFEE;
margin:0 auto;
font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
font-weight:600;
font-style:italic;
font-size:13pt; 
color:#7D5833;

}

h1, h2, h3, h4, h5, h6 {
color:#472400;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h4 { font-size: 24px; }

#textcontainer{

width:45%;
text-align:center;
margin:0 auto;
top:auto;
}

footer{ 
text-align:center;
height:100px;
 }
#footbanner { 
max-width:100%;
max-height:100%; 
}

@media screen and (max-width:420px) {
table{
 font-size:8pt;
 }
 #container {
    width:100%;
    }
 }

Anything you can see in there that's making it work in Chrome but not at all in other browsers?

Upvotes: 0

Views: 2665

Answers (2)

Phani
Phani

Reputation: 861

<link/> type should be text/css not just css as shown below:

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

Upvotes: 3

sommmen
sommmen

Reputation: 7660

i'm no expert here, but it caught my eye that you used 'css' instead of 'text/css'. perhaps that will fix the issue?

although strangely enough this does work for me: http://prntscr.com/58m1fi

Upvotes: 0

Related Questions