How do I get IE6 to display inline base64 encoded images?
<img src="data:image/png;base64,....." />
This works in Firefox/Chrome/Safari but not IE6.
My solution run smoothly on IE6. It may help you!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
Install Google's Chrome Frame?
Seriously, you can't. IE6 does not have support for base64 inline images.
IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.
base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.
"write two attributes in a same class. Use css browser specific hacks"
I am going to explain it below.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.
You can use base64 in CSS, at least.
Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Perhaps more research could possible help using mhtml:// for inline images, too.
This could be a quick fix to make Base64 images showing up in IE6 again:
Base64 image fix for Internet Explorer
*Sorry for the broken link, now comes the correct one!
I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.
ORGINAL
I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.
EDIT
Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**
Related
So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
Is it possible to turn off skype number recognition with some html or javascript? I'm NOT interested in turning it off only for my machine but for anyone visiting my page. I have seen the
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
business but it does not work for me with Firefox. I've also seen comments that this meta is not recognized in skype 4.2.
This is quite a problem since skype is recognizing data in table as phone numbers. For example, the line with two angles
00 23 58 17 45 00
is recognized as a phone number in Chad!
I know I could add some invisible rubbish to these numbers but there are a bunch of them and that's pretty ugly.
You could always add the following CSS:
#skype_pnh_container, #skype_plugin_object, #skype_highlighting_settings {
display: none !important;
}
yes its possible.
you have to split the number in your html code, so that it is not recognised as a whole.
seperate it by an zero width span or an transparent image or something.
it could even be enough if you wrap the routing code and the number in seperat span tags. or better floating left div tags...
i have no skype installed so you have to try it out, but thats the way to go.
update:
you could as well see what html code is generaged and remove it with a javascript code but thats deadly inefficient and unnecessary
SOLUTION: it seems to be enough to use the soft hyphen character
heres an article on that: http://www.ambrosite.com/blog/hide-phone-numbers-from-skype-using-the-html-soft-hyphen
I saw over the interweb a lot of possible solutions javascript solutions, meta tags, css and maybe I found an hack actually working for my websites, I tested on some computers and it work and I think it will work until skype don't change something in their code.
I was looking what is the skype exactly doing on our pages, and it creates some span around the phone numbers, as you already said, but it even add an <object> tag at the end of the document, just after the body closed tag.
And here I saw the trick! Just before that object there is a configuration tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>
This is added dynamically by the plugin! but here the solution become obvious, to finally stop skype messing with your design and avoid changing phone number the solution is to insert very early in the document the following tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>
notice the autoextractnumbers="0", here is the trick. The document will not validate anyway with that tag because there is no attribute "autoextractnumbers" but i noticed that it works even if commented:
<!-- <span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span> -->
And that's it! Enjoy your webpages free from messy plugins! And your web page will still validate correctly. Hope it works for you too! I have tested on a couple of computer 3 different browsers and 2 different skype versions, for now it works for me, let me know if it works for you too and if it works share it :)
I would try adding the CSS:
span.skype_pnh_container {
display: none !important;
}
Unfortunately I can't test it because I can't get the toolbar to work in Firefox, and IE's developer tools aren't cutting it. If it doesn't work, I'd try adding it through javascript after the page loads.
Try this JavaScript:
http://www.codeblog.co.uk/2010/04/07/web-development/how-to-stop-skype-toolbar-from-changing-numbers-to-skype-buttons-ruining-your-website-design-update/
All of the solutions provided to this question are no longer working, or aren't very efficient. The following CSS will remove the Skype Click-to-Call buttons very efficiently.
body span[class ^= "skype_pnh_print_container"] {
display: inline !important;
}
body span.skype_pnh_container {
display: none !important;
}
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class
I have it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.
CSS:
#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}
HTML:
<div id="shadow">
</div>
Any help is greatly appreciated as I at a total loss on this.
If it's possible, you make the png a gif, and everyone is happy.
If that isn't possible, the approach I use is the IE only css behavior.
With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/
You would then have to add CSS like:
behavior: url(iepngfix.htc)
IE7 supports png transparency.
You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.
Use selectors in your CSS which IE<7 doesn't support:
html>body #transparent_png {
background: url(gfx/transparent_png.png);
background-repeat: no-repeat;
}
#transparent_png {
/* additional properties here */
}
the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently.
But this css should only be loaded if the ie version is less than 7:
html header:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
#import "iefixes.css";
</style>
<![endif]-->
The iefixes.css contains something like this :
#transparent_png {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');
}
Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).
But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
A very nice png fix for IE6 can be found here
I used it and can assure u it works.
It is JS though, but most people have it turned on lately
All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.
The best I have found is:DD_belatedPNG.js
it works likke a treeat and is very easy to use.
The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.
On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.
I don't want to use JavaScript to preload images. Are there any good solutions?
HTML5 has a new way to do this, by link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.
Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch
UPDATE
If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
That's all, image used you can see below:
(source: margonem.pl)
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/
A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.
You could use a hidden div to put images in. Like so
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
<link rel="preload" as="image" href="..." />
This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)
Reference your images in invisible img tags. while page loading they will downloaded too.
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.
Before:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
After:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.
Can't you add them as an <img /> tag to your page and hide them using css?