none of my other images render this way, but for some reason the link to twitter has an icon in the anchor that when rendered outside of PG has this inline style stuck in there.
i do not have this inline style ANYWHERE in any of my pages and i’m only using plain html from the get go… everything is there because I typed it… except this.
what is up with that? and how do i stop it from happening?
just to follow up with more of my investigation of this weird behavior… this is the anchor as rendered in firefox and only in firefox… opera is fine.
<a name="anchor" href="https://twitter.com/=====goo" target="_pg_blank"><img src="images/twitter.ico" class="soci" style="display: none !important;" hidden=""></a>
notice the inline style, !important, hidden and the target… these were ALL added at render.
in PG i left the target input box empty, as i do with many anchors, and none of them add this PG specific text… just this one. This is why i suppect PG doing this somehow, but only in FF.
and to make it more weird, it only does this when the .ico included in the label has the twitter logo… it doesn’t even matter what the file name or format is… if it has the twitter logo, it does this.
if it’s just some random pic or icon it renders as you would expect, no problems at all
WTF is going on here?
As a quick try I wasn’t able to replicate this in Firefox or Chrome. Are you using any framework, or just a plain HTML project?
the full site is now up over at … no frameworks, no JS
if you scroll to the footer the twitter icon does not show in my desktop version of FF, but it does show in Opera.
if it’s not showing for you and you inspect the twitter link element you should see the tag as i have pasted it above.
also if i just open the index.html on my desktop, it comes up in FF just fine… the icon shows. At first i thought it must be a server thing at my host, but it has the pg_blank thing in there and there should be no way for my host to know what software i used to create the website, let alone ADD markup to my html.
so it’s just weird.
What version of FF on what O/S? I’m running 70.0.1 on a Mac. Twitter icon and code shows correctly. Also tried safari and chrome with no problems. I don’t currently run Opera, but I could dig it out.
Update: dug out Opera - looks fine. Started up a virtual box running Windows 8 - On IE11 the site is seriously messed up - couldn’t see whether the icon displayed, but the code looked good.
Looks good on latest Firefox on Win8 - good icon and good code.
I don’t have a Win10 VM right at the moment to test.
Seems like something local to your machine? Try testing incognito?
i’m at 68.2.0 on win7
this browser comparability swamp is not worth wading thru
i can feel the leaches attaching already… it works on most browsers and the link is there, regardless so screw it
and thanks for taking the time to look at it for me, i appreciate it.
Looks fine to me on my Windows 7 machine running the latest Chrome browser.
UPDATE: SOLVED!
if you download the twitter icon from the official twitter source, you get a .png which i guess is a bit like a SVG in that its a vector graphic.
i found others were having trouble getting SVG to render properly in FF.
i tried making an .ico file from it, but that apparently doesn’t do the trick.
out of desperation, i made it into a .gif file and bam, bob’s your uncle.
works like a charm
i guessing because .gif images are raster images and cannot support the vector graphics data that was hidden in the file no matter what i called it or how i treated… some how FF knows it’s a twitter icon and just won’t show it for some Orwellian reason.
anyway, gifs for everyone!!!
.png files are nothing at all like .svg files. PNGs are bitmap graphics, just like .gif, .jpg, or .tif formats. They consist of pixels with various RGB values ranging from 0 to 255, as well as an alpha transparency channel (in the case of PNG24).
SVG files are basically XML text files that use code to describe the shape and color of the lines and fills. They are similar to files based on Postscript, like .eps and .ai files.
maybe the tighter compression of .gif scrambled something that FF was detecting, maybe a trademark code or something… i’m only speculating because it was so weird and it only happened with the image that looked like a bird… the one i’m SUPPOSED to use according to their long list of demands.
every other image i tired behaved exactly as i would have expected, and rendered in FF without issue… only the twitter icon gave me trouble.
Can you post the link to the troublesome image? I’d like to examine the file more closely.
i downloaded the icon from the twitter website…
i’m also looking into how ublock orgin and their social media filters might be playing into this phenom.
i noticed the distinct lack of social media links on many news articles from a variety of sites until i explicitly told ublock to ignore that rule.
still doesn’t explain the introduction of pg_blank into the rendered markup tho.
I use ublock as well. Can’t see how it could possibly affect PG’s code. I will take a look at the Twitter icon. You’ve piqued my curiosity.
there are 2 different social media specific rules in my FF ublock extension.
they did seem to be filtering the icon, but not the link (as they are supposed to and do on other sites).