I'm not sure what's going on here. In Firefox and Chrome, this works as it should, but not in IE. I have a fixed div (firstdiv) that reveals another div (hiddendiv) upon hover. And that div should remain visible as long as either div is being hovered on. However, in IE it's disappearing when you hover over it. Why is this?
I've tried experimenting with different z-index values and positioning, but I can't see why IE isn't handling this properly.
.firstdiv {
background: red;
position: fixed;
left: 10px;
bottom: 10px;
height: 50px;
width: 50px;
cursor: pointer;
z-index: 1110;
}
.hiddendiv {
background: blue;
position: fixed;
bottom: 60px;
height: 40px;
width: 244px;
display: none;
cursor: pointer;
z-index: 1200;
}
.firstdiv:hover + .hiddendiv {
display: block;
cursor: pointer;
}
.hiddendiv:hover {
display: block;
cursor: pointer;
}
<div class="firstdiv"></div>
<div class="hiddendiv"></div>
When I check in IE, it is working fine.
Not sure which version you are using. Not sure your actual code is the same as the example code you provided here.
Anyways, The below code may help you.
.firstdiv:hover + .hiddendiv:hover {
display: block;
cursor: pointer;
}
It turns out this was caused by Internet Explorer being in Compatibility View for this site.
Related
Before the holidays my client's site was working fine with the Flickity carousel. But after returning it has completely crashed, but it starts working when I resize the window.
I had a look at the console and I noticed that what is changing is that before I resize the window - the transform/translate code isn't there. But, when I resize it, evenly slightly - they appear again. (see screenshots)
I'm baffled by this as it was working perfectly fine, like I said. Any help would be greatly appreciated.
Thank you.
I have it setup through the Flickity CDN
my CSS -
.carousel {
width: 100%;
}
.carousel-cell {
width: 100%;
height: 500px;
margin-right: 10px;
border-radius: 5px;
left: 102%;
}
.carousel-cell.is-selected {
position: absolute;
left: 0%;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: carousel-cell;
line-height: 200px;
font-size: 80px;
color: white;
}
I came across a small problem, for some reason I see a huge white gap in the left of the <html> tag
I tried to add the HTML and body tag this rules:
overflow-x: hidden;
max-width: 100vw;
It works on desktop view (even if I resize the browser window)
but it didn't help in mobile (it didn't help in mobile view in chrome dev tools).
What can be the problem?
I think it has something to do with it that the site css is mainly using flexbox.
as well I suspect it has something to do with the div marked in red in the picture (which is position fixed but for some reason appears after scrolling down).
This is that div css rule
.contact-mobile{
position: fixed !important;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
padding: 15px;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
max-width: 100vw;
background-color: $black;
opacity: 0.9;
a{
min-width: 25%;
text-align: center;
padding: 5px;
i{
color: #fff;
}
&:hover{
opacity: 1;
i{
color: $black;
}
background-color: $green;
}
}
}
this is the dev site http://davdev.co.il/broker
this is a zoom out of what I see
https://www.screencast.com/t/P7zQwdWySBv
The problem come from your iframe position,
Put top: -5000px instead of left: -5000px, and it will fix the gap on mobile
My goal is to make a circular icon button wherein a single icon is enveloped by a circle, and the circle shrinks on hover, but the icon stays centered.
I got this effect working in Firefox and Chrome, but in Safari 9 (I assume it's similar in Safari 10), when I hover over the buttons, their vertical position occasionally moves up and down unexpectedly. It seems to mostly occur when rapidly changing which button is being hovered.
This is the HTML structure of the button:
<a class='icon-button'>
<button>
<span class='bg'></span>
<span class='icon'>A</span>
</button>
</a>
This is the SCSS code I am applying:
.icon-button {
$width: 2em;
display: inline-block;
width: $width;
height: $width;
overflow: hidden;
cursor: pointer;
button {
position: relative;
display: flex;
align-items: center;
text-align: center;
width: $width;
height: $width;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
}
.bg {
background-color: #FF9999;
width: $width;
height: $width;
border-radius: $width / 2;
margin: 0 auto;
transition: width 128ms linear, height 128ms linear;
}
&:hover .bg {
width: 0.8 * $width;
height: 0.8 * $width;
}
.icon {
color: #FFF;
position: absolute;
top: 0;
left: 0;
line-height: $width;
width: 100%;
}
}
Here is a JSFiddle page where I replicated the issue with the relevant code: https://jsfiddle.net/Auroratide/6u463jL5/3/
Does anyone know what is causing this to happen in Safari but not the other browsers? I'm probably going to need to change my strategy so the CSS is not as jank, but I'm curious nonetheless.
UPDATE:
Here a link to a video of what I am seeing, contrasting Firefox with Safari:
http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov
Try adding
-webkit-transition: width 128ms linear, height 128ms linear;
The -webkit- refers to browsers such as Chrome and Safari, so will hopefully fix the problem you're experiencing.
It seems that the below CSS fixes this:
.icon-button {
position: relative;
}
.icon-button button {
position: absolute;
top: 0; left: 0;
}
I'm still not really sure what was going on in Safari, but it seems to have been a positioning issue relative to the size of adjacent elements (I had noticed the issue does not arise on a button in isolation). Absolute positioning guarantees the elements are positioned based solely on the parent, so I'm guessing that's why this fixes the issue.
I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:
HTML
<div id="container">
<div id="hidden_div">
<iframe></iframe>
</div>
</div>
CSS
#container {
position: absolute;
height: 20px;
width: 40px;
top: 8px;
left: 30px;
}
#hidden_div {
position: absolute;
background: url(../_images/inside_btn_back.png) repeat;
height: 60px;
width: 350px;
top: 0px;
left: 0px;
margin-top: 20px;
z-index: 50;
display: none;
border: 1px solid #a08f89;
}
#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
display: block;
}
This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.
it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.
i have a div element that is appearing fine in Chrome but Firefox for some reason has decided to put a border around it. let me share the CSS here:
#cpanel {
width: 320px;
height: 75px;
position: absolute;
//left: 28%;
//top: 32%;
z-index: 9996;
//visibility: hidden;
display:none;
}
.box {
z-index:9997;
//border: 1px solid #000;
width: 75px;
height: 75px;
float:left;
margin-left: 2px;;
/*display: block;*/
background-color: #000;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.box .text{
width: 75px;
text-align: center;
color: white;
position: absolute;
//top: 40%;
z-index: 9998;
}
#cpanel.on {
visibility: visible;
}
the cpanel is the outermost div. the .box divs are small boxes inside the cpanel div. and these boxes somehow have 1px white borders that arent present in chrome. i want to remove those borders. thanks.
Use FireBug plugin to view the CSS and see where the border is coming from.
Probably you have bloated CSS file and you have lost in it :) Simplest solution is just to add border:none to .box class. Finding your bad border source of course could help, but it could be needed somewhere else and could not be removed.
I suggest also to do simple ctrl+f in css file for 'solid white'.