I am working on some buttons. I want to have a rollover state and I have this in an image in a div with overflow:hidden to hide the state that's not active. It works sometimes but sometimes it looks like this:
The weirdest part is that when I try to use the Chrome Web Inspector it fixes itself! And nothing looks weird in the HTML/CSS.
I'm super confused as to why it isn't consistently either broken or working.
Here's the HTML:
<div class="hunting_card_button">
<div class="hunting_card_icon" id="gift_to_friend">
<img src="/images/icons/friend2.png?1" />
</div>
Friend
</div>
And the relevant CSS:
.hunting_card_button {
width: 65px;
overflow: hidden;
display: inline-block;
text-align: center;
margin: 0 2px 0 2px;
}
.hunting_card_icon {
position: relative;
right: 0;
}
.hunting_card_icon:hover {
right: 65px;
cursor: pointer;
}
The solution was to change one of its containers to a div from a span.
Related
I'm seeing some interesting z-index behaviour on iOS.
My sample code can be viewed here: https://jsfiddle.net/59mo8s16/4/
I need the #sidebar to be displayed in front of the #slide-in-tip. This is the case when viewed on Chrome (PC and Android) and Firefox (PC). However, on iOS Safari and Chrome, #slide-in-tip appears in front of #sidebar.
I've realised that removing -webkit-overflow-scrolling: touch from the CSS makes it appear as intended across all platforms/browsers. However, I need this in order to provide momentum scrolling for the #container div on iOS. Without it, you get that scrolling that stops as soon as you stop swiping, which provides a terrible user experience.
Any ideas on how to resolve this one? Ideally I'd like a CSS-only solution. Any significant restructure of HTML will cause me some major pain at this point. The sample is a really stripped back version of an already-complete website.
HTML:
html,
body {
height: 100%;
margin: 0;
-webkit-overflow-scrolling: touch;
}
#top-bar {
top: 0;
width: 100%;
z-index: 200;
background-color: green;
height: 85px;
position: absolute;
}
#sidebar {
float: left;
padding: 30px;
background-color: pink;
position: fixed;
width: 310px;
left: 0px;
z-index: 150;
top: 85px;
bottom: 0px;
padding: 0;
padding-bottom: 50px;
}
#container2 {
min-height: 100%;
}
#main {
padding-right: 20px;
height: 100%;
margin: 0;
margin-left: 10%;
line-height: 40px;
text-align: right;
}
#container {
height: 100%;
margin: 0;
position: absolute;
width: 100%;
overflow-y: scroll;
}
#container2 {
padding-top: 75px;
}
#slide-in-tip {
position: fixed;
bottom: 0;
text-align: right;
width: 100%;
z-index: 140;
background-color: blue;
height: 200px;
}
<div id="top-bar">
top-bar
</div>
<div id="container">
<div id="container2">
<div id="sidebar">
sidebar
</div>
<div id="main">
long content - see js fiddle for actual long content
</div>
</div>
</div>
<div id="slide-in-tip">
slide-in-tip
</div>
The documentation offers an explanation for the behaviour you're seeing:
touch
Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
Since you cannot destroy a stacking context after creating one, an element outside of a stacking context cannot interact directly with elements within that stacking context, and you cannot move elements between stacking contexts without moving them physically, you won't be able to work around the stacking issues without restructuring your physical HTML.
Having said that, you shouldn't have to make significant changes to your structure. The best you can do is simply move #slide-in-tip into #container2 as a sibling of #sidebar and #main (where exactly you place it doesn't matter, as long as they are all siblings). For whatever reason, though, this seems to cause severe flickering on scroll in the simulator — I don't have a physical device to test this on, so you'll want to test this thoroughly.
The only CSS-based workaround I can offer is to shorten your #slide-in-tip by giving it a left offset equal to the width of #sidebar. Note that you have conflicting padding declarations in your #sidebar rule such that the width of #sidebar is actually 310px, not 370px. Unfortunately, if portions of #sidebar are transparent and you want #slide-in-tip to be seen through those transparent portions, this will not be an option either.
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
I have the following CSS:
.views-imagematrix-block .views-field-title .field-content > a .promotedstar {
position: relative;
top: -6px;
}
.promotedstar {
background: url("../img/icons/Star.png") no-repeat scroll 0 0 transparent;
font-weight: bold;
height: 25px;
padding-bottom: 10px;
padding-right: 25px;
position: relative;
top: 0;
width: 25px;
}
And the following html:
<div class="views-field views-field-title">
<span class="field-content"><span class="promotedstar"></span> Gershwins Coffee House</span>
</div>
This gives the full desired effect in Firefox, however in Chrome... It shows the span as being outside of the div (to the left), and doesn't show even with overflow: visible; set to the containing divs. (the span doesn't take the padding it seems). I don't know how to remedy this...
It looks like a Chrome bug.
I think it relates to the fact that the SPAN is empty, I found in chrome issue tracker some related bugs
Actually i have a progress bar that use text-indent to put some text in the middle of progress.
all work fine in Chrome and IE, but isn't in Firefox. (yeap, i can't believe it)
Check the difference in Chrome and Firefox.
http://jsfiddle.net/ZGyaz/1/
animated version
http://jsfiddle.net/ZGyaz/19/
HTML
<div class="container">
<div class="bars bar1">sametext</div>
<div class="bars bar2">sametext</div>
</div>
CSS
.container{
border:1px solid #09c;
height: 20px;
width: 100%;
position: relative;
}
.container .bars{
text-indent: 45%;
position: absolute;
top:0;
font-family: arial;
color: #09c;
}
.container .bar2{
background-color: #09c;
width: 50%;
color: #fff;
overflow: hidden;
}
Width in bar2 and text-indent are dynamic vars to show the expected result on fill the progress bar.
This looks like a previously unreported Gecko bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=908706
As a workaround, are you able to use a text-indent value that's not a percentage?
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>