I have a website that displays fine in chrome but not in Firefox.
This is chrome:
This is Firefox:
Three of the four main images are missing - oddly the 4th one displays fine, despite having identical code. the inspector shows the images are downloading successfully:
I have also cleared the caches, updated Firefox, etc., to no avail.
In response to the queries:
All images are served from digital ocean, not locally.
This is the css and html for the learn image and the smile image, of which the smile image appears in FF while the learn button doesn't:
CSS
.four_box {
position: absolute;
}
.four_btn {
cursor: pointer;
transition: all .7s;
}
.four_label_anchor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.smile_size {
height: 262px;
width: 326px;
}
.learn_size {
height: 263px;
width: 183px;
}
HTML
<div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;">
<img id="learn_btn" class="learn_size four_btn" style="
background: url(/static/img/swirl_home/chalk-btn.png);"
onclick="animHome(this.id);">
<div class="learn_size four_label_anchor">
<div id="learn_label" class="four_label">Learn</div>
<button id="learn_return" class="btn_href return_btn">
return
</button>
</div>
</div>
</div>
<div id="smile" class="smile_size four_box" style="top: 438px; left: 954px;">
<img id="smile_btn" class="smile_size center four_btn" style="
background: url(/static/img/swirl_home/bird-btn.png);"
onclick="animHome(this.id); homeSnapshots();">
<div class="smile_size four_label_anchor">
<div id="smile_label" class="four_label">Smile</div>
<button id="smile_return" class="btn_href return_btn">
return
</button>
</div>
</div>
I will reread the Firefox link
If you are displaying local images, can be the problem.
Use / instead of \ in the images URL will solve the problem
Otherwise, Mozilla has a general help page for such problem : https://support.mozilla.org/en-US/kb/fix-problems-images-not-show
Related
I'm trying to add a transition between pages in a SvelteKit application. When navigating, the current page should fade out, and the new page should then fade in in its place. To accomplish this, in +layout.svelte, I wrapped the <slot> in a div with the in and out transitions set. I wrapped this all in {#key $page.url.pathname} so that the animations are triggered when navigating from page to page. However, my current code produces this effect:
When navigating, the content of the page updates before fading out. In other words, the destination page immediately appears, then fades out, then fades back in. At the same time, though, content in +layout.svelte (.title, at the top of the page) behaves correctly; just the content within the <slot> is bugged.
Here is the code:
+layout.svelte
<script lang="ts">
import '$lib/style.css';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
</script>
<div class="page">
<div class="bar">
Sidebar
Page 1
Page 2
</div>
<div class="content-wrapper">
{#key $page.url.pathname}
<div class="content" in:fade={{ delay: 1000, duration: 1000 }} out:fade={{ duration: 1000 }}>
<div class="title">
{$page.url.pathname}
</div>
<slot />
</div>
{/key}
</div>
</div>
<style global>
.page {
display: flex;
flex-direction: row;
box-sizing: border-box;
width: 100vw;
min-height: 100vh;
}
.bar {
display: flex;
flex-direction: column;
width: 300px;
color: white;
background: black;
}
a {
color: white;
}
.content-wrapper {
flex-grow: 1;
width: 100%;
min-height: 100vh;
}
.content {
width: 100%;
height: 100%;
}
.title {
font-size: 2em;
}
</style>
+page.svelte
<div class="page">
<div class="title">Page 1</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: blue;
}
</style>
page2/+page.svelte
<div class="page">
<div class="title">Page 2</div>
</div>
<style>
.page {
width: 100%;
height: 100%;
background: red;
}
</style>
Is there a way to get the <slot> content to wait for the out animation to finish before updating?
Its an issue with the lifecycle of the transitions for in and out.
I usually use in:fade ONLY on elements and it looks okay. It seems using both means that while one element is going out, another is coming in at the same time in which looks funny.
Perhaps you could find out more about delay in transitions and let us know..
Happy coding☺️
I've made a JSFiddle explaining what I would like to do with slick slide:
<div class="slider">
<div>
<div class="absolute">
Blabla
</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
</div>
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
</div>
</div>
CSS
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
In short: The red box in the first slide is invisible because it's inside the slide that has overflow hidden. I need the box to be a part of the first slide only and move with the slide.
Can anyone fix the JSFiddle example so this works, that would be much appreciated.
I found a hack for this you have to set a margin-top or padding-top on each slide element.
.slick-slide{
padding-top:25px
//margin-top:25px also working
}
Working fine. Make sure red box should be position absolute & and each slider have position relative. so that your red box is belong to that slide only
.slider > div{
position: relative;
}
.absolute {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
background-color: #900;
}
Im using stickyfill (https://github.com/wilddeer/stickyfill) for stickying sidebar menu on scroll.
On safari and Opera it works perfect, but it doesn't work in Safari and Firefox at all. Could please someone help me to solve the problem?
Im using latest version of Wordpress (4.6.1) and Bootstrap (3.3.7).
Website url (Look left sidebar menu): HERE
JQ:
jQuery(document).ready(function($) {
$('#sidestick').Stickyfill();
});
CSS:
.sidestick {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.sidestick:before,
.sidestick:after {
content: '';
display: table;
}
.sidestick:after {
clear: both;
}
#media screen and (min-width: 768px){
.sticky-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
HTML:
<div id="content" class="site-content">
<div class="container">
<div class="row sticky-eq-height">
<div class="col-sm-3" >
<div id="sidestick" class="sidestick" style="top: 140px;">
Menu content
</div>
</div>
<div class="col-sm-9">
MAIN CONTENT
</div>
Resolve problem with changing plugin StickyKit (http://leafo.net/sticky-kit/)
I'm trying to add some text over an image. I've set the position of the image to relative and the position of the text is absolute. It's working completely fine in Firefox but not in Chrome.
All I see in Chrome is an image.
Can anybody help me out in this ?
My code:
<p class="call text-right hidden-xs tel">
Call: 1-800-378-7566
</p>
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />
this could help you.
added
<p class="call text-right hidden-xs tel">
<a href="tel:+18003787566" style="position: absolute;
top: 50px;
left: 10px;
padding: 6px;
background-color: #292D30;
font-size: 26px;
padding-left: 100px;
padding-right: 127px;
z-index: 999;">Call: 1-800-378-7566</a>
</p>
Added top and left position as well as added z-index.
See the example
http://jsfiddle.net/nanduh/wo2eyhp6/
I am trying to make circle divs with image links inside, the images are half the opacity and when hovered over they turn to full opacity (I'm doing that using jQuery). They work exactly how I want them to in Chrome, Firefox and IE, but they're acting really funny in Opera and Safari.
Here's a webdevout for the page:
http://www.webdevout.net/test?06
Here's the code that I have:
<div class="cSpan">
<h2 style="text-align: center;">Piercings</h2>
<div class="circle">
<img src="images/img03.png">
</div>
<p> view more </p>
</div>
and style
.cSpan {
display: inline-block;
width: 280px;
margin: -8em 3em 0 3em; }
.circle {
width:260px;
height:260px;
border-radius:50% 50% 50% 50%;
overflow:hidden;
float: left;
margin-bottom: 0.5em;
border: 10px solid #100000; }
.circle img {
margin-left:-50%;
margin-top:-50%;
opacity: 0.5; }
I've been pulling my hair out over this, so I hope I can get some help here, thanx! :)