ITWorker ITWorker - 1 month ago 6
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
height
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">


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

Thank you.

Answer

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.

Comments