This is my code, though Firefox added weird classes to each for some reason:
<img id="share_facebook" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png"></img>
<img id="share_google" src="http:/localhost:80/graphics/share/google.png"></img>
<img id="share_pinterest" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png"></img>
<img id="share_tumblr" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png"></img>
<img id="share_twitter" class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png"></img>
<img id="share_email" src="http://localhost:80//graphics/share/email.png"></img>
In Chrome, this works as expected, but in Firefox, the images don't show at all. When I click on them with the document inspector, there's a grey information box that shows at the top left of the screen which suggests that the images are outside of the document or offscreen or such.
There's no special styles on these and I've even tried moving them outside of all the content of my page and putting them right below the BODY tag as well as removing the weird extra class values that Firefox adds, but at best the Google and email images show and none of the others.
Hovering over the image source address in the inspector shows a popup image for Google and email and the rest say "could not load the image". If I cut and paste the value and load it in a new tab, I can see the image fine.
I cleared the cache for "all time" for every category and still nothing. What is going on!?
For anyone else who runs into this question like I did, it was answered here.
The short answer is: Adblock.
Related
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
Using image sprites, not a problem, being doing it for years. But I've just noticed that they have stopped working on chrome when using an "img" tag with a "src" referencing a 1x1px transparent gif (spacer).
I use this spacer/method so that I still have alt text available for screen readers, etc. Just using a div or span tag is not really an option, I need to use the image tag.
Example CSS for the sprite:
.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}
Example implementation of the html:
<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>
I know this is all working fine (nothing wrong with paths, etc) as it's working on all other browser, but in Chrome nothing is being displayed, it's like it is seeing the 1x1px "d.gif" and using that as the image, but taking the width/height of the sprite from the CSS (using the chrome inspector). Also using the inspector in chrome I can see that it's got the sprite image, it's loaded, it's just being superseded by the 1x1px gif.
Sample live URL: goo.gl/1c9nIF
Top of the RHS column the "print" icon is missing
Just above the google map the "Other interesting pages - what will you look at next" box is full of empty images
Footer is meant to have 4 "follow us" round social icons
etc
Driving me nuts, I've got empty css sprite slots all over my live site... not what I wanted to see on a Saturday morning :-(
Anyone know anything about this? I've checked on three different computers, cleared caches, etc, seems like chrome is broken...
The problem seems to be your image. I'm not sure why, but when I replace your image src with https://pingviin.org/images/flags/blank.gif it works as expected. Maybe whatever you used to create the gif put some strange meta tags on it?
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
I have a page that is generated by ajax/jquery at http://chainery.comoj.com/test.html. That page is the html generated by http://chainery.comoj.com#anklets. The problem is the product image is not being displayed. I think my problem lies in the css as neither the ajax page nor the html page show the image to the left of the product description. The link and image appear to be there in explorer's dom but just not showing. Everything does show in FF and safari. Also IE is not displaying any errors, that I can see.
Thank you for any tips or solutions,
Todd
This is a pretty unique issue, but I think I know what the cause is.
If you look at the generated source on your page, the img tag that you're having issues with reads exactly like this:
<img class="itempic" src="images/products/anklets/thumbnails/SSA-40_thumb.jpg" alt="Ravina - Ravina - A hana-gusari anklet" title="Click image for larger view" height="" width="">
If you look at that you'll notice that the height and width attributes are both set to an empty string (""). I'm guessing that Firefox is generously ignoring those attributes and IE is cruelly applying them. Meaning that in IE the height and width of your image are 0, since that's the closest numerical value that IE can derive from "".
Try changing whatever it is in your script that creates that tag to either set a height and width that is appropriate, or to not add those attributes at all.
I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
This markup may look a litte strange to you, there's a few things you should know:
I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure.
Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.
All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image:
It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags > <p></p> this is what happens in Chrome only:
Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.
Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:
Edit: link to live page removed, was only temporary for problem inspection.
I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you'll see it's supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.
You can read more about flow content here
As of Chrome 10, your site may be even more messed up.
In Chrome 9 (and Firefox 3.6 and Opera 11), <figure> has no margin.
In Chrome 10, it has margin:1em 40px;
In Firefox 4 RC1, the margin looks similar, but I'm not sure if it's the same - Firebug Lite doesn't list the margin.