I am facing an issue with my CSS file in my web development project. Despite having three files - html, css, and javascript - my CSS is not working correctly. I'm unable to figure out the reason behind this issue. Below is a snippet of my aspx code:
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="form" runat="server">
<div id="editor" contenteditable="true" runat="server"></div>
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</asp:Content>
Below is the content of StyleSheet.css file:
#editor {
width: 100px;
height: 500px;
background-color:#444;
color: white;
font-size: 14px;
font-family: monospace;
display: block;
}
.statement {
color: #00FF00;
}
And here is the content of JScript.js file:
$(function () {
$("div[ID$='editor']").on("keydown keyup", function (e) {
if (e.keyCode == 32) {
var text = $(this).text().replace(/[\s]+/g, " ").trim();
var word = text.split(" ");
var newHTML = "";
$.each(word, function (index, value) {
switch (value.toUpperCase()) {
case "SELECT":
case "FROM":
case "WHERE":
case "LIKE":
case "BETWEEN":
case "NOT LIKE":
case "FALSE":
case "NULL":
case "FROM":
case "TRUE":
case "NOT IN":
newHTML += "<span class='statement'>" + value + " </span>";
break;
default:
newHTML += "<span class='other'>" + value + " </span>";
}
});
$(this).html(newHTML);
// Set cursor position to end of text
var child = $(this).children();
var range = document.createRange();
var sel = window.getSelection();
range.setStart(child[child.length - 1], 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
$(this)[0].focus();
}
});
});
Lastly, in the Masterpage.master file, below are the links to StyleSheet.css and JScript.js:
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script type="text/javascript" src="JScript.js"></script>
Despite all these configurations, the height, width, and background color of the div are not changing as expected.