My CSS won't load in Internet Explorer 11 and Firefox! Only works with Chrome

I'm creating a simple web page. My CSS only works in Chrome. It doesn't 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'm new to CSS, but so is HTML. In Chrome, Chrome works fine, which makes me wonder what the problem is. My problem is that none of the css is loaded and that all the images and text are not aligned. I don't even have anycolours

+2


source to share


7 replies


Resolved to use type="text/css"

instead type="css/stylesheet"

when importing stylesheet.



+4


source


I checked 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 this:

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

      

You also don't need to close / at the end.

He fixes the problem. (Tested in standard mode, not quirks)



And you don't need to do this:

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

      

The underline, font size 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 it helps.

+5


source


for Internet Explorer add this

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

Run codeHide result


+1


source


This could be due to browser cache. Clear your browser cache with CTRL + F5

0


source


I had the same problem and none of the above issues got fixed. In my case, in the end the solution was simple:

Somehow IE won't load the CSS if you run the page locally (like offline in your browser). I have uploaded the same script to a web server and it works like a charm!

0


source


msvk_23 is right. I had a local HTML page, not a post-it. After I installed Notepad ++, it all messed up in Internet Explorer and Edge, but not Google Chrome. When checking the registry, it said: text / xml After changing this setting to text / css as suggested, it immediately worked in both Internet Explorer and Edge.

Thanks msvk_23 :)

photography regedit enter image description here

0


source


Try this option:

Run regedit.exe and navigate to the key HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes.css

Change: "Content Type" from "text / plain" to "text / css"

For me the css was not recognized at all in IE 11. By changing this entry in regedit. It worked great on my PC.

-3


source







All Articles