Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have their styles coded directly into the HTML.
The task at hand initially seemed simple enough. I updated the styles for all the basic elements in Main.css to match the new design. However, I encountered an issue where the styles of some elements on specific pages refused to change, even when specified inline. Some elements did alter certain properties but overall did not conform. In addition, applying new styles sometimes disrupted the layout of the pages in ways I couldn't comprehend.
Main.css is included on these problematic pages. These pages contain a significant amount of ASP code embedded within them, handling the business logic. As someone who isn't an expert in ASP Classic, I am left wondering what could be causing these elements to disregard standard HTML and CSS styling?
For illustration purposes (I am from Russia), here is a snippet of the ASP page code:
Here is the resulting output:
And here is the observation from the styles watcher in IE9:
An input button styled inline:
An input button styled via Main.css:
It's curious to note that when using inline styling, only part of it seems to take effect, which is perplexing. Furthermore, applying the style from the Main.css file only inherits from the BODY tag and does not apply to the selector input[type="button"]. Interestingly, this selector works fine on other pages.
UPD1. After making changes like modifying </link/> to </link> and doing the same for input, strange tags were eliminated from the resulting page. Yet, the problem persisted - the page still recognizes the existence of Main.css and applies parts of it (such as BODY tag styling) to my buttons, but fails to recognize the style associated with the buttons themselves.
UPD2. A peculiar anomaly was discovered. The version of Main.css received by the problematic pages differs from the original! Some attributes present in the original file are missing in the received version, for example:
Original Main.css:
INPUT.button {
min-width: 143px;
font-face: Arial;
height: 34px;
border: 1px solid grey;
background: #FCFCFC;
border-radius: 7px;
box-shadow: 0 0 2px grey;
padding-left: 10px;
padding-right: 10px;
}
Received Main.css:
INPUT.button {
min-width: 143px;
font-face: Arial;
height: 34px;
border: 1px solid grey;
background: #FCFCFC;
padding-left: 10px;
padding-right: 10px;
}
It appears that certain attributes are omitted in the received file. How can this occur??