2

I am trying to make a small web utility that allows a user to enter some data. It has an external stylesheet. The stylesheet loads correctly in Firefox and Chrome but does not load in IE 11. I have run both the CSS and HTML through the W3C validator and everything appears to be fine. I looked at all the posts similar to this problem but still having the problem. Any suggestions will be greatly appreciated. Below is the HTML and CSS. I am not at web designer so my HTML and CSS is a bit rusty :). Also I removed the javascript since that functionality works. Its just appears the CSS will not load in IE 11.

#colA {
 width: 50%;
 float: left;
 max-width: 480px;
}


.userInputs {
 width: 90%;
 float: left;
}

#right {
 padding-top: 20px;
 float: left;
}

#userDisplay {
 width: 90%;
 float: left;
}

/* Styling for the Name/Value Pair List */
#listDisplay {
 min-width: 90%;
 float: left;
 height: 200px;
}


/* Styling for all  buttons */
.buttons {
 margin-bottom: 20px;
}
<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Dundas Data Test</title>
 <link href="dundas.css" type="text/css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="vkbeautify.js"></script>
</head>
<body onLoad="reset()">
    <div>
        <div>
         <header>
          <h1>Test</h1>
        </header>
            <div id="colA">
                <label class="userInputs">Name/Value Pair</label><br>
                <input id="userInput" class="userInputs" type="text" ><br>
                <label class="userInputs">Name/Value Pair List</label><br>
                <select size="10" multiple id="listDisplay"></select>
            </div>
            <div id="right">
                <button class="buttons" type="button" onClick="addToList()">Add</button><br>
                <button class="buttons" type="button" onClick="sortByName()">Sort by Name</button><br>
                <button class="buttons" type="button" onClick="sortByValue()">Sort by Value</button><br>
                <button class="buttons" type="button" onClick="deleteItem()">Delete</button><br>
                <button class="buttons" type="button" onClick="createXML()">Show XML</button>         
            </div>
        </div>
    </div>
</body>
</html>
sunpack
  • 95
  • 1
  • 7

2 Answers2

0

Use an absolute domain link to the CSS file, starting with a / - this being the base directory.

If for example your file is in a /myfile/ directory, then try using: /myfile/dundas.css as the URL for the CSS.

Martin
  • 22,212
  • 11
  • 70
  • 132
  • Thanks Martin. However I have tried using an absolute link and still the same issue. I have tried `./` also – sunpack Jun 06 '15 at 19:28
  • If you can give me a URL to the page, I can take a look - I have no ideas at this point, without seeing the issue myself. Cheers @sunpack – Martin Jun 06 '15 at 20:45
  • If you look in the menu on IE11 you will find the Developer Tools (F12) which should give you indicators as to where the issue lies . . . – Martin Jun 06 '15 at 20:47
  • I used the developer tools and IE sees the CSS but does not apply the styling. There is no error indicating why the styling is not applied. When I insert the CSS into my HTML using the ` – sunpack Jun 06 '15 at 21:39
0

Found this question while trying to solve the same problem. As per this answer removing the <!DOCTYPE html> worked for my problem.

Matthew Whitwam
  • 351
  • 3
  • 8