CODEWITHSUNDEEP
htmlcssfirefox
perfumo
perfumo

Reputation: 13

CSS doesn't work on Firefox

This is the HTML code, i don't know if i'm making a mistake in those < link/>

<! DOCTYPE html>
<html lang="es">
  <head>
    <title>Appicua</title>
    <link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <div class="test"></div>
    <script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
    <script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html>

And now this is the CSS code:

.test{
  width:50px;
  height:50px;
  background-color:red;
  border-color:black;
  border-width:5px;
  border-style:solid;
  margin:5%;
}

As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen.

Why is that happening?

Upvotes: 1

Views: 3512

Answers (4)

gcampbell
gcampbell

Reputation: 1272

Restructure your files into one directory:

- appicua
    index.html
    - css
        main.css
    - js
        jquery.js
        main.js

Then you can get main.css with href="./css/main.css", and main.js with src="./js/main.js". Relative paths are better here, and will probably work.

You also don't need to specify type="text/css" and type="text/javascript"; they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript.

You can also remove the closing / before the > in the link tag. (Unless you're using XHTML.)

Upvotes: 2

Mike Devenney
Mike Devenney

Reputation: 1845

Your directory structure looks a little wonky. If I'm getting your links correct your working in a directory tree that looks like this:

enter image description here

If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. The relative links would look like this:

<script src="/js/jquery.js" type="text/javascript"></script>

and 

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

The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure.

Upvotes: 2

louisdeb
louisdeb

Reputation: 439

I don't know if this will solve your issue, but you have forgotten a / at the end of your second link tag, and have also forgotten to close your second script tag.

Upvotes: 0

mcky
mcky

Reputation: 843

I'm guessing that firefox doesnt handle client-side files the same way. Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open.

Upvotes: 0

Related Questions