Using Google Chrome, Safari and Internet Explorer with different computers in different places, certain links of my website don't work.
It seems that only Firefox makes them work.
For example, on this page:
My website
The icons of Facebook and Twitter on right-top of the page don't
work.
The text "Vai al sito di Medlavitalia" in the left sidebar doesn't
work.
The link "Forsafe Srl" beside "Facebook" doesn't work.
Link number 2's code:
<ul>
<li>Vai al sito di Medlavitalia</li>
</ul>
Link number 3's code:
<div style="float: left; clear: both; margin-bottom: 7px;">
<div style="float: left; margin: 5px 7px 0 0;"><img src="http://www.forsafe.it/wp-content/uploads/2014/11/facebook_icon.png" alt="facebook" /></div>
<div style="float: left;"><span style="color: #000000;"><strong>Facebook</strong></span>: Forsafe Srl</div>
</div>
I noticed that the only links that don't work are the ones that go outside of my site.
For example, if I edit link number 2's code like this:
<ul>
<li>Vai al sito di Medlavitalia</li>
</ul>
It works perfectly, because www.forsafe.it is my site.
More details, in case they'll help:
I'm using Wordpress.
I have the plugin WP Super Cache (I tried disabling it but nothing
changes).
I didn't try with mobile browsers.
What could cause this issue?
Thank you all!
EDIT: I just remembered that yesterday something strange happened: clicking on link number 2, it brought me to another page of my website, absolutely not connected with that link.
Problem isn't solved. I know that I can't ask again in a second topic, and I know that I can't do this too, but I really need to solve this and I don't know how else to reach your attention.
Solved.
It was plugin WP SlimStat's fault.
I tried disabling all plugins and I found out it was it.
Fortunately they've just now updated the plugin and fixed the error.
Related
<div class="MsgBody" style="width: 90%;align-self: center;margin: 3vh 0;flex-direction: column;display: flex;">
<div class="MsgRight" style="flex-direction: row;width: 50%;align-self: flex-end;justify-content: flex-end;display: flex;">
<div class="MsgSendContent" style="background-color: #9eea6a;border-radius: 5px;padding: 10px;word-break: break-word;flex-shrink: 0;display: flex;">
555 </div>
<div class="RightTriangle" style="margin-top: 8px;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 10px;border-color: transparent transparent transparent #9eea6a;flex-shrink: 0;margin-right: 8px;display: flex"></div>
<div class="HeadImg RightHeadImg" style="background-image: url(/img/testhead.jpg);height: 40px;width: 40px;border-radius: 5px;background-position: center;background-size: cover;background-repeat: no-repeat;flex-shrink: 0;display: flex;"></div>
</div>
</div>
In PC end, it runs well:
In the Chrome Toggle device toolbar, I tried all the device and all of them works well also.
Well, when I run the page in iPhone 6s with Chrome of IOS 13.1.2, it turns out to be this:
As you see, the message dialog does not render correctly and the input box in the bottom miss yet.
Then I tried the safari and the problem still here. What's more, I tried an android device which is android 9, the input box does not miss any more but the message dialog still does not render correctly.
The problem only occurs in the mobile device but not in the Chrome Toggle device toolbar. I can hardly know how to debug and solve it.
I should not only post a URL here but I don't know where is the problem.
Would you please help me to solve this and tell me why it doesn't render identical even I use Chrome in PC and Mobile.
Thank you.
This is happening because your page is not responsive
Integrate bootstrap ,so you don't have to write CSS files manually and use pre build classes with bootstrap grid to make responsive pages
There are several tutorials available for bootstrap I prefer you to go through them
My personal favourite is:
https://www.w3schools.com/bootstrap/default.asp
I have a very strange problem, i have a div with an anchor tag with an id in it, when i click on the anchor tag, it doesnt open the link in it, but if i right click it and open it in a new tab, it works perfectly, do you guys know why is that ?
here is my exemple :
<div class="toto">
<a id="tutu" href="https://www.google.com" >my cocorico</a>
<div>
cocorico
</div>
</div>
here is a jsfiddle: https://jsfiddle.net/mog8zf3t/5/
This issue is caused by using jsfiddle rather than your html.
The code runs in an iframe on jsfiddle and Google have specifically blocked you from being able to do this by setting 'X-Frame-Options' to 'sameorigin'
Either try running the code on your local machine or pick a different website which will allow you to display it in an iframe.
function go_to_href(href){
window.open(href,'_blank')
}
.toto{
background: grey;
color: white;
text-align: center;
font-size: 1em;
}
.toto a {
display:block;
}
<div class="toto" onClick="go_to_href('https://www.google.com')">
<a id="tutu" href="">my cocorico</a>
<div class="eps-Chip-content">
cocorico
</div>
</div>
Thank you all for your answers, i found the problem, and it was in my js, i had a event.preventDefault(); on the click of the anchor tag, and that's why it wasn't working. take it of and it works perfectly.
here is where i found my answer : https://api.jquery.com/event.preventdefault/
The reason is cause of frames and iframes. Two things.1 is same thing as #hairmot said. sameorigin.
But second reason is when you have your main site an https site like https://jsfiddle.net/mog8zf3t/7/ you cant have http links there. So you cant for example open an http://jsfiddle.net link on that page. So in real time usage you should consider both.
So in order to observe the reason this is what you can do. open inspect element on your browser go to console section. try to click on link and check the error.
for the fiddlejs code you provide the error is cause of same origin
problem ( the link you provide is not from same origin as the main
site).
In my case I had data-toggle="buttons" in the surrounding <div> which I discovered after a few frustrating hours. Posting as an answer as it may be helpful for someone.
I've looked everywhere and can't seem to find the code. Hopefully one of you can help!
I have a YouTube-subscribe button on my site and it's has a trouble. In microsoft edge, IE and all browsers it looks like the first link below but only in Chrome I see button correctly. (the second link below)
Here's a code of my button:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="NAME" data-channelid="ID" data-layout="full" data-count="default"></div>
http://i.imgur.com/7OfkESu.png
http://i.imgur.com/fR1UWkN.png
p.s sorry for my bad english.
All day long I am trying to find the source of the following problem.
I am using this HTML:
<div class="sharebox">
<a class="shlink tooltipS" title="trumpa nuoroda į šį puslapį" href="http://www.klaustukai.lt/5"></a>
<a class="shprint tooltipS" title="spausdinti" href="javascript:window.print();"></a>
<a class="shfb tooltipS" title="dalintis Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shgp tooltipS" title="dalintis Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shtw tooltipS" title="dalintis Twitter" href="https://www.twitter.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
</div>
with this CSS:
.shlink, .shprint, .shfb, .shgp, .shtw {
position:absolute;
display:inline-block;
background:url(http://www.klaustukai.lt/qa-theme/kt/elements.png) no-repeat 0 0;
border:0;
height:16px;
width:16px;
}
.shlink {background-position:-2px -250px;left:4px;top:5px;}
.shprint {background-position:-22px -250px;left:27px;top:5px;}
.shfb {background-position:-40px -250px;left:50px;top:5px;}
.shgp {background-position:-58px -250px;left:73px;top:5px;}
.shtw {background-position:-76px -250px;left:96px;top:5px;}
.shlinktxt {display:block;width:115px;margin-top:30px;}
.shlinktxt input {font-size:10px;color:#555;width:100%;}
where elements.png holds the graphics for the background. Nothing special, nothing fancy. And works for years in all browsers.
The weird thing: When I do a test in a separate test.html it works fine, even in Firefox 27.0.1. But having the exact same code in this forum: klaustukai.lt will not show the google plus button class .shgp.
This happenend after the last update of Firefox to version 27.0.1. Before it worked! This is why I think it might be a Firefox bug. In Chrome and Internet Explorer displaying the button works as expected:
Firefox 27.0.1
What I see from the Firefox developer tool Box Model is that the .shgp element has height:0 and width:0 - it also seems to have lost position, the indicator shows it now top left on the website.
I also tried to reposition the sharebox, I disabled javascript, same problem, it is always the .shgp anchor that fails.
When testing, I realized that if I save the HTML page locally and load it again in the browser, the button is displayed correctly. Even more confusing.
This is such a weird issue for me. Who knows what is causing this behaviour? And how can the .shgp anchor be displayed correctly?
Your help is very much appreciated.
Found the source of the problem!
The culprit has been the Addon Adblock Plus that is blocking the google plus anchor!
If you disable the addon the button appears.
Cannot believe... but now everything gets more clear. I installed Adblock Plus on Chrome and the button disappeared as well. Good to know that it is not a Firefox bug.
If you have ever used a new release of either Chrome or Safari, you know that when you add a new tab, the default screen is a grid like setup with your most favorite links sitting there waiting to be clicked on. What makes it even nicer is the graphical interface, with actual pictures of the websites they are representing.
I am looking to do something similar, how is it done? Are they simply iframes? iframes set with css? If anyone has any knowledge about the actual implementation of this seemingly simple festure, please share!! Thanks
They're just cached thumbnail images, that the browser made last time it visited the page. They're not real browser pages you can interact with.
To do it from another web page, you'd have to have your server fetch the page, render it and thumbnail the image. Or use a third-party service that does it for you. Either way, you're not going to get the exact same image a user would see, as they may have auth or settings your server is not privy to.
In Chrome, I can choose View Source (Ctrl+U) or use the Web Inspector (Shift+Ctrl+I) to view the 'New Tab' page. Those thumbnails are indeed screenshots of browser windows (and dynamically added to the DOM using JavaScript, so you won't find them when viewing the source of the page), as the source of such a thumbnail looks like (copied from Web Inspector):
<a class="thumbnail-container" tabindex="1" id="t1" style="left: 235px; top: 0px; " href="http://www.ns.nl/">
<div class="edit-mode-border">
<div class="edit-bar">
<div class="pin" title="Keep on this page"></div>
<div class="spacer"></div>
<div class="remove" title="Don't show on this page"></div>
</div>
<span class="thumbnail-wrapper" style="background-image: url(chrome://thumb/http://www.ns.nl/); ">
<span class="thumbnail"></span>
</span>
</div>
<div class="title">
<div style="background-image: url(chrome://favicon/http://www.ns.nl/); " dir="ltr" title="Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers">Dienstverlening voor iedereen die met de trein reist. › NS voor reizigers › NS reizigers</div>
</div>
</a>
I guess Safari does more or less the same, but I can't check this at the moment.
As far as I can see in Chrome, it's not done with iframes. It seems as though Chrome uses screenshots from an earlier visit. At least I haven't experienced that the background changed after I saw it the first time. So my guess is that the initial page in chrome is "custom" as in not Html.
As for Safari I really have no clue.