I'm trying to include a datepicker in one of my WebUserControl. The javascript works fine, however I can't manage to load the css.
I have my css files organized as follow :
My scripts and stylesheet are called as follow :
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src ="js/datepicker.js"></script>
<link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
In the jquery-ui-1.10.3.custom.css, the images are loaded as follow :
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fcefa1;
background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
color: #363636;
}
The result however is the following :
intead of :
As you can see the javascript works as intended but the css won't load. I've checked the applied style with the chrome debug tool and the style is never loaded on the textbox. It worked perfectly fine when I was loading jquery from the Microsoft CDN however I felt it would be more right to have the file on my server.
I'm 100% sure that my images and css files exist in the folder of the project. I've tried to use relative path (with "~") and the property runat="server" on my link but nothing so far have worked. Any help would be great.
Related
I installed that angular2 plugin called "ng-daterangepicker" , then I wanted to resize a div inside it, I changed the .sass file but nothing changes on my browser (I cleared the cache but still not working) , I think that I should modify .scss files but I found none on the plugin, I found just plain sass files.
.calendar-container
display: inline-block
width: 330px
height: 100%
padding: 20px
border-right: 1px solid $border-light
float: left
I changed the width from 340px to 330px, but on the browser I still find that 340px.
here is the strange part : I deleted the .sass file but everything is still working, so I think that maybe the component gets its styles from somewhere else.
Usually, it's a bad idea to change the source code of a plugin. In case you update the component or reinstall the project, every custom change you added to that specific plugin will be discarded.
What you can do instead is to add a CSS class to the directive like so:
<!-- app.component.html -->
<ng-daterangepicker class="myCustomDateRange" [(ngModel)]="value" [options]="options"></ng-daterangepicker>
and then point to the element you need and add custom CSS for it in one of your SCSS files.
<!-- someStylesFile.scss -->
.myCustomDateRange .ng-daterangepicker .calendar .calendar-container { width: 330px; }
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
I'm trying to create a webpage using a "central" CSS external sheet that is called by THREE HTML files. The problem that I have is to do with background color; each HTML file should have a different colour. I start off by adding the line
<link rel="stylesheet" TYPE="text/css" href="EuropeanCountries.css" />
within the and of my HTML file called "France.html". I add exactly the same line within the and of my other two HTML files called "Italy.html" and "Germany.html". I then add the line inside "France.html" and inside "Italy.html" and inside "Germany.html". Then, I go to my css file called "EuropeanCountries.css" and I add the lines
body#page1{background-color:rgb(255,0,0);}
body#page2{background-color:rgb(0,255,0);}
body#page3{background-color:rgb(0,0,255);}
I then save ALL the HTML files and css external sheet inside the same directory. I then try to open "France.html" with the Opera browser and the background color is WHITE, which is what it should NOT be. The background color for the other two HTML files are ALSO white! So something is wrong. When I link ONE HTML file with the css file, eg. "France.html" with "EuropeanCountries.css" (and there are no other HTML files in my directory), the background color works just fine. But when I try to link multiple files with one CSS file, things go awry. Can anyone please point out to me exactly where I've gone wrong?
according the css, your body should have tags:
<body id="page1">...</body>
etc,
but I'd go with
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
and
<body class="red">...</body>
correspondingly
I already tried many different approaches and none work, am I missing something here?
This is what I have tried...
th a.asc {
background-image: url(up_arrow.gif);
}
th a.desc {
background-image: url(down_arrow.gif);
}
and
th a.asc {
background-image: url("assets/up_arrow.gif");
}
th a.desc {
background-image: url("assets/down_arrow.gif");
}
and
th a.asc {
background-image: url(assets/up_arrow.gif);
}
th a.desc {
background-image: url(assets/down_arrow.gif);
}
and
th a.asc {
background-image: url(<%= asset_path "up_arrow.gif" %>);
}
th a.desc {
background-image: url(<%= asset_path "down_arrow.gif" %>);
}
and...
th a.asc {
background-image: asset-url("up_arrow.gif", image);
}
th a.desc {
background-image: asset-url("down_arrow.gif", image);
}
and many more.
I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb
I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.
But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.
Your last example using asset-url should work, assuming a few things...
The asset pipeline is actually enabled (in config/application.rb look for config.assets.enabled = true)
You have sass-rails is in your Gemfile
If sass-rails is part of a group in your Gemfile (say, the :assets group), you have to make sure that group of gems is being loaded by Bundler in your development environment. In your config/application.rb you should see something like this:
if defined?(Bundler)
# This loads your :assets group in the development and test environments
Bundler.require *Rails.groups(:assets => %w(development test))
end
This particular stylesheet is a SASS stylesheet (i.e., should have the extension .SASS or .SCSS because asset-url is a helper from the sass-rails gem)
This stylesheet is actually loaded in the asset pipeline (it should be named application.css.scss or be required/#included by application.css.scss)
If after all of this is true you still have issues, well, then I'd say something silly is going on.
Your first one looks fine and works for me. So a few things to check:
Is you image up_arrow.gif in the same directory as the CSS file? (Or, if your CSS is in the HTML page, then the same directory as the html file)
Use the debug tools in a browser, like Firebug in Firefox or in Safari right-click and select "Inspect Element" (turn on developer menu first in the Safari prefs). Look to make sure the computed CSS properties are what you expect, and then look at the resource / network tabs to see that the browser is trying to load your image from the right location.
Is the image being used as a bg image but just not visible because the A element is too small? If you have no text in your A element it will be 0x0. If it has text and/or size properties it might still be too small if the background image has a bunch of blank space. Try making the A tag larger to see if this is the case. E.g. add a width and height property to your CSS, but also a display: block property seems to be necessary.
If you want an image to be the button, you could also just put an IMG tag inside the A tag. It might be a bit easier, though you can get the CSS to work if you want.
This works for me:
<html>
<head>
<style type='text/css'>
th a.asc {
background-image: url(up_arrow.png);
width: 32px; height: 32px; display: block;
}
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>
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.