I need to create a page with all images and CSS in it, so it would be only one file.
I know that there is something like MHT (IE web archive), BUT there is problem. It works only in IE and Opera, not in FF. And i need my page to be working in all IEs (6+), Opera and FF. I know there is a way to encode my images in base64 and I also know, that IE 6 and 7 does not support data URLs. I've seen Dean Edward's trick for IE 6 and 7 but it works only with PHP support. And I can't use PHP, so this isn't working for me.
So, is there any way to create this kind of page? Please don't give me answers like "who is using IE6 today" or "install chrome frame". I know all this, but I need it to be working this way.
Thanks for the answer!
There is no cross-browser way to integrate all resources into one HTML file.
Your best bet is probably to serve a .MHT file for IE, and one with data: URIs for Firefox et al.
In some situations, a viable compromise may be serving a ZIP file that contains all resources, referenced using relative URLs. The user just has to unpack it, and can view it locally.
I can only think of one solution that will work in all browsers, and that is building an image from html elements, but it will be very much work to do so (per pixel or other strategy). Maybe jQuery can help a little. Also this might slow IE6 down (even more than normal...)
example: http://jsfiddle.net/huSq3/1/
I know it isn't much of a solution but I had to mention it. Now I'm thinking of it maybe you can use the canvas tag in combination of this javascript library for IE and draw the images to that via javascript.
Maybe you could use html conditional comments to decide which solution to use between MHT, data url, or any other partially supported solution...
If you are OK with the base 64 string in the image tag, then just hardcode it, then you do not need php
Related
Am I allowed to omit the path entirely from a href and start with a question mark?
For example: If my webpage is https://example.com/mycgi, can I have a link of the form bar?
I've tested this on Firefox and the link works as expected - clicking it takes me to https://example.com/mycgi?foo=bar. Will this work the same way on all modern browsers? What is best practice for this type of link?
I've tried searching MDN which usually has a good table of feature and browser version support, but https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href doesn't have give details about relative link formats.
I usually use href="mycgi?foo=bar", but it means adding a less portable reference to mycgi in the page. I'd prefer not to have to dynamically add mycgi to every reference in the cgi which generates the page.
This is a pure html and browser compatibility question. I am not looking for server or client side tools to modify links.
There should not be any issue with it.
You should be able to write any of those and they should resolve like any other link element. You might wan't to test it out on every major browser. But if you find a browser that doesn't support it i'm pretty sure the browser is not up to spec.
href="?foo=bar"
should resolve to domain.com/currentPath/CurrentPage?foo=bar
href="newPage?foo=bar"
should resolve to domain.com/currentPath/newPage?foo=bar
href=".?foo=bar"
should resolve to domain.com/currentPath/?foo=bar
href="/?foo=bar"
should resolve to domain.com/?foo=bar
etc...
I have developed working D3 driven charts and as far as all the other browsers go, there are no problems.
but recently the need to support them also in Internet Explorer 8 cropped up.
But so far i can't make this html display in IE8.
these are the tags used in D3:
<svg> <path> <g> <line> <circle> <rect>
for the last 6 hours i have skimmed through a lot of materials and questions including:
"Display inline SVG in IE8" which has this answer from October 2012:
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
Also:
D3 IE8 Compatibility?
wikipedia.org/wiki/Scalable_Vector_Graphics
SVG Web Compatibility
But the solutions using client-side plugins are not acceptable and so far it looks that i can't display svg in IE8.
So the solution is to find some other ways to render vector graphs.
I presume that others have had the same problems
Edit:
either way, people that will encounter this same problem after me will at least have somewhat concentrated materials and will realize that there is no easy/real solution to display svg on IE8 and better to spend time starting on the existing code rewriting/adjusting for non-svg version
Edit:
after some testing i would say that its worth trying to go through R2D3 examples and see if its possible to simplify/execute the code in IE8
Samples
Edit:
During the process of testing different elements separately some r2d3 problems seem to arise
most common would be Invalid argument and Object doesn't support this property or method
as i am not used to develop for IE8 there were some useful tips that i found:
dump javascript vars
and
display objects
Not sure if you are still looking for an answer, but I ran into this issue on a project a few years back. We ended up switching over to HighCharts for the browser compatibility. At the time it was still in its infancy as a charting library, since then it's become much more powerful and still maintains browser support back to IE6.
Unfortunately for most people now supporting IE8 its down to client restrictions rather than consumers.
Without informing those that have requested it of the restraints, backwards compatibility and cost implications along with valued links from this post, the solutions for making canvas work in IE7/8 and using the JScharts variants is your best option.
Of course, it means not using D3 unless you want to double your work load = cost. Just remember to mention that every time.
Good luck
IE8 (as far as I can see) simply doesn't support SVG. The only solution I can see working is using a different graph library which uses a canvas to draw it's components. Think of libraries like CanvasJS, ChartsJS, GoJS or VisJS Network Graphs and then using excanvas to make them work for IE8.
Another solution I found when researching this topic is using Chrome Frame. It makes IE8 support SVG. Though, sadly, Chrome Frame is retired and no longer supported anymore.
Knowing all this you have to ask yourself: "Is it worth going through all of this for the less than 0,1% of people who still use IE8 and below?".
Because, if you want complete d3 compatibility you probably would have to write your own converter from svg to canvas and even then, you still have to hope that excanvas supports all the canvas functions you write.
Edit: Changed browser percentage to current IE8 usage
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
Iam using the following code in my file for overlay image.This works fine in firefox but not in IE6.Can anyone please suggest a solution for this??
<div id="1" onclick="document.getElementById('div1').className = 'nodis';" CLASS="nodis" style="width:100%; background:url('/gifs/overlay.png');" align="center">
Png overlays aren't supported in IE6, and you'll have to make use of other hacks* instead.
Or, you could do what Microsoft has already done: drop support for IE6.
Microsoft are pushing out IE8 as a critical security update, so even Windows users that have pirated windows copies will get automatic upgrades from IE6. And large corporations aren't an issue anymore, since very few IT departments in the world want to have unsupported 3rd party software under their responsibility.
If you're still worried that many of your users use IE6, and you want to make sure they can see the page correctly, make use of an update script such as IE6update, which will tell your users that they need a browser update to show your page correctly.
*) Thanks to deceze for the link to various hacks.
I might have misunderstood your question, but here is a solution for PNG fix using javascript: PNGFix. If this is not what you need, please correct me and give me more detailed explanation or link to your site.
I'm trying to make a personal bible for my psp
(I tried googling but the only bible version I've seen on my skimming is on KJV and I'm trying to make mine have 3 versions namely TNIV, NLT and Amplified Bible)
So my only solution was to make on for myself and my approach was to save an html file on my mem-stick and open it up through the console's browser
My concerns are:
How does the psp browser handle css and javascript?
Is there a doctype declaration specifically designed for the psp browser?
Can I use any local database to store my texts for easier query or do I have no choice but rely on static text files?
Is there anyone in SO who have experienced developing a page for this console and can he/she give me some tips and advice?
Thanks much in advance for your responses. :)
Well the best way would be to make an HTML document file to create an off-line web page.
The PSP has good (but not great) CSS support and weak Javascript support (compared to a desktop browser).
The best Doctype to stick to would be XHTML Strict 1.0.
Not unless you find another way to do it.
Not for the PSP, but I would recommend this: Just keep your markup and CSS as simple as possible. Don't set font-sizes or widths, let the PSP browser do that for you. If you need to generate a bunch of static files, it might be worth building a short script that will do it for you. Don't overcomplicate.
Hope that helps.
Regarding my concern #1, I found only this as reference for all script objects that the psp browser supports as of their latest release.. I'm not sure if SCE would add more support for other objects in the future though
Anyhow here's the link
To answer your issue (not your question), have you thought about using http://www.biblegateway.com/ which can show verses in different Bible translations - instead of writing your code to try to do the same thing?
Granted, this only works if you are connected to the Internet.