Recently i have come up with problem with background image like a ipad theme that contain a video, problem is that size of video may change, so i thought of trying border- image properties of CSS3. the major properties of css3 could be made cross browser compatible by using some technique or other. currently i use css PIE. but it doesn't support image border property in its recent version, IS there any way round. Just need to fix it. IE is really a pain :(
I thought of using some "Ninja in your browser" script it didn't worked.
Nope. There's currently no way to get border-image into all versions of Internet Explorer. PIE is working on it for IE9, from what I've found, but ran into some breaking problems (see more info in this duplicate question).
From the sound of it, your best bet is probably to allow IE to gracefully degrade by using a simple border or background.
Related
Quick question on progressive JPG backgrounds, if anyone knows.
It appears that Firefox ignores the "progressiveness" of JPEGs if they are set as CSS backgrounds and waits until the image is fully loaded until displaying. I have Chrome and IE loading the background images progressively but Firefox just pops them in at full quality.
I'm seeing the proof in front of me , but finding little to no info on it online. Just unanswered forum questions here and there.
Anyone know anything about this? Is it a bug Mozilla know about or what is going on?
Edit: Test case provided by easwee http://sample.easwee.net/jpgProgressive/index.html
I went digging in since I am working on a similar problem at the moment.
Results from personal tests on this test case + Fiddler 2 to simulate slow modem speed:
as HTML <img> as CSS background
Firefox (ver 25.0.1) works no support
Chrome (ver 32.0.1700.107 m) works works
Safari (windows 5.1.7) no support no support
Seems to me from the tests (and from an extensive web search) that the only browser that currently supports progressive background images in CSS is Chrome.
Workaround:
A nice workaround I've been using in cases where the image had to be visible before it finished loading the full size, is to load an extremely compressed image under the high resolution image. So you have the compressed graphic under the element until the full resolution graphic loads over it.
<div style="background:url(extremely_compressed.jpg);">
<div style="background:url(high_quality.jpg);">
</div>
</div>
Workaround 2:
Since Firefox does support progressive loading on <img> tag, you could try setting the <img> to position:absolute (or fixed) and have it load behind the content with a lower z-index.
Wordaround 3 - CSS3:
Use multiple background images if you don't need to support old browsers.
background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');
Have you tried using a jquery plugin? Had a similar issue where I wanted the loading delayed to improve load time so used jquery to load image and override the browser.
Found this with after a quick search:
http://yuilibrary.com/yui/docs/imageloader/
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
I have an image with a background color and I'm putting that in a div with the same background color. For some reason I cant save this image as a PNG and have the image bg color show the same as the bg color in the div across all browsers on all operating systems.
At first it looked fine on Windows/Mac in every browser except IE. So I tried using tweakPNG to remove the color profile and gamma properties and that seemed to fix for IE but now I have the issue in Firefox on Linux for some reason?
Any ideas/insight? Thanks
You didn't specify which version(s) of IE you had problems with, but older versions of IE are known to have bugs and missing features with PNGs.
In particular IE6 doesn't support PNG transparency at all, and IE7 has bugs with it.
There are a number of Javascript-based hacks available to fix this issue in IE. Here's a link to one of them: http://www.twinhelix.com/css/iepngfix/ - but there are a number of others that do the same job.
If you're having a problem with Firefox after running the graphic through tweakPNG, my guess would be that tweakPNG has corrupted the graphic slightly.
My suggestion would be to try going back to the original version of the graphic, and try out the hack I linked above in IE.
You must remove the GAMA filter on your PNG.
This soft make it quickly and easily.
Import your PNG
Right clic on gAMA
Delete
Save
Tutorial here
Is possible to change scrollbars' style for all browsers? If it is, how?
It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery plugin looks very nice and easy to install. Here is an example page.
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
Vendor Extensions
Internet Explorer (starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
WebKit (e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
Example:
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla (e.g. Firefox) and Opera do not seem to have any support for styling scrollbars.
Custom Scrollbars
Regarding the jScrollPane jQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
This article will help if you decide to use Javascript.