Well I used css3pie in asp.net which is not working. I tried every possible solution. Searched a lot of forums but failed to properly use PIE in asp.net. Let me show you my project structure.
I have master and inner master pages in my project hierarchy.
The css3pie is working on those pages which don't use master pages.
My css and .htc files are as follows
Root
css
script
When I use css3PIE without Master page the it works:
<script type="text/javascript" src="../Scripts/html5.js"></script>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
The above code is working. But when i used any page with master. It is not working. My css looks some thing like this:
behavior: url('../Scripts/PIE.htc');
The css is placed in IE.css file. You can see the in above code.
Remember i tried every possible combination to refer .htc in css
behavior: url('../Scripts/PIE.htc');
behavior: url('/Scripts/PIE.htc');
behavior: url('/PIE.htc');
behavior: url('PIE.htc');
with and without quotes
One thing more. A lot of people are saying it is due to relative path. Well i tested those things. when i look at the rendered html in Development tools in IE. It applys the behavior but not working.
Please help me. It will be highly appreciated. Thanks in advance
Ok I fixed the issue. So i am writing here to help other peoples. When you are using master pages in asp.net and you are using .htc file as relative path in css then use position as relative. for target element which used css3 style. For example the css class is round-box
<style>
.round-box
{
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(PIE.htc);
}
</style>
The html element on which we will apply .round-box style is
<div class="round-box">This is a round Div<div>
So those who have issue with round corners not working on IE just put IE specific position:relative for IE browsers like.
<!--[if lt IE 9]>
<style>
.round-box
{
position: relative;
}
</style>
<![endif]-->
This will fix the round issue or those that have no border visible. Keep in mind position:relative will effect child elements. Use it wisely
It's not a path issue... it has to do with the web server understanding how to serve the .htc file. There is a wrapper script included that does this for PHP, you can start with that and tweak it for IIS.
Related
i am facing a very weird issue, i was working on a wordpress site on version 4.9.1 i included some css which the client then told to remove i have removed the css but that css is still loading up on the website although it does not exist
here is the screenshot!
i have checked this file a dozen times, i have cleared the browser cache ,tried hard refreshing it, opened it in incognito mode, everything still it loads up , is there something about this scenario i don't know?
the domain is Website link
If you check the CSS file included: http://smirksbrand.com/wp-content/themes/Avada/assets/css/style.min.css?ver=5.1.4
at the end of it there's still this:
.fusion-main-menu > ul > li {
padding-right: 20px!important;
}
that you want to get rid of.
Consider removing this from your head tag...
<link rel="stylesheet" id="avada-stylesheet-css" href="http://smirksbrand.com/wp-content/themes/Avada/assets/css/style.min.css?ver=5.1.4" type="text/css" media="all">
Isn't this the one that's disturbing you?
Edit:
Based on your picture, if you want padding-right to be 45px, put !important to it...
.fusion-main-menu>ul>li {
padding-right: 45px!important;
}
This will take precedence over the rogue loading style... Hope it helps...
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for any set of elements I've put into my own custom elements. The custom styles applied to <paper-material> from app-theme.html are not applied inside my <home-page> element. I want certain elements to have themes applied to them globally. The only style inside app-theme.html that apply anywhere else are the CSS Custom Properties such as --dark-primary-color.
Is there any way I can create themes that apply to the entire project? I've tried specifically importing app-theme.html into my elements, and it doesn't make a difference. Thanks in advance.
The themes from polymerthemes.com should apply across your entire project.
Just download one of the pre-made themes (or create your own using the Polymer Theme Builder) and link to it like this in your <head>:
<style is="custom-style">
#import url("path/to/theme.css");
</style>
Alternatively, have a look to see how styles are applied on that site.
Disclaimer: I'm one of the creators of polymerthemes.com.
I had the same problem and the following worked for me. Inside your dom-module add:
<link rel="import" type="css" href="../styles/app-theme.css">
For example:
<dom-module id="my-element">
<link rel="import" type="css" href="../styles/app-theme.css">
<template>
<paper-button raised class="primary">Click Me!</paper-button>
</template>
</dom-module>
This seems to only be needed for certain paper elements though. The paper-checkbox works without it. Not an ideal solution though, to be sure.
Found out that putting following in my custom element was causing the vulcanize task in gulpfile.js to crash (leaving the remaining tasks not run).
<link rel="import" href="/styles/app-theme.html">
Using relative path solved this problem
<link rel="import" href="../../../../styles/app-theme.html">
Worked somehow, but I think this is not the right thing to do. app-theme.html contains many css code that my custom element doesn't need.
Using mixins ( #apply(--mixin-name); ) looks like a good way, but hadn't tried it out yet. I think modification to app-theme.html would be necessary anyways.
I wish Polymer Starter Kit introduces a best practice for applying default margins/paddings/etc for paper-material/etc.
Edit Jul 2
Following didn't get applied.
app-theme.html
:root {
…
--app-paper-material-theme: {
border-radius: 2px;
height: 100%;
padding: 16px 0 16px 0;
width: calc(98.66% - 16px);
margin: 16px auto;
background: white;
};
}
my-customelement-using-papermaterial.html
<style>
paper-material {
#apply(--app-paper-material-theme);
}
</style>
My researching was messed up and posted wrong results in this few hours, so I decided to delete the portions. Sorry for those who saw them and took some kind of action.
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?