Code works fine when offline, however when I upload it to the site the images for the social media buttons don't show, on further inspection the code being overridden by the browser
it looks like:
<img src="images/facebook.png" class="socialbuttons" alt="find on facebook" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;">
instead of:
<img src="images/facebook.png" class="socialbuttons" alt="find on facebook">
for the images. I've tried using different images, changing the class to something else and viewing on other browsers.
I tried to override it using !important but that doesn't work either.
The address of the site is
http://markncarolproperties.co.uk/
stack overflow won't let me post images, imgur links instead
https://imgur.com/a/WZieW
Simple solution is:
customize your adBlock
add your website to the "Show ads on a webpage or domain" list
I use Chrome with adblock and the images come up just fine. If it is still an issue, try changing the names to something simpler like FB.png ?
Without being able to replicate the issue or see it as it is working, I cannot even use Chrome's Inspect Element tool.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
I think .custom-logo class is as specific as it gets for the logo image. But even whilst using !important, the logo is not only not aligning how I want it to, also the inspector is still showing the margin-left: 650px; that I used previously to adjust the position of the logo (this was only meant to be temporary until I would have figured out how to align it properly, which I didnt). See CSS Code, HTML code and the picture of my website:
.custom-logo {
width: 350px;
height: 350px;
margin-left: auto !important;
margin-right:auto !important;
display:block;
}
<img width="719" height="719" src="http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2.png" class="custom-logo" alt="<-MattmArt->" itemprop="logo" srcset="http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2.png 719w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-150x150.png 150w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-300x300.png 300w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-100x100.png 100w" sizes="(max-width: 719px) 100vw, 719px">
Picture of my child-css style sheet and the inspector
While your CSS shows that .logo has margin-left: auto; and your dev tools show that the style still holds an old value the problem lies within your cache.
Since you are using wordpress you probably have a cache plugin. You will need to clear the cache from the plugin, then clear the cache from the browser.
If you are using a CDN like cloudflare you may need to clear that cache as well.
Also note that some hosts like SiteGround have some very strong caching built into their servers so you may need to clear that out as well.
Sometimes you can view the page in incognito mode or use a different browser.
Hope this helps.
Try restarting your local, and hard refreshing if it has old styles still applied.
So I have multiple <img> tags in a page. When I set their source to something random, they show up correctly, but when I feed them some specific URLs, for example:
http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg
images just disappear (they have fixed width and height from CSS file) and some mysterious attributes automatically are added:
<img src="http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;">
Original img doesn't have any inline stylings and there is no any JS script running in the page. The question is why that is happening, whether remote image can force image tag to have some attributes and how to prevent that.
Perhaps you are using a browser extension that is re-writing certain image tags?
Try completely disabling all browser extensions and javascript and see if it still happens.
I've tried several times and several ways, but can't figure this out. The below set of images load perfectly in non-firefox browsers, but ALL of them are invisible in firefox. If I bring up the document inspector and hover the mouse over the url, the images pop up for only google and email (which are the only two that don't have that weird class on them).
So I guess the question is: why is firefox adding a weird class to my images (just these, all others on the page work fine) and why don't any of them show up in this area?
<div id="share_icons">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png" id="share_facebook">
<img src="http://localhost:80/graphics/share/google.png" id="share_google">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png" id="share_pinterest">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png" id="share_tumblr">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png" id="share_twitter">
<img src="http://localhost:80/graphics/share/email.png" id="share_email" pop="Send a link to this list to friends via e-mail. <b>Note:</b> recipients must already be users of the site or your view settings must allow public views for them to see it!">
</div>
Here is the calculated CSS of the #share_icons area:
#share_icons {
width: 150px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
* {
border: 0px none;
margin: 0px;
padding: 0px;
font: inherit;
vertical-align: baseline;
-moz-box-sizing: border-box;
}
Another thing I noticed, when I click on any of the images in this area, the pop up box for the inspector which usually hovers over the element where it is on the page is at the top left of the screen as if the images are all off screen somewhere.
Already tried clearing the cache completely. Also tried manually loading the image urls in Firefox and the images load and display fine if I do this. I've also moved the image tags to other places on the page to make sure this isn't a nested CSS thing.
Sorry to jump in so quickly, but I noticed something odd and FINALLY discovered the reason. Adblock was blocking the images most likely because I had accidentally clicked it and filtered it out.
I'll leave this question because it may be helpful to others.
Disable AdBlock for that current page you load. Image gets displayed after refresh. I just tried it and it is working.
On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.
I don't want to use JavaScript to preload images. Are there any good solutions?
HTML5 has a new way to do this, by link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.
Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch
UPDATE
If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
That's all, image used you can see below:
(source: margonem.pl)
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/
A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.
You could use a hidden div to put images in. Like so
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
<link rel="preload" as="image" href="..." />
This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)
Reference your images in invisible img tags. while page loading they will downloaded too.
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.
Before:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
After:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.
Can't you add them as an <img /> tag to your page and hide them using css?