tags:

views:

40

answers:

3
+1  Q: 

Embed an image nested inline within an HTML page for IE7+

Is there a way for nesting an image in an HTML page *inline* in IE7?

I can't use external resource, all because of a particular server configuration (it's a web dispatcher in maintenance mode that redirects all requests to a single .html page).

So I can't afford using the classical embedding by using the following:

<html>
 <img src="mypic.jpg" />
</html>

When looking for a solution, I found these:

  • Using inline SVG within an XHTML file # => I can't use XHTML extension in my case the page has the .html extension (and I can't change it)
  • Using base64 encoding # => It works pretty well with Firefox & Chrome, but not in IE7

None of which seem to be working in my configuration.

The more I seek the less I hope. Any ideas?

A: 

For the svg solution, your page doesn't need to end in .xhtml. In fact, it can end in whatever extension is handled by your web server.

The page being in xhtml is defined by its doctype definition. Put the doctype definition of xhtml 1.0 (strict or transitional) or even better xhtml1.1 and embed svg in the page.

As an alternate solution, you could try to output the image directly with an .html extension, keeping its original mime (image/jpeg for instance) but I'm not sure it would work.

Matteo Mosca  2010-06-23 14:07:37
The page being XHTML is defined by it's content-type, not its Doctype — and Internet Explorer 8 and lower do not support XHTML (unless it pretends to be HTML) or SVG (unless IE has a third party plugin to add support).
David Dorward  2010-06-23 14:11:00
Outputting a JPEG with an HTML extension wouldn't help either — the point is to get the page and an image in a single request, not two different requests to things with `.html` in the URI.
David Dorward  2010-06-23 14:11:33
Yes. Support was added in IE9 (or so I hear, I hope it isn't tag soup mode parsing of application/xhtml+xml). (Edit: This is a response to a comment that has been deleted)
David Dorward  2010-06-23 14:18:50
If you serve XHTML with a text/html content-type or if the page's URI triggers IE's content-type ignorance feature then XHTML will be parsed as tag soup. This is distinctly different to support XHTML which has different parsing rules and DOM structure (e.g. dealing with namespaces, returning tag names in lower case in JS, tbody being an optional element instead of a required element with optional start/end tags, etc).
David Dorward  2010-06-23 14:21:01
+2  A: 

The only option, as far as I know, for embedded image in an HTML document for current versions of Internet Explorer is VML (which isn't supported by anything other than Internet Explorer).

You could use something like Raphaël to abstract the VML or SVG into a single JS script (but that would add a dependency on JavaScript).

That easiest option would probably be to reference a normal image on an external URI … on a different server.

David Dorward  2010-06-23 14:14:07
I also found out about Raphaël. That's a solution that will work, of course. But that'd be quite overwhelming for maintenance devs and as a matter of fact, I'd prefer a solution which works for image types other than SVG.
Arnaud Leymet  2010-06-23 14:41:27
A: 

Instead of redirecting to a single .html page, you could redirect to a single image and put your text on the image. This has obvious drawbacks, but how important is the image?

What you meant by base 64 encoded?

Marcus Adams  2010-06-23 14:16:06
http://en.wikipedia.org/wiki/Data_URI_scheme
David Dorward  2010-06-23 14:23:43
@David Nice article, but "Internet Explorer through version 7 lacks support"
Arnaud Leymet  2010-06-23 14:34:33
@David, thanks, so by "base 64 encoded", the OP was talking about URIs.
Marcus Adams  2010-06-23 14:41:53
@Arnaud — I was answering Marcus' query about what "base 64 encoded" meant in this context (which is why it was a comment on his answer and not an answer of its own). Your original question pointed out that IE7 didn't support it.
David Dorward  2010-06-23 14:43:44

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?