On our magento category pages, I have added a static block at the top. This static block contains 3 images.
The 3 images appear on Chrome and Internet Explorer. But on Firefox, none of the images show.
On chrome and IE, the code displays the 3 images and it looks like this:
<p>
<a href="">
<img width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="img3.jpg" />
</a>
</p>
But on firefox, it adds the class="qluzuqkroyuyuepwnuwm" on the img tags.
<p>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img3.jpg" />
</a>
</p>
I have no idea what that class is or why it gets added on there only on firefox.
Does anyone have any ideas on why a class gets added on firefox only, and why the images don't show?
Thank you.
God, I am an idiot.
Adblock was turned on and it blocked my images /facepalm
Really sorry everyone, I thank anyone who read this post or brief investigation.
Related
I've just tried the CSS code written by #ongtiffany on codepen.io about lightboxes.
The code is great, but if I use it on a standalone test (follows)
<body>
<a class="lightbox" href="#first">
<img src="https://drive.google.com/uc?export=view&id=1cKXuGQzX3t65NoYEKfuI4wBHwxUM9wjH"/>
</a>
<div class="lightbox-target" id="first">
<img src="https://drive.google.com/uc?export=view&id=1cKXuGQzX3t65NoYEKfuI4wBHwxUM9wjH"/>
<a class="lightbox-close" href="#"></a>
</div>
<a class="lightbox" href="#second">
<img src="https://drive.google.com/uc?export=view&id=1kLe9YXiM2XdgwKkATwkhfk6kzdnKIefi"/>
</a>
<div class="lightbox-target" id="second">
<img src="https://drive.google.com/uc?export=view&id=1kLe9YXiM2XdgwKkATwkhfk6kzdnKIefi"/>
<a class="lightbox-close" href="#"></a>
</div>
</body>
</html>
It leaves me a weird "_" symbol between the two pictures.
Can you see it? Any advice to eliminate it?
And one more question? What could it be a way to get a window closing by pressing the "ESC" key?
Try this
a.lightbox{
text-decoration:none;
}
OUTPUT
I'm having trouble getting my image link to work when someone presses the picture button, and I'm not sure why. It works on my phone and my computer, but it doesn't work on other people's computer for some reason. Please let me know what I need to do to get this fixed.
Thank you.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_top">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" /> </a></div>
</div>
The code should be like this, you don't need to set target while adding link to mailto, the code should be like this
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;>
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
The markup of your code is worng. May be it's the problem.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_blank">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
Is it possible to show /hide iframe when user clicks on a link? I've used it to show hide .jpg files but with an iframe it doesnt seem to work..
<h3><a onclick="wp_showhide.main(this, 'spoiler1')" href="javascript:void(0)">
["Show", "Hide", "invisible"]
</a></h3>
<div id="spoiler1">
<a href="http://www.newyorker.com/online/blogs/photobooth/NASAEarth- 01.jpg">
<img class="aligncenter size-full wp-image-56" alt="Image" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" width="1291" height="783" />
</a>
</div>
Please help
I have an instance of CKEditor running to edit small parts of a website. The original HTML is:
<div class="slide slideleft">
<a href="#" class="slidelefta">
<img src="img/left.png" alt="previous" />
</a>
</div>
<div class="slide slidemid noauto" style="height: auto; text-align: center;">
<a href="#" class="sliderighta">
<img src="img/main_item.png" alt="item" />
</a>
</div>
<div class="slide slideright">
<a href="#" class="sliderighta">
<img src="img/right.png" alt="next" />
</a>
</div>
now, when I load it into CKEdit (inside a <textarea>, all correctly encoded with PHP's htmlspecialchars() method), it replaces all my carefully crafted DIVs and styles with the following:
<p><img alt="previous" src="img/left.png" /></p>
<p><img alt="burg.ring1" src="img/main_item.png" /></p>
<p><img alt="next" src="img/right.png" /></p>
which of course totally ruins the page's layout. Can CKEditor somehow be set to not do that?
Thank you!
Since CKEditor 4.1 the Advanced Content Filter feature is enabled. You need to configure it in order to have your HTML passing the validation. See my previous answer here: CKEditor strips inline attributes.
I added some images and only the last two won't show up...maybe because it was naturally a smaller size?? I don't know...maybe someone here can help me....
Here is the part where i added them in my code
<div id="gallery">
<ul>
<li> <img src="images/studs/boss/thumbnails/boss0.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss0.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss1.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss1.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss2.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss2.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss3.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss3.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss4.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss4.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss5.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss5.jpg" class="pic" /> </li>
</ul>
</div>
the same thing you see online is the same thing I see when I access my site with local disk (my laptop where everything is stored)
i checked with chromes developer tools and I am getting "failed to load resource.." from the local disk.......like I am testing it on my computer before uploading...thats what I mean by local disk...if that is the right way to say it
this is my folder to show file structure...
The images don't exist:
http://www.saucysbulldogs.com/images/studs/boss/thumbnails/boss4.jpg
Going directly to the image will give you a 404.
The images images/studs/boss/thumbnails/boss4.jpg and boss5.jpg were not uploaded, my browser can't access them...