CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromefirefox
malteser
malteser

Reputation: 485

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

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

Upvotes: 3

Views: 35864

Answers (7)

Peter
Peter

Reputation: 13

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

Thanks msvk_23 :)

pic of regedit enter image description here

Upvotes: 0

Loungy
Loungy

Reputation: 1

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

Somehow IE doesn't load the CSS if you are running the page locally (as in stand-alone in your browser). I uploaded the exact same script to a webserver and it works like a charm!

Upvotes: 0

malteser
malteser

Reputation: 485

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

Upvotes: 4

msvk_23
msvk_23

Reputation: 7

Try this option:

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

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

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

Upvotes: -4

Sanjay Sharma
Sanjay Sharma

Reputation: 635

It can be because of browser cache. Please clear browser cache by CTRL + F5

Upvotes: 0

Segun Michael Oroyo
Segun Michael Oroyo

Reputation: 11

for internet explorer add this

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

Upvotes: 1

user1245284
user1245284

Reputation:

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.

Upvotes: 6

Related Questions