I have an issue at the moment where in IE8 my background-image properties in CSS files are being changed to url("null") instead of the original URL that's in there.
Not sure where to look, but I suspect it could be selectivizr or JQuery UI.
Anyone experience this problem before?
EDIT:
Here's the CSS code
span.k-icon
{
background-image: url('http://cdn.kendostatic.com/2012.2.710/styles/Default/sprite.png');
}
EDIT 2:
I removed selectivizr out of the equation, which solves the problem. So this is definitely something to do with selectivizr.
Regards,
Jacques
I found the answer. This is a limitation in Selectivizr.
You can't use CDNs or external assets with selectivizr, CSS files and the like must be hosted on the same domain and relative paths must be used.
Here's a post about it. http://bigredtin.com/2010/selectivizr-with-css-on-a-cdn/
Regards,
Jacques
Related
I have a website, where we are using a tool to minimize and compress css code. It is called JCH, it is a plugin for Joomla, I think you can use it on Drupal too. I have an issue this css code:
#sp-user3 .help-menu .nav.menu :not(.user-menu){
display: inline-flex;
}
It is being converted to:
#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}
As you can see ".nav.menu :not" is converted to ".nav.menu:not" which causes the css rule to not be applied as intended.
This can be an error on the tool. How can i rewrite it or add a character to avoid that confusion? any ideas are welcome.
This is indeed a bug, and this is not the first time I encountered it.
The StackSnippet editor on this site used to have the very same bug in its Tidy button. See my bug report. It was fixed soon after.
So you can file a bug report with JCH and then wait for it to be fixed as well.
Meanwhile, you can insert a * before the : in the CSS as a workaround.
:not() is a shorthand for *:not() anyway, so you won't be changing the meaning of the selector, just writing out in full what was implied.
It's a definitely tool issue, web minifiers like Minify generating correct code.
#sp-user3 .help-menu .nav.menu :not(.user-menu){display:inline-flex}
I've developed a layout which uses li:nth child and understand IE6,7 & 8 will struggle to show these but I was advised to use 'Selectivizr' which I've done but still no luck in displaying if anyone could advise?
I'm using less and cakePHP but the styles beyond the body tag seemed to be ignored.
http://nt.rollertestingserver.co.uk
It seems it's just a typo in the script src path. The page links to "/NT/js/selectivizr.js" but its actual path is "/js/selectivizr.js".
I am trying to get the CSS3 border-radius to work on IE8. But for some reasons, it is not working: http://uiux.atwebpages.com/
I am using the border-radius.htc file.
Is there some other way to make border-radius work on IE8 without using the .htc file ?
It's not possible without using VML just with pure CSS in IE<9. The only other way is to use sliced images. I'd recommend, if those rounded corners are not really necessary, just omit them. It's not your fault, if people use outdated browsers.
However I can recommend you css3pie. Take a look at it.
edit:
your page has a 404 on css_reset.css
Are you sure, your resources have loaded all correctly?
you need to include behavior:url(border-radius.htc) in your css (with the correct url of course), but i couldn't find this in your css. Try it and see, if it works.
No, CSS3 border-radius isn't supported in IE8.
Please, refer to this chart for my info about compatibility:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
Is jQuery an option? If so then try this - http://jquery.malsup.com/corner/
if you do what's said on this page it should work properly. one more advice: clean up your css and define browser depending rules before you do general css rules.
css3 in ie
a#logo {
_background:transparent;
_filter:progid:dXImageTransform.Microsoft.alphaImageLoader(src="/assets/images/header/logo.png", sizingMethod="crop");
_cursor:pointer;
}
It fixes an issue with IE rendering transparent PNGs by specifying a different Image Loader for IE.
It is definitely IE specific. Most of the time, though, you won't see this done in the CSS explicitly since most pages have multiple transparent PNGs on a page. Most developers use Javascript to fix this across all images on a page.
The most popular of these scripts is TwinHelix's IE PNG Fix.
It makes Internet Explorer use PNG Alpha transparency.
I also believe this is not according to the official css standard, so I would avoid when possible.
However, sadly, using pure standards is a utopia in cross-browser web development...
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.