I installed a template on blogger, but it's not showing the background image.
in the main blog here you can see that there is no background image (the orange one)
now visiting this one which is the blog I do test the template on first, shows normally the background.
the weird result is that if you go back to the first website now and refresh it, the background will be shown??
how can that happen between 2 different domains? they both reference the same image but why it loads on website1 only after loading website2?
this is the CSS associated
#body_top {
background:transparent url(http://4.bp.blogspot.com/_66wIGDjagHk/Sh1HpWevpII/AAAAAAAAAeo/L2BR0NJ6kB4/s1600/bgr_body_top.png) no-repeat scroll 0 0;
width:100%;
}
Maybe some resource takes extremely long to load? Then visiting the second site causes it to be loaded to a cache - which acts as a reordering.
I'd suggest inspecting this behaviour with firebug - Network tab.
EDIT: weird, the firebug shows that server responds with 404
Appears like HTTP and not CSS bug. The server responds with 404 when connection is already open (keep-alive issue?) and returns the image otherwise.
OK, it's the referer. It should be blogspot.com subdomain.
Maybe blogspot has some sort of file size limit which disallows hot-linking of large files from other sites. The background_top seems somewhat larger than other files.
Here, look at blogspot.com referrer restrictions: http://www.google.com/support/blogger/bin/answer.py?answer=57527
Related
I am working on an e-commerce site and the product images are NOT visible on the live site but they are visible on my local development version even though I am using an exact copy of the code and database. What is even weirder is that when I open the developer console and look at
- the source code for the images is there and also the preview of the image is correct which tells me that the image is loaded correctly it must be something else.
Also, the only difference between the development site and the live site is that the live site runs on SSL, so I guess the problem could be related to that but I have no idea what it could be - the image urls start with https.
Here is an example page where the images are not visible.
Also, to mention the website is build with WordPress and WooComerce, custom theme.
EDIT: For some reason the images are no longer visible on the local version as well.
One of the parent elements / ancestors of the image (in single product view) is a DIV which has the class attribute woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images and a style attribute which contains opacity: 0, i.e. completely transparent, therefore it remains invisible
So you have to find where that opacity setting is added and deactivate it. (Or if it's static, simply remove it from the HTML tag)
http://shapeandslim.com/
If we drag it through the chrome it show that it is responsive, also i have checked it in iphone5 safari, it works fine as well but when we try google mobile friendly test it just fails, only home page fails while rest of the pages successfully passed the mobile friendly test. Also the preview that it shows on google test page it seems like that the css is not being used. whats seems to be the problem here and how to solve it.
I had these same problems. I found that I had a robots.txt file that was prohibiting crawling of the folder that contained my bootstrap CSS files, so it wasn't rendering correctly for crawlers. I changed all of my fonts to ensure they are at least 16px. I also added the following to all of my images: class="img-responsive". I hope this helps!
From Google Webmaster FAQ
I have a great mobile site, but the Mobile-Friendly Test tells me that my pages aren't mobile-friendly. Why?
If a page is designed to work well on mobile devices, but it’s not passing the Mobile-Friendly Test, the most common reason is that Googlebot for smartphones is blocked from crawling resources, like CSS and JavaScript, that are critical for determining whether the page is legible and usable on a mobile device (i.e., whether it’s mobile-friendly). To remedy:
Check if the Mobile-Friendly Test shows blocked resources (often
accompanied with a partially rendered image).
Allow Googlebot to crawl the necessary files.
Double-check that your page passes the Mobile-Friendly Test.
Use Fetch as Google with Submit to Index and
submit your updated robots.txt to Google to expedite the
re-processing of the updated page (or just wait for Google to
naturally re-crawl and index).
Source https://googlewebmastercentral.blogspot.dk/2015/04/faqs-april-21st-mobile-friendly.html Question 6
The reasons according to Google as to why your site is not mobile friendly is because of the following:
Content wider than screen
Links too close together
Uses incompatible plugins
Another reason could be that:
This page may appear not mobile-friendly because the robots.txt file
may block Googlebot from loading some of the page's resources. Learn
how to unblock resources for Googlebot.
Google is Rendering your website as follows, I suggest checking the cache and CSS files accordingly. Make sure the view does now exceed the size of the screen
Check the link here for more insight on your page and how to fix it
To start off, I have searched google & SO (Images are showing up as red x's on IE, shows up fine in other browsers), tried out the suggestions, but they did not resolve my issue.
I am trying to create a transparent image by following the code shown at: How do you Draw Transparent Image using System.Drawing?. I am using a 3rd party mapping control "Simplovation"
However, this is what I get when I run my webpage:
How can I get the actual image to appear?
I tried converting to RGB, but no luck.
Based on the code in "How do you Draw Transparent Image using System.Drawing" the actual image should appear like:
There could be a long list of potential problems here, let's address 3 of them:
Permissions
You imply that you are creating this image from code. How are you doing that? If the IIs worker process, running in the user context of the application pool account, is creating this image, does it create/save it to a location that is accesible anonymously? (or whatever your authentication model is)
File locked?
Again, since you are implying your are creating the image from code, to you close the file handle properly?
Path.
You say that the image Url is correct, but are you really 100% sure? Press F12 on IE and use the developer tools to determine if you get any type of HTTP error when IE is trying to request the image.
IE is very specific about the image type and actual image content. In other words, IE cannot display if image type and content doesn't match.
For example, renaming just file extension - bmp to gif - doesn't work in IE, although it is not an issue in other browser.
Easiest way to check is to browse that page in other browser. If you can see image in other browser, you can make sure that image format is not correct.
When attempting to share a page on FB, many images seem to only appear AFTER running the page that contains the image through the debugger first. Additionally, the debugger seems to throw different errors for the same page in some cases, even though I've made absolutely no changes to the page. Sometimes it tells me the image url cannot be found, and after clicking on "Scraped URL:" or "Graph API: the image url is found and the image then appears in the debugger?! However, nothing seems to happen consistently and it is very difficult to replicate these issues.
I tried unsuccessfully to post the code here, however, I'm using a modified version of a script provided by Chad Von Lind (http://vonlind.com/?p=539).
Sample pages (that did not display an image until after they were submitted to the debugger):
http://greatmomentsinparenting.com/photos/warning-parents-keep-out/
http://greatmomentsinparenting.com/photos/12-hours-in-a-car/
I don't understand why the images appear sometimes, and not at other times. Is it a caching issue? Does it take time for the image to show up in the cache for a newly published page? Can I force FB to cache the image on the first try? Or is it because I'm using a dynamic image url? And by the way, the image sizes are 203x203 pixels.
Thanks!
It's media temple. I have been working with them for weeks to fix it.
Facebook 503 502 Same html different servers different results
I'm working on a website, and I wanted to show it to someone. So I set up a webserver. Now I'm getting some strange behavior when I'm trying to reach the website via LAN instead of using my localhost.
First of all, when I visit the page in my localhost, everything seems to be rendered much smaller. I designed the page at a width etc. because it looks good. Now when I visit the site it fills up the whole page.
Secondly, I'm using #font-face for the titles etc. This works on my localhost, but not when I visit the page via my network.
And last, when I visit the page on my phone (using 3g, so not my home network), the css is not rendered at all.
Can you explain this strange behavior?
This has got to be that some of the stylesheets are not getting delivered when you view over the LAN.
When you look in Firebug NET tab (or similar) can you verify that all the stylesheets are being included and loaded (no 404s).
Also, if you look at the element that should have a font-face (for example) set, and check its styles, what is being applied? Is it that the styles are not there, or are they there and not being applied as you expect? (I am thinking the former).
Everything is working now, except for one thing. My phone only shows
the right font for only the capitols. Any ideas on this?
If you look at the text with incorrect font in DOM inspector, does it show that the style is being applied?