I am using CSS3Pie in my my website to allow rounded corners in older versions of IE. In my CSS class I need to add the behavior propery to my CSS class
#myclass
{
border-radius: 10px;
behavior: url(pie.htc)
}
It works great for any page that is on the root level of the web site. When I browse to any sub directory in my site that uses that class, it does not apply the rounded corners cause the pie.htc is in the root of the side. The behavior URL is relative to the HTML page, not the CSS stylesheet.
How can I build an URL for the behavior that makes it accessible to all levels in my web site?
Referencing it from an absolute path should work? http://www.domain.com/youknowwhat
Still strange it is relative to the HTML though, you'd think it'd be relative to the CSS file.
Related
I've got a JQueryMobile-based Rails app that's working quite well, but I keep seeing the following show up in the logs and I don't know how to get rid of it:
No route matches [GET] "/assets/images/ajax-loader.gif")
I've actually got my ajax-loader in /app/assets/images/ajax-loader.gif, though. Also, I'm pretty sure that the app shouldn't be trying to hit the file since I've got the following JavaScript in the app as well:
$(document).bind("mobileinit", function()
$.mobile.ajaxEnabled = false;
});
What am I doing wrong? Thanks for any help!
nothing wrong in this, the request to the file is made by following jqm css
.ui-icon-loading{background:url("images/ajax-loader.gif");background-size:2.875em 2.875em;}
and the absolute path will be relative to your current request of the jqm css path. and hence 404.
And for Loading Widget, from jqm official documentation
It can also be displayed manually for custom loading actions using the $.mobile.loading helper method (See the global method docs).
There are two solutions for this.
Move the images folder relative to your jqm css folder.
Change the background image url in jqm css.
I would recommend first one. This will keep you upgrade friendly.
Overwrite the jQuery mobile CSS by adding the following CSS rule somewhere in your mobile stylesheets.
I added it directly to my mobile manifest file app/assets/stylesheets/mobile.css.scss, just below the line //= require jquery.mobile-1.4.5.min.css
.ui-icon-loading {
background: image-url('my-custom-ajax-loader.gif') !important;
}
By using the image-url helper you get all the benefits of the asset pipeline, such as fingerprinting and CDN utilization.
Can anyone shed some clarity on how to use CSS3 #font-face styling in a Grails web application. How do I get the application to include the font in the war, and how do I reference it.
I'm fairly new to Grails, and I'm not sure where exactly to put the fonts so that they can be referenced in the CSS.
Thanks!
UPDATE
Seems that putting it in the web-app directory does not work. Example, let's say the font filename is myfont.ttf. I place it in the web-app directory and then in my css do:
#font-face {
font-family: myfont;
src: url('myfont.ttf');
}
As far as I know that is correct, but it does not seem to work when I launch it from STS.
You can put it into web-app dir, it's a place for all your static resources.
You can create directory like web-app/fonts and reference it as /fonts/<you font> (works only if you run your app in root context) or as ${resource(dir: 'fonts', file: '<your font>'}
If you're using a font embedding service like Google's free web fonts api (http://www.google.com/webfonts) then you don't need to put fonts in your app. You just grab the generated JS includes and the generated CSS, plonk it in and use it. Easy.
if any of you use joomla, could you help me locate the proper code to change for font size, globally, in the ja-purity template. I also need to adjust the top menu bar width, and the length of each individual menu item in the top bar. Thank you for assisting me locate this code.
For any properly coded Joomla template (which JA Purity is of course) you will find the CSS files in JOOMLA/templates/template name/css. In this case, there are 4 CSS files for JA Purity. Also keep in mind that some of the template is controlled by the template parameters that can be accessed in the admin my clicking on Template Manager > Ja Purity.
I find the best way to tweak the css in a Joomla template is to use Firefox with the firebug . Goes something like this.
Install Joomla / Template.
Open frontend in Firefox with firebug enabled.
Use firebug to inspect the component you want to tweak.
The CSS classes will be displayed on the right. You can edit the css right there in firebug or use it's handy file / line number links to locate where the css class is defined.
I have used a tutorial to create a widget for my site.
This widget now needs to be dropped into a complex page with existing CSS rules on important tags like *, body, ul, and li.
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
The easiest way would be to use an iframe.
If you want an embedded widget, the wisest thing to do is to specify the CSS properties inline in the widget's markup. It's bad practice usually, but is the right thing here.
Check out for example what the Facebook Profile badge (you need to be a Facebook user to see it) looks like:
<!-- Facebook Badge START -->Pekka Gaiser<br/><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /><br/>Create Your Badge<!-- Facebook Badge END -->
They are very likely to have done a lot of testing on this, so the CSS properties they set in their code, I would recommend to set in your widget, too.
It can be done with an IFrame, but I wouldn't reccomend that. IFrames are messy and they usually don't work as expected. Some browsers block them, some don't support them at all, and interacting with the page they're in from the IFrame page is really hard.
The most clean way is by wrapping the widget in an extra div with an id like widgetwrapper. Then prefix every css rule with #widgetwrapper [space]. That way, the css from the widget won't affect the rest of the page. Make sure you put the css for the widget last in the css. If there's still page rules messing with your widget, overwrite them in the widget css.
looking at different sites, i see conflicting conventions.
if you want to have links to images, other pages, js files, i have seen:
URL.Content("~/scripts/myscript.js");
<a href="/scripts/msscripts.js">
<img src="../../images/test.jpg" />
<img src="../images/test.jpg" />
<img src="/images/test.jpg" />
<img src="~/images/test.jpg" />
these all seem to work in asp.net mvc but it seems like there are all doing slightly different things.
I am moving to a new webserver where they are changing from IIS redirecting to isapi rewriting and i was told to make sure my links were done in a correct way or the site not work.
Can someone clarify what the "correct" way is ?
Use the first option. That way, you can relocate your application to any subdirectory or top level of your domain.
The second option is fine, if you know for sure that the application will NEVER run from a subdirectory (i.e. it will always be at the server's root).
The third and fourth are bad, because they refer to your URL structure, which is meaningless in a MVC environment: add a new bit to the path (one more argument for example) or refactor the paths, and nothing will work.
The best way is to use Url.Content, and make sure you have the ~ in it.
Url.Content will then replace the ~ by the correct path (the root of your website).
Only use relative paths in your css file.
If your css is located in
/css/style.css
and a background image in /images/background.png
then in your style.css use:
#divTest
{
background-image = url("../images/background.png")
}
Since your website gets moved around as a whole this will keep working.