I'm having an issue with the pseudo-class :hover in Google Chrome.
Basically I have an element that when in :hover state it's sibling is displayed. This works fine.
Then I add a media query so that when the viewport has a specific min-width the element is no longer displayed but the sibling is.
When going from the min-width to a smaller width the display:none on the sibling no longer fires.
It might be easier to understand by taking a look at this example. Try resizing the viewport.
http://jsfiddle.net/5gPGR/1/
HTML
<div id="container">
<div id="trigger">
</div>
<div id="target">
</div>
</div>
CSS
#container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 24px;
line-height: 80px;
background: #777;
box-sizing: border-box;
}
#trigger {
position: absolute;
display: block;
width: 50%;
height: 80px;
top: 0;
right: 0;
background: #275;
}
#target {
position: absolute;
display: none;
width: 50%;
height: 80px;
top: 0;
left: 0;
background: #f57;
}
#trigger:hover ~ #target {
display: block;
}
#media screen and (min-width: 400px) {
#trigger {
display: none;
}
#target {
display: block;
}
}
This is only an issue in Chrome/Chrome Canary. I have tested in the latest versions of:
Chrome
Chrome Canary
FF
IE
Safari
Opera
Is there something I can do to resolve this or do I just need to stick with javascript for these kinds of interfaces.
EDIT:
I forgot to mention that if I force the element state to :hover using chrome dev tools it starts working again until the next resize.
Interesting error, I'm not sure why that happens
I was able to fix the issue by adding an empty #target:hover { }
Demo
If you're using a preprocessor that would remove this line, you can add a property that you already have, like #target:hover { display:block; }
Related
I've added inline-inset-end and inset-inline-start to an absolutely positioned element. I'm using them for language support as these two should help when the layout needs to switch between RTL and LTR.
This is working fine on chrome and forefox but I have absolutely no idea how to set up an equivalent in Safari.
I'm trying to understand if there is a basic css alternative that will work on Safari
An example of what the layout would be like:
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background: blue;
}
.reader {
width: 50px;
height: 100%;
display : flex;
flex-direction : column;
position: absolute;
inset-inline-end: 0px;
background: yellow;
}
<html>
<body>
<div class="container">
ha ha
<div class="reader">
hola
</div>
</div>
</body>
</html>
Safari supports inset-inline-end and inset-inline-start now (and most other logical properties), but if you still need a fallback there are options. As long as you are using the dir attribute properly, you can add a fallback that works in basically any browser.
[dir="ltr"] .reader {
right: 0px;
}
[dir="rtl"] .reader {
left: 0px;
}
If you want to go a step further (at the cost of some support), you can use #supports:
#supports not (inset-inline-end: 0px) {
[dir="ltr"] .reader {
right: 0px;
}
[dir="rtl"] .reader {
left: 0px;
}
}
The same trick can be used with most logical properties as well.
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
Have an issue with Flexbox and space-between in Firefox 36. For reasons unknown space-between is not correct in Firefox (causing the strange margin on left) but perfect in Google Chrome.
Chrome screen capture
Firefox screen capture
CSS
.form-status {
display: flex;
justify-content: space-between;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: $gray;
}
.step {
position: relative;
text-align: center;
padding-top: 15px;
color: $gray-light;
&:after {
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
top: -11px;
left: 50%;
margin-left: -11px;
background: $gray;
border: 8px solid #0c0616;
box-sizing: content-box;
}
&:first-child, &:last-child {
&:before {
content: "";
position: absolute;
top: 0;
left: -100vw;
right: 0;
height: 1px;
background: black;
}
}
&:first-child:before { right: 50%; }
&:last-child:before { left: 50%; }
&.active {
color: white;
&:after { background: $brand-yellow; }
}
}
}
HTML
<div class="page-section page-section-dark page-section-narrow">
<div class="container">
<div class="form-status">
<div class="step {{#ifeq step "one"}}active{{/ifeq}}">
Basic Information
</div>
<div class="step {{#ifeq step "two"}}active{{/ifeq}}">
Agreement
</div>
<div class="step {{#ifeq step "three"}}active{{/ifeq}}">
Payment
</div>
</div>
</div>
</div>
The issue is from this styling on your final page:
.form-status:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:#555
}
(which I think comes from the "&:before" in your original question).
.form-status is a flex container, and this is giving it an absolutely-positioned child -- and absolute positioning for children of flex containers doesn't quite work interoperably yet -- apparently IE (or their next-gen "Spartan") is the only browser to implement the latest spec-text on that right now.
This styling breaks your layout because the absolutely positioned child drops an invisible 0-sized "placeholder", which forms a 0-sized flex item, and that flex item affects the positioning of all the other flex items via participating in the space-around alignment. (This was required by an earlier version of the flexbox spec, but it's changed to no longer call for these placeholders to form flex items.)
I'm intending to bring Firefox up-to-date* on this aspect of flexbox soon (here's the bug on that), but in the meantime, I'd suggest avoiding using absolute positioning on any direct child of a flexbox, since it works differently in every browser right now.
*(UPDATE: This is now fixed in Firefox trunk builds. The fix will tentatively be in Firefox 52, which I believe ships in March 2017.)
This is a pared down version of a problem I am facing with IE7. In all other (newer) browsers, this displays fine... why does position:relative; have an effect on float: right; or float: left;? Is there a way to keep the position: relative without sacrificing the functionality of float?
JS fiddle: http://jsfiddle.net/uW7JV/2/
Without position: relative;
With position: relative; (on the red box)
Even more trimmed-down version: http://jsfiddle.net/uW7JV/4/
Interesting... Removing the <div class="clearboth"></div> allows the content to show. However, I do need that functionality there, so I'm still looking for a fix. http://jsfiddle.net/uW7JV/9/
You need to add overflow: hidden to .column-wrapper so that it wraps its floating children. You won't need the .clearboth div and CSS at all after you do this.
The other issue you need to solve is column widths, since box-sizing: border-box is not supported in IE7, you need to account for your padding when assigning width.
div {
padding: 5px 1%;
}
.column-wrapper {
background: orange;
position: relative;
overflow: hidden;
}
.main {
background: yellow;
float: right;
width: 64.6%;
}
.sidebar {
float: left;
background: green;
width: 31.3%;
}
DEMO: http://jsfiddle.net/myajouri/uW7JV/15/
Another way to go about this is to use the Clearfix hack
.clearfix {
zoom: 1; /* for IE6/7 */
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then add the clearfix class to .column-wrapper.
I have the next CSS code:
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
Now I want to execute the first just in Google Chrome and Safari, and the second in other browsers.
I tried this, but second code seems to be executing always:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
How can I fix that?
The problem is that you're overriding your webkit styling with the non-webkit styling.
Reversing the order should fix this:
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.
For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).