ITWorker ITWorker - 10 months ago 35
CSS Question

Perplexed by css discrepancy during runtime

I have the following in the .css file when the application is not running:

#tabsuseradmin .ui-tabs-panel {
height: 500px;
overflow: auto;
margin-right: 10px;

But during runtime, in the browser developer, the same styling comes as:

#tabsuseradmin .ui-tabs-panel {
height: 900px;
overflow: auto;
margin-right: 10px;

I searched "900px" in my entire Visual Studio project, and did not see it anywhere for a
attribute. I am stuck on this and don't know what is happening to cause this to become 900px. What should I do?

Load order of my CSS files:

<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/content/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<link href="/content/docsupport/style.css" type="text/css" rel="stylesheet">
<link href="/content/uielements.css" type="text/css" rel="stylesheet">
<link href="/content/headerfooter.css" type="text/css" rel="stylesheet">

contains the styling in question, and the
doesn't contain anything that overwrites in the css above it (I tested by removing it entirely).

Thank you.

Answer Source

Load your css files inside of your head tag, after the loading of the files create a style tag with the rules that you want to take precedence immediately after the css file loading. This will allow your rule to overwrite preexisting rules set in the css library files.