<object> tag with pdf doesn't work in firefox and is messed up in IE

Question

I have object tag that look like this :

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf"  width="820" height="1135" type="application/pdf"></object></div>

In chrome this tag works the way I want it to. In firefox it doesn't work at all and it's messed up in IE. Here's album with screenshots in each browser. What are my options here ?

Also on firefox I figured out that this pdf doesn't work with default firefoxe's pdf viewer. When I choose to use adobe acrobat extenstion for pdf documents it works perfectly.

Answer 1

You can just write the link to the pdf directly into the data attribute like this:

<div id="embeddedPdfContainer"><object data="/download-pdf/some.pdf" id="embeddedPdf"  width="820"  height="1135" type="application/pdf"></object></div>

I tested it with Chrome and Internet Explorer (different versions) and it works

If you want to stay with the c:url option you should change the second " to '

so changing this:

"<c:url value="/download-pdf/${id }"/>"

into this:

 "<c:url value='/download-pdf/${id }'/>"

in order to not "escape" the string

Answer 2

When you deliver dubious HTML:

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf"  width="820" height="1135" type="application/pdf"></object></div>
                                            ^      ^
                                            |      |
                                          Start   End?

... browsers try to figure out what you had in mind, with a varying degree of success that depends on the algorithms they implement and how imaginative the webmaster is. Different browsers can't always agree on how to handle valid code (where there're clear rules and specs) so it's to expect that the level of disagreement increases with invalid code.

IMHO, the simplest path to obtain cross-browser compatibility is to generate valid code. As help, you can use the on-line W3C HTML validator or whatever equivalent tool your IDE provides.