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.
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.
Related
I am building a website in asp.net, I have made a masterpage with a link tag to my css files. I made use of 1 global css file for every format of screen and 3 css files for small, medium and large screens.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Styles/style.css" media="all">
<link rel="stylesheet" type="text/css" href="Styles/small-style.css" media="all and (max-width:699px)">
<link rel="stylesheet" type="text/css" href="Styles/medium-style.css" media="all and (min-width:700px) and (max-width:1499px)">
<link rel="stylesheet" type="text/css" href="Styles/large-style.css" media="all and (min-width:1500px)">
For some reason in my content file the global css file (for every format) is getting used by the html elements. For example (style.css) this works for a div in my content page with class contactPage:
.contactPage {
margin-bottom: 140px;
}
Except for the 3 css files that make use of a min- and max-width, these are not used by the html elements in my content page (for some reason). For example (medium-style.css):
.contactPage {
background-image: url(../Images/ContactBackground.jpg);
background-size: 300px 500px;
background-repeat: no-repeat;
background-position: top right;
}
However in my master page these css links work file for all page sizes.
What I tried:
Adding a viewport in my content file.
Making use of <style></style>, this works but I don't want any of my style in my html.
Making a link element in my content page to the css files.
I hope someone could help me out.
Thank you in advance.
instead of your html doing the media query combine all 3 pages into one css and then separate them with something like
all css {
your css here
}
#media screen and (max-width: 699px){
css for max-width for 699{
your css here
}
#media screen and (min-width:1500px){
css for max-width for 1500{
your css here
}
i would let the media query in css handle it, not your html
I have a problem with my code. Because I am trying to create a responsive website using min and max width using the media queries. Some parts of my queries are fine but there is an element that doesn't read my CSS media query.
I have a navigation sidebar in the left side. And I want to resize it using media queries. But if I resized it. It doesn't read the min-width I include in the media query. When I check the code. only the color property is working. When I debug it using developer tools in Chrome. It read the CSS from the other CSS file named 'product.css' and not my 'responsive.css'.
What should I do?
Here's my simple CSS for responsive.css
#media screen and (max-width: 1603px) {
#searchhandler {
color: red;
min-width: 310px;
}
}
Here's the CSS from my product.css
#searchhandler {
width: 20%;
display:none;
min-width: 316px;
}
I am really a newbie in CSS that's why I am having a hard time with this part.
Ok I solved my problem. It is not the media query but the links for inluding the CSS file in my header.
My old code is like this
<link rel="stylesheet" type="text/css" href="./css/product.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/responsive.css" />
It should be
<link rel="stylesheet" type="text/css" href="./css/responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/product.css" />
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
I am cleaning up my web portfolio directory by placing CSS, images etc into respective folders.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/contact.css">
However, I can't seem to load certain DIV elements from my CSS file if it's inside a directory.
The DIV is below:
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url('img/form-bg.png') no-repeat;
min-height: 768px;
}
Is there a way of solving this? Everything else seems to load except for the div above.
Try this...
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url(../img/form-bg.png) no-repeat;
min-height: 768px;
}
Make sure that you're using the ID and not a class when using #contact-form-wrap. That is the only thing I can really think of.
Example:
Incorrect:
<div class="contact-form-wrap"></div>
Correct:
<div id="contact-form-wrap"></div>
don't forget to add type="text/css" to your css declaration like this :
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
So I'm kind of a programming noob, but I thought I had CSS referencing down...apparently not. I've referenced stylesheets, I've done it externally, internally, you know, the works. For some reason, however, when I went back to tweak an older app I had worked on that had the CSS initially included within the HTML and moved the CSS out, then referenced it, the CSS oddly stopped working altogether. I've got the directory set up as follows:
App name (folder)
static (folder)
main.css
templates (folder)
template_referencing_css.html
main.py
app.yaml
So here are the various references I've tried with main.css being inside the static folder:
<link type="text/css" rel="stylesheet" href="../static/main.css" />
<link type="text/css" rel="stylesheet" href="/static/main.css" />
Here is what I tried when I moved main.css to templates folder with the template referencing it:
<link type="text/css" rel="stylesheet" href="main.css" />
The css file is just a longer version of things like:
body {
font-family:sans-serif;
width: 850px;
background-color: #F0F8FF;
color: #008B8B;
margin: 0 auto;
padding: 10px;
}
.error {
color: red;
}
label {
display: block;
font-size: 20px;
}
remove the leading slash -
<link type="text/css" rel="stylesheet" href="static/main.css" />
In general this isn't necessarily a good idea, but try to use the full absolute path (like "C:/Whatever/another_dir/main.css"). At least this will tell you if the problem is finding the css file or not.