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.
Related
Okay, guys.
I'm about to make a forum, but my logo is only shown half.
Here is what it shows: http://i60.tinypic.com/5widdy.png
Here it´s what it's supposed to show: http://i61.tinypic.com/14ihnk9.png
I set my imageset.cfg to 'img_site_logo = logo.png*260*100', wich is the right size of the logo, and i cleaned the cache of the theme. I can't figure out whats wrong with it, so i hope you guys can help me :-) The theme i use is called 'modestus'.
First, try the following. Right click on the logo and click "inspect element" or whatever your browsers equivalent is, then a window with the page HTML and CSS should pop up, showing you exactly what CSS is being applied to it. Try checking and unchecking fields in the CSS window to test the applied style values to see if one of them is causing the problem. Highlight parent HTML elements and then do the same thing to their CSS just in case. If one of these resolves the issue, then look at the file that is being called (should look something like common.css or styles.css) and go into that file (phpbb/styles/yourstylename/thatfile.css) and search for the target element the style was being applied to to find the problem area. Comment it out with /* */ on either side of the statement and then refresh your style sheet and clear your cache from the ACP to check that it worked. You will need to refresh the page the logo appears on once you've refreshed the style and cleared the cache to see the changes sometimes.
If that doesn't work, open your image into an image editing software and verify that there is no transparent or white space on the edges of the image. If there is, crop it out and re-save.
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'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.
I have a website which works fine in all browsers except in IE6. The pages content is inside a div loaded with a background image. The page layout gets very nasty and image does not load when the page is opened for first time, but when the same page is opened for the second time and any subsequent times, then it loads perfectly. This scenario is with every page in the site.
Please help.
You might be suffering from FOUC. (Flash Of Unstyled Content) whereby IE6 for whatever reason isn't rendering your content correctly on the first load. (we would need to see sample code or a URL to determine why)
The 2nd - Nth reloads may work well once some of the content is cached by the browser.
updates
Ok, now seeing the site a few more details. The div that loads the new content is floated over an animated flash background... and the divs appear to use a png image background with transparency (IE6 doesn't support PNG Alpha (the part that does transparency)) thus IE loads an ugly image first, and then it looks like you have a hook in there to swap it out with a filter in IE. (I'm kind of guessing at the moment as the PC I'm on with IE6 is rather slow and the flash appears to be very cpu intensive)
Since this PC is slow, I see the text/form content load before the background image... I'm wondering (if you are applying a filter in IE6, if that is being executed before the image is fully loaded and thus the end result looks odd) but due to browser caching, the 2nd/Nth loads are ok?
I need to dig a bit deeper, but I don't have all the tools I need here. Hopefully later today I can check this out a bit more (or someone else will)