HTML script shows different on my browser - html

When I uploaded the html & css parts into webhost, on my browser (Google Chrome) didn't show all of the page, so I deleted cache, media, everything.
Tried to enter again on the website, still wasn't loaded all of the page.
I enter to website by Mozilla, page was there, full loaded.
Asked my friend to enter by chrome to my website, page was full loaded
I tried to enter again by chrome to website, page wasn't full loaded.
Restarted my pc, tried again, page wasn't full loaded.
But why?
That's how only I see from Chrome
That's how everybody sees even if it's from Chrome or another browser
Missing code :
<div class="banner">
<div class="container">
<div class="banner-main">
<div class="col-md-6 banner-left">
<img src="images/ba.png" alt="" class="img-responsive">
</div>
<div class="col-md-4 blc-layer3-grids-3 simpleCart_shelfItem">
<span class="bann-heart"></span>
<h2>OFERTA SPECIALA ! </h2>
<hr> <br>
<h1>Reducere MAJORĂ LA <font style="color:red">UNIVERSAL GAIN FAST !</font></h1>
<hr>
<h2 class="item_price"><strike>$200.00</strike></h5>
<h2 class="item_price"><strong>$100.00</strong></h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>

I had some similar issue but then i realised that was due to cache.
How i found was, i re-uoloaded the file to another directory and everything worked fine. Sometimes chrome is a bad guy with cache issue.
Probably try deleting cache again or reload the page with shift pressed several times.

Related

Images do not show on Desktop, only mobile

I have a website that has multiple retailer images showing, and these are affiliate links. The issue I have is when I view on a desktop, even with cleared cache, cookies, and other browsers, I can see all retailer images, however when I am speaking with users of my site, they can not see images on desktop only mobile.
The website is www.yourshoppingcentre.co.uk
I have a used the same code through the site to make it easier to add more retailers in the future, and an example can be found here:
<div class="card" style="border: None; padding-top: 5px;">
<div class="thumbnail center well well-small text-center">
<!-- START ADVERTISER: Kelsey Media from awin.com -->
<a rel="sponsored" href="https://www.awin1.com/cread.php?s=3105047&v=19854&q=433993&r=1052665" target="blank">
<img src="images/advertisers/kelsey_media.jpg" >
</a>
<!-- END ADVERTISER: Kelsey Media from awin.com -->
<div class="card-body">
<div class="span12">
<div class="thumbnail center well well-small text-center">
<!-- <button class="btn btn-primary mb-2">Add to Favourites!</button> -->
</div>
</div>
</div>
</div>
</div>
One user has shown me a console screenshot where it shows the images have CSS of Display: None !important;
However again when inspecting the site myself I do not see this CSS and have no concept of how they are seeing this.
So I am guess I am asking a couple of things here, is this issue replicable, and secondly, if so, how to solve, as it is affects a subset and not all users is my understanding.
Appreciate any help!
Thanks!
It's blocked by your adblock probably.
You can see that in your inspect tool :
The images are being blocked by an ad blocker on desktop. If your users disable their ad blocker, the images will show on desktop.
To resolve this, you might consider changing the URL you're using for those images.
Specifically, it seems that uBlock Origin doesn't like advertisers being in the image url.

Images not appearing after Firebase deploy?

I am updating my online portfolio with a new website (I grabbed a template off Free-Css.com). When I preview it, it works fine. Once I deploy the website via Firebase, none of my images appear.
All of the images are in the public folder, which is where my hosting is set to. Here is an example of one of the images:
<div class="col-md-6 about-img-div">
<!-- <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div> -->
<img src="Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
Even if I use the pull pathname, the images still do not appear. Please note that they do appear if I just open the HTML file, but not while deployed. What am I doing wrong? Here is the website: https://evanmny.com
I'm not sure how you create/generate the HTML, but when I look at the network tab when loading your site in a browser I see it tries to read this URL:
https://evanmny.com/Users/evanmullen/Public/city.jpg
That should be:
https://evanmny.com/city.jpg

Scrolling performance

I have an example that contains some elements. When i scroll so fast elements not showing and slowly loaded. Is this bug or any other problem ?
My html structure:
<div class="site-header">
This is site header
</div>
<div class="site-content">
<div class="wrapper">
<div class="item-container">
<div class="wrapper">
<div class="image-container">
</div>
<div class="title">
<span>Hello World</span>
</div>
</div>
</div>
</div>
</div><!-- End of content -->
I created a example. Here is the link. You need to check it with a mobile device.
It's not bug. When you are trying to laod image in browser, for the first time, the browser will cache the image for faster laoding in next time. So for the first time it will take some time. If you want to load it faster try to use small size with good pixel ratio image (i.e compressed) , it will load faster when compared to normal one.
If you want read more about browser caching use this link.
Use Chrome lighthouse to check the static data performance(i.e images), check here.
let me know if this works

Internet Explorer failing to show elements

For some reason, my website (find-minecraft-servers.com) sometimes displays oddly in Internet Explorer. The number underneath Servers Listed in the green-ish banner sometimes fails to show altogether, like the image below, however when I check the source the number is in there, so it's not an error server-side.
This error is only occasional and appears on IE10. The site is using the Bootstrap framework. Here is the code for the Servers Listed and other statistics elements:
<div class="banner">
<div class="container" style="background: transparent;">
<div class="row">
<div class="col-sm-4 text-center whiteborder">
<h1>
<?php
// connect to mysql
require('includes/mysql.php');
$totalplayers = mysql_fetch_assoc(mysql_query("SELECT SUM(players) FROM servers WHERE suspended=0"));
echo number_format($totalplayers['SUM(players)']);
?>
</h1>
<h3>PLAYERS ONLINE</h3>
</div>
<div class="col-sm-4 text-center whiteborder">
<h1>
<?php $totalservers = "SELECT * FROM servers WHERE verified=1 AND enabled=1 AND suspended=0"; echo number_format(mysql_num_rows(mysql_query($totalservers)));?>
</h1>
<h3>SERVERS LISTED</h3>
</div>
<div class="col-sm-4 text-center whiteborder">
<h1>
<?php echo number_format(mysql_num_rows(mysql_query("SELECT * FROM votes")));?>
</h1>
<h3>TOTAL VOTES</h3>
</div>
</div>
<br />
</div>
</div>
Well seeing as the div that accompanies the <h1> also accompanies the <h3>, and you say that the h3 consistently displays; I'd hazard a guess and say that the problem lies exclusively with the CSS associated exclusively with the h1.
The only CSS that is directly associated with the h1 is
h1{margin:.67em 0;font-size:2em}
Now there isn't anything obviously wrong with this (and it validates fine) though is it possible that that 0 is triggering some strange quirk with IE?
Sticking the page through an IE6 emulator results in this:
Clearly broken - BUT the server number still displays.
FWIW font-size has been supported since IE 5.5.
So in summation: it is probably just you. If it isn't it is probably because some detail concerning the css (possibly that "0") has made IE go into a panic concerning the isolated set of rules, and do the equivalent of display:none. It is possible that there is some additional rule in your CSS doing odd things (the code isn't exactly setup well for maintainability). But I would say that that is unlikely.

Question regarding the use of iframes in Safari and Chrome's startup pages

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.