href to style html only works in Chrome [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am building a webpage from a template found online, and all my htmls in the webpage refer to my styles page. It works just as I hoped it would in Chrome (and I assume also in Safari and Firefox but have not checked) but in Internet Explorer the index.html seems to not want to access the styles page at all and the default_controls.html only partially. I am not using much of the template's styles page, making a lot of the styles page obsolete. It could also be that the webpage is not published yet.I am quite new to HTML (I'm more of a Java guy) but if possible please help!
My styles page:
<!--/*-------------------------------------------------
GLOBALS CLASSES
-------------------------------------------------*/-->
*{padding:0; margin:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#1491c1; background:url(../images/bg.jpg) repeat;}
img{border:none;}
h1{ font-family: 'Droid Serif', serif; font-weight:normal; color:#fff;}
h2{ font-family: 'Droid Serif', serif; font-weight:normal; color:#1491c1; font-size:18px;}
P{ line-height:20px;}
a{text-decoration:none; color:#1491c1;}
a:hover{color:#fff;}
<!--/*-------------------------------------------------
GENERAL CLASSES
-------------------------------------------------*/-->
.mar-top{ margin-top:40px;}
.mar-top30{ margin-top:30px;}
.mar-bottom{ margin-bottom:40px;}
.mar-Right{ margin-right:40px;}
.mar-right115{ margin-right:115px;}
.float-left{ float:left;}
.float-right{ float:right;}
.clearing { clear:both;}
.bor-bottm-non{border-bottom:none!important;}
.panel{}
.title{}
.content{}
.wrap{width:960px; margin:0 auto;overflow:hidden; background:url(../images/page-bg.jpg);}
.page{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:50px;}
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:30px; padding-top:30px;}
.block{padding:20px 20px 20px 20px; margin:0 auto;}
.block2{padding:20px 20px 20px 20px; margin:0 auto;}
.button a{text-decoration:none; display:block; width:70px; height:30px; background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center;}
.button a:hover{ background:#0e5295;}
<!--/*-------------------------------------------------
CONTENT CLASSES
-------------------------------------------------*/-->
.page-content{ width:580px; margin:0 auto;overflow:hidden; padding-bottom:30px; padding-top:30px;}
.page-content .content h3{ padding-bottom:20px;font-family: 'Droid Serif', serif; font-weight:normal; color:#fff; font-size:16px;}
.page-content .content p{ padding-bottom:15px;}
<!--/*-------------------------------------------------
HEADER CLASSES
-------------------------------------------------*/-->
.header-wrap{ background:#083266; height:162px;}
.header{ width:1860px; margin:0 auto;}
.logo{ float:left; background:#1491c1; width:300px; float:left;}
.logo h1{font-size:52px; text-align:center; padding:52px 0px 50px 0px;}
.menu{ float:left;}
.menu ul li{ list-style:none; float:left; border-right:#093e76 solid 1px; padding:115px 20px 30px 20px;}
.menu ul li a{ text-decoration:none; color:#80d2f8; font-size:14px; text-align:center;}
.menu ul li a:hover{ color:#1491c1;}
.menu ul li a.active{ color:#1491c1;}
<!--/*-------------------------------------------------
LEFTCOL CLASSES
-------------------------------------------------*/-->
.leftcol{ float:left; width:300px; overflow:hidden;}
.leftcol .title{ margin-bottom:25px;}
.leftcol .content ul li{ list-style:none; border-bottom:#0c4680 solid 1px; line-height:40px;}
.leftcol .content ul li a{ text-decoration:none; color:#1491c1;}
.leftcol .content ul li a:hover{color:#80d2f8;}
.leftcol .panel img{ float:left; border:#fff solid 4px; margin:9px 20px 0px 0px;}
.leftcol .panel .content{ color:#1491c1; overflow:hidden;}
.leftcol .panel .content .button a{ width:53px; height:24px; line-height:24px; float:left; margin:15px 0px 20px 0px;}
.block2 .panel{border-bottom:#0c4680 solid 1px; margin-bottom:18px;}
<!--/*-------------------------------------------------
RIGHT CLASSES
-------------------------------------------------*/-->
.rightcol{ float:left; width:660px; overflow:hidden;}
.rightcol .title{ margin-bottom:25px;}
.rightcol .button{ margin-top:0px;}
.rightcol img{ float:left; margin-right:40px;}
.rightcol .content p{ padding-bottom:30px;}
.button2 a{text-decoration:none; display:block; width:70px; height:30px;
background:#1491c1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:30px; text-align:center; float:left;}
.button2 a:hover{ background:#0e5295;}
<!--/*-------------------------------------------------
BOX CLASSES
-------------------------------------------------*/-->
.box{ width:230px; background:#083266; padding:20px 20px 35px 20px; float:left;}
.box img{ margin-bottom:25px;}
.box .title{margin-bottom:20px;}
.box .title h1{ font-size:20px; font-weight:normal;}
<!--/*-------------------------------------------------
CONTACT FORM CLASSS
-------------------------------------------------*/-->
.contact-form { background:#0d3d78; padding:30px; width:440px; float:left;}
.contact-form label {display: block; padding:10px 0 10px 0;}
.contact-form label span {display: block; color:#fff;font-size:14px; float:left; width:80px; text-align:left; padding:5px 20px 0 0; font-family: 'Droid Serif', serif;}
.contact-form .input_text {padding:10px 10px;width:318px;background:#07366b; border:none; color:#fff; outline:none;}
.contact-form .message{padding:10px 10px;width:318px; background:#07366b; border:none; overflow:hidden;height:150px; color:#fff; font-size:14px; outline:none;}
.contact-form .button{padding:8px;background:#1491c1; color:#ffffff; text-transform:uppercase; font-family:'Oswald', sans-serif;border:0px solid;margin-left:100px;margin-top:20px;}
.address { float:left; width:250px; margin-left:30px; margin-top:50px;}
.address .panel { border:none; color:#fff;}
.address .panel .title h1 { color:#1491c1; padding-bottom:10px;}
.address .panel .content p span { color:#fff;}
.address .panel .content p .number{ font-size:15px;}
<!--/*-------------------------------------------------
FOOTER CLASSES
-------------------------------------------------*/-->
.footer-wrap{ background:#1491c1; overflow:hidden;}
.footer{ width:960px; margin:0 auto; padding:40px 0px 50px 0px; overflow:hidden;}
.footer .bolg{ width:598px; float:left;}
.footer .panel{ float:left; width:230px;}
.footer .title{ border-bottom:#107eb4 solid 1px; padding-bottom:20px; margin-bottom:30px;}
.footer .title h1{ font-size:20px;}
.footer .panel .content ul li{ float:left; list-style:none; color:#062c5b; font-weight:bold;}
.footer .panel .content p{ color:#fff; font-size:12px; line-height:inherit; padding-top:20px; clear:both;}
.footer .panel .content p a{color:#062c5b; text-decoration:none;}
.footer .panel .content p a:hover{ color:#fff;}
.footer .panel .content p span{ color:#062c5b; font-weight:bold; font-size:12px;}
.footer .quickcontact{ width:270px; float:right;}
My index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EMS WebGIS Help Center: Home</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="Styles.html" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header-wrap">
<div class="header">
<div class="logo"><h1>Help Center</h1></div>
<div class="menu">
<ul>
<li><a href="index.html" >Home</a></li>
<li>Default & Controls</li>
<li>Table of Contents</li>
<li>Identify</li>
<li>Draw</li>
<li>Measure</li>
<li>Add File to Map</li>
<li>Print</li>
<li>Bookmarks</li>
<li>Overview & Basemaps</li>
<li>Users & Login</li>
<li>App Launcher</li>
</ul>
</div>
</div>
</div><!---header-wrap--->
<div class="wrap">
<div class="leftcol">
<!-- <div class="block">
<div class="panel">
<div class="title">
<h1></h1>
</div>
<div class="content">
<ul>
<li>Sed do eiusmod tempor incididunt ut </li>
<li>Praesent sit amet purus ac ligula tem </li>
<li>Nam convallis mauris id eros condiment</li>
<li>Donec a sem sit amet neque iaculis p</li>
<li>Duis sit amet augue ut urna auctor rut</li>
<li>Ut fringilla scelerisque enim, nec he</li>
<li class="bor-bottm-non">Donec vitae magna in turpis congue</li>
</ul>
</div>
</div>
</div> -->
<div class="block2">
<div class="panel">
<img src="images/Calleguas-logo-80px.png" alt="image" />
<div class="content">
<p>Go to the WebGIS program</p>
<div class="button">Go</div>
</div>
</div>
</div>
<div class="block2">
<div class="panel">
<img src="images/EMSLogoo.gif" alt="image" />
<div class="content">
<p>Visit the EMS Website</p>
<div class="button">Go</div>
</div>
</div>
</div>
</div><!---leftcol--->
<div class="rightcol">
<!--<div class="banner"><img src="images/bannerInsert.png" alt="banner" /></div> -->
<div class="page">
<div class="panel mar-bottom">
<div class="title">
<h1></h1>
<h2></h2>
</div>
<div class="content">
<p> <h2>Welcome to the Help Center for the EMS WebGIS program for the Calleguas Municipal Water District. </h2> <br>
<h4>This Help Center provides walkthroughs and information to help users find their way in and out of the WebGIS program.
This page provides the basics to navigation along the map, identification of objects, and much more.
With the help of the EMS WebGIS Help Center, you can become comfortable with the program and its resources.</h4>
<p> <h4>The EMS WebGIS Help Center provides assistance in the following subjects of the program:</h4>
</div>
</div>
<!--Index boxes-->
<div class="box mar-Right">
<div class="panel">
<img src="images/mouse.png" alt="image" />
<div class="title">
<h1>Default & Controls</h1>
</div>
<div class="content">
<p>Familiarize yourself with the program's basics in the map's layout and location of tools, zoom, pan, setting to default and other controls.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/table_of_contents.png" alt="image" />
<div class="title">
<h1>Table of Contents</h1>
</div>
<div class="content">
<p>Learn to access the map's sliders that change appearances in bases and water lines along with toggling items' appearance on the map.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/identify.png" alt="image" />
<div class="title">
<h1>Identify</h1>
</div>
<div class="content">
<p>Master selection, identification, and access of specific information.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/draw.png" alt="image" />
<div class="title">
<h1>Draw</h1>
</div>
<div class="content">
<p>Discover addition of graphics such as lines, circles, rectangles, and text.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/measure.png" alt="image" />
<div class="title">
<h1>Measure</h1>
</div>
<div class="content">
<p>Learn the controls to ascerain length, area, perimeter and more of any selected polygon, line, or circle.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/add_file.png" alt="image" />
<div class="title">
<h1>Add File to Map</h1>
</div>
<div class="content">
<p>Become an expert at knowing which files to add to the map and browsing your computer for a file to be added to the map.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/print.png" alt="image" />
<div class="title">
<h1>Print</h1>
</div>
<div class="content">
<p>Learn customization of a capture of the map, saving the page as a pdf, and printing it. </p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/bookmarks.png" alt="image" />
<div class="title">
<h1>Bookmarks</h1>
</div>
<div class="content">
<p>Figure out how to create, edit, and delete custom presets of specific areas of the map.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/overview_basemaps.png" alt="image" />
<div class="title">
<h1>Overview & Basemaps</h1>
</div>
<div class="content">
<p>Discover the overview window and learn to toggle it, and customize your map to your satisfaction using basemaps.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box">
<div class="panel">
<img src="images/users_login.png" alt="image" />
<div class="title">
<h1>Users & Login</h1>
</div>
<div class="content">
<p>Create an account or log in, customize your account, and configure account user settings.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<div class="box mar-Right">
<div class="panel">
<img src="images/app_launcher.png" alt="image" />
<div class="title">
<h1>App Launcher</h1>
</div>
<div class="content">
<p>Utilize the potential of the program's applications such as Screen Capture and Spreadsheet.</p>
<div class="button" align="center">Go</div> <p />
</div>
</div>
</div>
<!--End index boxes-->
<!-- <div class="clearing"></div> ---Image6 clearing below boxes, commented out---
<div class="panel mar-top">
<img src="images/image6Insert.png" alt="image" />
<div class="content">
<p>Donec eros lectus, elementum quis commodo a, lobortis ut mauris. Duis leo risus, fermentum facilisis auctor tempus, elementum ut enim. Maecenas ornare tincidunt semper. Nulla facilisi. </p>
<p>In tristique tellus vel nisi sagittis id bibe ndum tellus varius auris conva</p>
<div class="button2">More Info</div>
</div>
</div>-->
</div> <!---page--->
</div><!---Rightcol--->
</div>
<div class="footer-wrap">
<div class="footer">
</div>
</div><!---footer--->
</body>
</html>
Thanks in advance.

Answer 1

In your HTML index page you have
<link href="Styles.html" rel="stylesheet" type="text/css" />
it should be
<link href="Styles.css" rel="stylesheet" type="text/css" />