CSS not working in Firefox

Question

Css is not applied when I open my page in Firefox. However it does work in google chrome.Following are the details:

Html:

<!DOCTYPE html>    
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>    
    <link type="text/css" href="Style.css" rel="stylesheet">   

</head>
<body>
<div id="content">
    <p>
        Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere
        voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut
        cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad,
         bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui.

           </p>

</div>

   </body>
</html>

External CSS: Style.css

 #content{
    width:300px;
    height:500px;
    background:#e3e3e3;
    border:1px solid #666;
    margin-top:40px
    }

    #content p{
    padding:20px;
    }

Seems to be running fine in firefox. Here's a pen http://codepen.io/anon/pen/JKvwdb Any particular thing that isn't working? — Isabel Inc, Jul 25 '16 at 18:49
Is it something with the filename? Possibly chrome looks for `style.css` while Firefox is looking for `Style.css`? The CSS is valid so there shouldn't be a problem with that. You'll have to look elsewhere. — Jordan, Jul 25 '16 at 18:49
`` is not valid. You seem to be enclosing CSS elements in `` which is wrong. Internal CSS like this should be wrapped in a `` tag. — Robert, Jul 25 '16 at 18:51
Your HTML is invalid. Invalid html can have random behaviour in different browsers. Fix your link and style tag. You dont need an external link element for internal css. It needs to be enclosed in a style tag. — Isabel Inc, Jul 25 '16 at 18:53
This is a convoluted and confusing question. How about you provide a link to an actual example or add a code snipet. — Isabel Inc, Jul 25 '16 at 18:57
It works like a charm in Firefox: https://jsfiddle.net/cne4c7gk/ Style.css is in the same folder as the html file? — connexo, Jul 25 '16 at 19:01
Have you placed the file in the correct location? Check the console to make sure you're not getting a 404 error for the css file — Isabel Inc, Jul 25 '16 at 19:03
Ohh yeah It was in right location.Restarted my machine and it worked ! — Liliput, Jul 25 '16 at 19:04
You are mixing up doctypes, html5 with xhtml. Remove the xmlns. — actimel, Jul 25 '16 at 19:05
@Liliput How long were you trying to find the problem before writing here? — actimel, Jul 25 '16 at 19:06
I was trying for 1 hour or so since it was working in Chrome , I was not posting here.May be 1 hour 45 minute. — Liliput, Jul 25 '16 at 19:08
This is such a trivial thing that i would have to work in firefox withou restarting your machine. You had to fix some error, probably didn't even notice that. Use some web developer tools to prevent 404 and other errors. Stack Overflow can't help with that. — actimel, Jul 25 '16 at 19:35

score 0 · Answer 1 · answered Jul 25 '16 at 18:51

0

Just add style tags arround your CSS:

<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}

#content p{
padding:20px;
}
</style>

answered Jul 25 '16 at 18:51

Tezekiel

153
1
7

score 0 · Answer 2 · answered Jul 25 '16 at 18:59

The link tag should be used to link the HTML page to a separate CSS stylesheet. You cannot insert CSS into a link tag. To do so, just use the style tag :

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Style.css" type="text/css" />
<style>
#content{
width:300px;
height:500px;
background:#e3e3e3;
border:1px solid #666;
margin-top:40px
}

#content p{
padding:20px;
}
</style>
<style id="web-developer-edit-css-styles-0" class="web-developer-edit-css-styles" xml:base="/C:/Users/user1.Data/Desktop/CssNoobToNinja/CssNoobToNinja/">
</head>
<body>
<div id="content">
<p> Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad, bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui. </p>
</div>
</body>
</html>

Hans Strausl · Answer 3 · 2016-07-25T19:15:55.380

-4

If you're going to just use inline css just use the <style> tag like so:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<style>

#content{
  width:300px;
  height:500px;
  background:#e3e3e3;
  border:1px solid #666;
  margin-top:40px
}

#content p{
  padding:20px;
}
</style>
<style id="web-developer-edit-css-styles-0" class="web-developer-edit-css-styles" xml:base="/C:/Users/user1.Data/Desktop/CssNoobToNinja/CssNoobToNinja/">
</head>
<body>
<div id="content">
<p> Lorem ipsum dolor sit amet, dolorem fierent vim ea. Duo no discere voluptatum. Eum eu adhuc appareat, dolores imperdiet sea ea. Pri ut cetero consectetuer, ad populo sensibus ius. Nominavi persecuti pro ad, bonorum imperdiet moderatius cu cum, tollit tritani numquam ex qui. </p>
</div>
</body>
</html>

EDIT: Huge brain fart, put <script> instead of <style> it is fixed now

edited Jul 25 '16 at 19:15

answered Jul 25 '16 at 18:50

Hans Strausl

605
5
11

1

– Tezekiel Jul 25 '16 at 18:51
2

You don't use a ` – connexo Jul 25 '16 at 18:51
1

Why is it in a script tag? – Isabel Inc Jul 25 '16 at 18:52
Yeah had a massive brain fart and wrote script instead of style, my bad. – Hans Strausl Jul 25 '16 at 19:16

CSS not working in Firefox

3 Answers3