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
source to share
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.
source to share
for Internet Explorer add this
<!--[if lt IE 9]
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < /script>
<![endif]-->
source to share
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 :)
source to share