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/
Related
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
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;
}
I have a slider on a homepage I am currently working on. I am trying to achieve a full viewport height that takes up the whole width for the screen.
The only way I can currently achieve this is by either stretching the image, or the image isn't centred.
The image needs to be aligned roughly centred horizontally and vertically, so customers can see the centre of the image on any width of browser, and without stretching the image out of proportion.
I have tried the background-size: cover; on the element with no success as its not a background img. the containers have 100vh currently, but the width is the issue.
The issue is located here http://joeybox.info/ . I realise with the menu and the logo above the image the 100 viewport height will rest under the "fold", however I am placing the logo and menu over the image eventually, once I have figured out the css.
I have tried many solutions found within the stack overflow forum and none work in my scenario.
My current css, after deleting the in-correct code, is:-
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
.ewic-wid-imgs {height: 100vh;
max-width: unset;
width: unset;}
.bx-wrapper img {display: inherit;
height: 100vh;
max-width: inherit;}
html=
<div class="slider-box">
<div id="ewic-con-385">
<div style="display: none;" id="preloader-385" class="sliderpreloader">
</div>
<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">
<div style="width: 100%; overflow: hidden; position: relative; height: 633px;" class="bx-viewport">
<ul style="width: 315%; position: relative; left: 0px;" class="bxslider-385">
<li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span></div>
</li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg">
<div class="ewic-caption"><span>Qw Direct Leather Keyrings</span>
</div></li><li style="float: left; list-style: outside none none; position: relative; width: 1349px; margin-right: 10px;" class="ewic-slider bx-clone">
<img title="Qw Direct Leather Keyrings" class="ewic-wid-imgs" src="http://joeybox.info/wp-content/uploads/2015/07/qw-direct-leather-keyrings.jpg"><div class="ewic-caption">
<span>Qw Direct Leather Keyrings</span>
</div></li></ul></div>
<div class="bx-controls bx-has-controls-direction bx-has-controls-auto">
<div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a>
<a class="bx-next disabled" href="">Next</a></div><div class="bx-controls-auto"><div class="bx-controls-auto-item"><a class="bx-start active" href="">Start</a></div>
<div class="bx-controls-auto-item"><a class="bx-stop" href="">Stop</a></div></div></div></div><br>
</div>
</div>
To achieve this you could add to your image inside .bx-wraper:
.bx-wrapper img {
display: inherit;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
max-width: inherit;
}
now you need to set the parent li to relative:
.bx-wrapper ul li {
position:relative;
width:100%;
height:100%;
list-style: none !important;
margin: 0 !important;
}
and change your parent ul:
.bx-wrapper ul{
width:100%;
}
I have solved the above by changing my image slider. My new slider plugin (Envoke Supersized) uses a background image and was easier to use background-size:cover; css. Although after this full viewport height on mobile widths didn't look good with my images so I used 40vh on mobile widths.
I would recommend anyone trying to do the same to ensure your image is a background image, or replace the slider with a static background image for small browser widths.
I have the following code on home page:
<ul id="slides1">
<li>
<!-- About-->
<div class="logo"></div>
<div class="sub1"> </div>
<img src="images/nadpisi/about.png" class="nadpis1">
<img id="i1" src="images/MiddleBg/first.jpg"/>
</li>
</ul>
Here I have logo in class=logo and div class sub1 has background image in css file:
.sub1{
background-image: url(../images/sub1/about.png);
width: 600px;
height: 100px;
position: absolute;
z-index: 7;
top: 270px;
margin-left: 490px;
background-repeat: no-repeat;
}
.logo {
background-image: url(../images/LOGO.png);
width: 229px;
height: 129px;
background-repeat: no-repeat;
position: absolute;
z-index: 10;
top: 80px;
margin-left: 490px;
}
When I open the page with Chrome, both these logo and sub1 background images are not displayed but image after them does display, but when I go to browser`s address bar and press Enter they display. What is the problem, can anyone help?
Your images are probably not being found. Most likly a problem with your paths. Check if the image loads in a developer console.
I'm trying to make some sliding captions, something like Mosaic, but lighter. Everything looks good in all major browsers (even if it looks slow in ie8), but nothing happens in ie7.
I'm testing with ieTester, and I have no idea if the bug comes from the software or from my code.
I'm sure you'll have some tips to help me improve it!
Thanks anyway.
HTML:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<div class="details">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet,…</p>
</div>
</a>
</div>
CSS:
.imgbox{
width: 204px;
height: 154px;
position: relative;
overflow: hidden;
float: left;
margin: 10px;
border:1px solid #999;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}
.imgbox img{
width: 200px;
height: 150px;
padding: 2px;
overflow: hidden;}
.caption{
display:block;
position:absolute;
top:104px;
height:100%;
width:100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
background: transparent\9;
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}
JS:
$(".imgbox").hover(
function()
{$(this).children('.caption').animate({top:0},"fast");},
function()
{$(this).children('.caption').animate({top:104},"fast");}
);
Your HTML code is invalid. The a element is an inline element, and it can't contain block elements like div. Browsers have different ways of dealing with incorrect markup, and might rearrange or ignore certain tags to create elements that are valid.
Put inline elements inside the link so that they are parsed correctly, then you can use CSS to turn them into block elements:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<spap class="details">
<span class="h6">Lorem ipsum</span>
<span class="p">Lorem ipsum dolor sit amet,…</span>
</span>
</a>
</div>
CSS:
.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }
There are also some hacks in the CSS code that might not all go down well with IE7. You can comment out some of them to test if they cause problems.
I found that it came from the position of the caption. I set a top position but didn't define any left or right position.
With that piece of code it now appears on ie7:
.caption{
display:block;
position:absolute;
top:104px;
left:0;
height:100%;
width:100%;
But it's still very slow on ie8 and ie7.
Anyway, problem solved!