I'm working on a responsive layout with the following css:
#page_container {
max-width: 960px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0;
}
#header {
position: relative;
top: -10px;
padding:0;
height: 190px;
}
#logo_image {
position: absolute;
left: 250px;
top: -10px;
}
#media only screen and (max-width: 960px) {
#logo_image {
position: relative;
margin: 0 auto;
max-height: 150px;
top:0px;
left: unset;
}
The idea is that below 960 px in width the logo image should be smaller and centered. This is working fine in firefox, but in chrome the "left: unset;" is not being processed and the image is appearing far to the left of center.
I am not aware of any compatibility issues with unset and in fact use it elsewhere on the page without problems. Am I missing something obvious here?
Unset is not supported in Chrome:
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
Use auto instead.
Update (Feb 2016)
Chrome now supports unset as of version 41.
'unset' was previously unsupported in Chrome, but it is now supported. The example now works similarly in Chrome and Firefox.
Chromium has supported 'unset' since December 2014:
https://codereview.chromium.org/775153002
Related
I'm having hard time with an unordered list ul full width background on mobile. When I test it with Chrome, full width background shows without any issues (1st image below) but when I check it on my phone, I dont see the background (2nd image below).
The website address is here
.tabs--primary {
width: 100%;
background: #E9E8E8;
border: none;
position: relative;
padding: 15px 0;
margin-bottom: 1px;
min-height: 60px;
display: flow-root;
}
.tabs--primary:before, .tabs--primary:after {
content: "";
position: absolute;
background: #E9E8E8;
top: 0;
bottom: 0;
width: 9999px;
}
.tabs--primary:before {
right: 100%;
}
.tabs--primary:after {
left: 100%;
}
I believe this is an issue relating to iOS Safari, currently not supporting display: flow-root;. Most desktop browsers, however, including Chrome, currently support this feature.
This is most likely why you have different results based on if you are viewing the website on your desktop vs your iPhone.
CanIUse display: flow-root;
Depending on how your CSS is set up you can try just using display: block; instead. However, if you are using it as a way to create a new block formatting context you will have to use some workarounds to get it to work. Here's a great article about the clearfix hack.
I created a custom header for a pre-made responsive theme. It looks great in chrome, but both firefox and ie aren't showing all of the menu items and are positioning a logo::after shadow in a weird spot.
I already verified that there are no errors in my code and tried implementing normalize.css, but nothing has worked to fix the problem.
This is the code I'm using:
.logo::after {
content: "";
background: transparent url("/wp-content/themes/porto/images/shadow.png") repeat scroll 0% 0%;
width: 247px;
height: 14px;
position: absolute;
top: 64px;
right: 30px;
min-height: 0px;
}
#main-menu {
position: relative;
margin-right: 15%;
margin-bottom: 2%;
}
What am I doing wrong here? Thanks for the help!
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
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; }
I have a little problem that I cant solve.
I made a dropdown menu, and its OK but in Chrome I can only see the hover effect on the child elements, and can on the parents.
In FF and IE its OK only Chrome is the bad one, could someone give me a hint?
nav.main_menu {
position: relative;
top: 29px;
left: 220px;
bottom: 1px;
height: 90px;
width: 680px;
z-index: 3000;
}
div#container {
width: 980px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
z-index: 1000;
}
It's OK in any other browsers but not in IE
Are you using a CSS reset sheet. I find that solves some of my cross browser issues.
http://meyerweb.com/eric/tools/css/reset/
(you should really show your markup)