I'm using a HTML-form which target is an iframe. In this frame a PDF is generated (using TCPDF) out of the given data and should be displayed within the iframe. The problem is, that in webkit browsers like Chrome or Safari with built-in PDF viewers the PDF isn't displayed. Instead, a very dark gray background is displayed - at least sometimes. In some cases which I could not figure out it works. When I use Firefox with Acrobat it works, too. So the PDF can't corrupt.
Unfortunately, I can't deliver an example for my problem, but did anybody have those problems, too, and can help me?
Thx.
Related
I've just switched over a database for a front end website and some strange CSS is appearing under just one image, but I cannot find the CSS in the code, in fact i'm pretty sure it's not there.
This is looking at the code in browser using google chrome:
As you can see no CSS.
But in Safari:
Lots of CSS is added on the end of just this one image. The images are pulled from a database and displayed on screen, this was working before i switched the database over, and I can't seem to find it in the code:
As you can see it's not being added inline when it's echoed onto the page
My question is ... what could be causing this inline CSS to be added to this one image and is there anyway to find out where it came from?
If it safari on mac with retina display, some of the libraries can add styles to the image
As it turns out, the plugin ad blocker was blocking my image.
I have a site which allows users to enter a web address. The code goes and gets the favicon for the site and saves it. The favicon is then displayed elsewhere on the site.
This all works fine for all versions of Opera, FF, Safari and Chrome, but on any version of IE, it seems that only some show up. The code I'm using to show the favicon is simply:
<div class="pulledFavicon"><img src="img/favicons/amazoncouk.ico" alt="favicon" ></div>
The image definitely exists because you can see it show up on other browsers, but even if you visit the exact url in IE9 it acts like there's no such file.
If you visit the following two URLs on IE9 (or 8 or 7) and then any other browser, you'll see that the image shows up in everything but IE:
http://homestartpage.com/beta/img/favicons/simplybecom.ico
http://homestartpage.com/beta/img/favicons/scissorlabcom.ico
Strangely the one for Facebook works!
http://homestartpage.com/beta/img/favicons/facebookcom.ico
I can't for the life of me see what the difference is!
FYI the problem can be seen in situ at http://homestartpage.com/beta/
Fave icons with the .ico extension are a special kind of image file. They are not meant to be displayed inline with HTML. However, as you are seeing, some browsers have added support for it. Your best bet will be to convert/create the images in a more supported format to be used inline. See http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support for which images are supported in what browsers.
Here are some links to the same basic question:
.ico not dislayed in IE? is there any way i can show ico file in IE?
Display an .ico within an image element <img>
IE doesn't show .ico icons in HTML if not served as "image/x-icon"
I've been working on a site for a client, it's a WordPress site with Flexslider built-in to the theme. I am trying to get a slideshow of videos working, using VideoJS.
Inside the slideshow.php file, I have got it looping through the given slideshow posts and creating the necessary markup. It generates divs which contain the HTML5 video tag and gives it a unique ID. As the videos which are trying to be played are .mp4 format, and Firefox does not accept this, VideoJS should fallback to the Flash player - which it does, partially.
It seems that every other video on the slideshow works, and the others are left with an empty black box. Note: this is only happening in Firefox; Chrome, IE and Safari are fine, as far as I'm aware.
A live example can be seen here: http://churchcoalition.org/
If anyone has any suggestions for getting all the videos to work in Firefox, it'd be much appreciated.
Edit: It seems that now, none of the videos are working in FF, despite there being no changes to the code.
Regards.
You need to use plugins.Hope that will help you.
http://wordpress.org/extend/plugins/wpreso-video-featurebox/
http://wordpress.org/extend/plugins/captain-slider/
Not the neatest way of fixing it, but a fix nevertheless.
I checked the user agent, and if the Firefox string was matched, it would output an which used another Flash player, and if not, it would use the VideoJS code. I'm still not certain why the Flash fallback on VideoJS is not working, but this fix is working for me.
I am trying to make an image editor kind of page. Person can add text and styles to the background image. Everything i have done through HTML, Jquery and css, but struck up with export it to an image. I want to convert the particular div into image.
Note: I already know HTML to image conversion is possible through SVG and HTML5 Canvas. I cannot do those things because of browser compatibility.
If any PHP classes or jquery plugin is available please help me.
I think it is not possible without HTML5 features on the client side directly. May be I wrong?
My solution is to send the entire div (with styles) to backend server, where capture a screenshot with PhantomJS or Qt Webkit. On the server side you shoold open the DIV user created as it displayed in user browser and then make screenshot of this DIV.
I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.
Thanks for your help and time.
You must add this
html{-webkit-print-color-adjust:exact;}
To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.
Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)
<link rel="stylesheet" media="print" href="print.css">
The interesting part for the browser is media=print
You can find some more style commands for printing web pages here:
CSS How-to: Optimize Pages for Printing Using CSS
Printing a Book with CSS: Boom!
complete css guide - Printing
CSS Paged Media - #page Rule
You will need to include a print stylesheet, as detailed by Dan Lee. However that's only half the answer. The other half is that Chrome (and Safari) have poor printing options, and cannot print background-images, or background-colors. I had to figure this all out when trying creating a printable version of FullCalendar that used colors to differentiate between different types of calendar entries.
I include these directions for printing:
Firefox has the best print output, Internet Explorer is second.
You may want to turn on the Print Background option in your browser: In Firefox or Internet Explorer: Go to File -> Page Setup -> Check Print Background (colors and images)
Although Chrome and Safari will work, they do not have the print background options. It will be difficult to differentiate between the types of entries on the calendar.
If your page is simple enough, you can sub in actual <img>s instead, and use CSS to stretch and position them behind any text that might be in the div or td. That wasn't possible for the FullCalendar project I did, but it works fine on a simpler table. It's compatible with Chrome, Firefox, and IE, and doesn't require users to toggle a specific option to get the correct output.
This is as of Chrome 17.0.963.83 and Safari 5.1.4 on Windows.