My CSS is not loading in Internet Explorer 11 and Firefox! Only works with Chrome

html css internet-explorer google-chrome firefox

35,478

Solution 1

Solved by using type="text/css" instead of type="css/stylesheet" when importing the stylesheet.

Solution 2

I tested your code and found that if you remove type="css/stylesheet" from:

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

so it looks like:

<link href="css/stylesheet.css" rel="stylesheet" media="all">

You also don't need the closing / at the end.

It fixes the issue. (Tested on standards mode not quirks)

And you shouldn't need to do this:

<h1><b><u>Adding a new Visitor</u></b></h1><br/></br>

The underline, font-weight and spacing (margin/padding) should be done in your CSS:

<h1>Adding a new Visitor</h1>

h1 {
    text-align: center;
    border-bottom: double;
    border-left: double;
    border-right: double;
    width: 75%;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: #C4CEDD;
    box-shadow: inset 0 20px 20px -20px #000000;

    text-decoration: underline;
    font-weight: bold;
}

Hope that helps.

Solution 3

for internet explorer add this

 
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->

35,478

Author by

malteser

Updated on June 25, 2020

Comments

malteser almost 4 years

Im creating a simple webpage. My CSS is only working in Chrome. It doesnt work in both Firefox and IE11.

Here's my HTML

<html>
<head>
    <title>text</title>
    <link href="css/stylesheet.css" type="css/stylesheet" rel="stylesheet" media="all"/>
</head> 
    <body>
        <h1><b><u>Adding a new Visitor</u></b></h1><br/></br>
        <div class="wrapper">
            <figure>
                <img src="images/advis1.png"/>
                <figcaption style="padding-top: 12px;">text</figcaption>
            </figure>
            <hr/>
            <figure>
                <img src="images/advis2.png"/>
                <figcaption style="padding-top: 12px;">text</figcaption>
            </figure>
            <hr/>
            <figure>
                <img src="images/advis3.png"/>
                <figcaption style="padding-top: 12px;">text.</figcaption>
            </figure>
            <hr/>
            <h3><u>Result</u></h3> 
                <img src="images/advis4.png"/>
                <br/>
                <img src="images/advis5.png"/>
            </div>
            <footer>
                Author: Malcolm Tanti | Contact information: <a href="mailto:xxx">xxxxm</a>
            </footer>
    </body>

And here is my CSS

h1 {

    text-align: center;
    border-bottom: double;
    border-left: double;
    border-right: double;
    width: 75%;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: #C4CEDD;
    box-shadow: inset 0 20px 20px -20px #000000;
}

body {
    padding:0px;
    margin:0px;
    border:none;
    background-color: #7ea2d6;
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

.wrapper {
    box-shadow: inset 0 20px 20px -20px #000000;
    border: double;
    padding-top: 50px;
    padding-bottom:50px;
    width: 75%;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    background-color: #C4CEDD;
}

img { 
   border:3px double;
   display: block;
   margin: 0 auto;
}

footer {
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
}

I am quite new to CSS but and HTML. It works prefectly fine in Chrome which leads me to wonder what the problem is. My Problem is that none of the css loads and that all images and text are not aligned. I do not even have anycolours

Milan and Friends almost 10 years

type="text/css" not type="css/stylesheet" but you don't need that anyway. Chrome will it almost anything you serve him, but other browsers aren't that way ;)
Ryaden almost 10 years

Have you tried CTRL F5? Maybe IE and FF have something cached?
malteser almost 10 years

Actually! It worked type="text/css" Thanks a lot @mdesdev
Nico O almost 10 years

What do you mean by it's not working? Do you see anything at all or are the elements just not positioned the way you intended?
malteser almost 10 years

I edited the post! but I solved it with help of @mdesdev

malteser almost 10 years

Hmm, Thanks! I see what you mean
Luca De Nardi almost 7 years

Editing the PC registry to make a css work isn't a solution!
Facundo Colombier over 6 years

you realize that this code only applies to IE9 or lower right?
Ethan Turk over 6 years

Thanks for trying but this fixes only your PC and is very heavy handed. Fix the code and it will be fixed without reg editing. Also, this could have unintended effects on other things in your browser.