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.
Related
I have an issue regarding a position: sticky element that flickers whenever I scroll the page in Google Chrome using the device toolbar and simulate different devices. However, when I don't use the device toolbar, the element works as it supposed to. It looks fine in Safari and Firefox as well. I saw a couple of workarounds using -webkit-transform: translate3d(0,0,0); and backface-visibility: hidden;, but I cant't seem to get it to work.
I'm using it inside a Next.js project.
Anybody experienced the same thing?
This is the css for the sticky element:
.StateTitle {
position: sticky;
top: 0;
padding-top: 45px;
z-index: 50;
width: 100%;
padding-bottom: 1px;
background-color: #FF7E7E;
}
And this is the css for the parent element:
.StateWrapper {
margin-top: 0;
width: 100%;
box-sizing: border-box;
position: relative;
}
enter image description hereI’ve run into a problem with placing my header and navigation where I want it while using Internet Explorer. It works fine with other browsers, but not IE. I think the issue is with using the sticky positioning, but I don’t know how to make my header compatible with Internet Explorer. I’ve included the relevant code and a picture of how the header looks in IE. The navigation is supposed to be at the bottom of the picture of the mountains, not at the top left of the page.
header {
position: absolute;
position: sticky;
top: 0;
clear: both;
border-bottom: 2px solid black;
border-top: 2px solid black;
margin: 0px;
padding: 0px;
background-color: #2E2D2D;
z-index: 1;
}
nav {
width: 800px;
height: 70px;
margin-left: auto;
margin-right: auto;
color: #fff;
}
A quick search shows that it's not supported in IE:
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility
https://caniuse.com/#search=sticky
To replicate the effects of sticky, you're going to have to use js. You can write this yourself or look for a "sticky polyfill" that is already out there.
Alternatively, you could update your design so it doesn't require position: sticky.
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!
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; }
My horizontal nav bar is populated with images for the links that are coming from one image that includes all the sub-images; each nav item image is identified by the pixel location within the larger image. This works perfectly fine in Firefox and Safari, but in IE, all of the images are misplaced too low within the nav bar (can only barely see the tops of the words). Two questions:
How do I fix this in the css so it is back-compatible with the more recent versions (and current versions) of IE
Do I need a separate IE stylesheet?
Here's the css (truncated for just a few of the links):
ul#navbar {
width: 750px;
height: 22px;
margin: 0px;
padding: 0px;
text-indent: -9999px;
border: none;
}
ul#navbar li {
float: left;
height: 22px;
margin: 0px;
padding: 0px;
list-style-type: none;
border: none;
/*position:absolute;*/
}
ul#navbar li a {
display: block;
height: 22px;
border: none;
}
.home {
left: 0px;
width: 78px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.classes {
/*left: 78px; */
width: 92px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -100px 0px;
}
.training {
left: 170px;
width: 89px;
background-image: url(../images/nav/new_nav.jpg);
background-repeat: no-repeat;
background-position: -200px 0px;
}
I've used *.html for IE 6
/** For IE6 /
*html #related-products
{
width: 300px;
overflow:visible;
}
*html #related-products ul
{
position:relative;
left: -65px;
}
*html #related-products li
{
border: none;
}
/ End of IE6 hack **/
Otherwise there's the IE conditional comments.
http://www.quirksmode.org/css/condcom.html
As far as separate style sheet you can create one have your Server Side language detect the browser and if Internet Explorer make sure your IE one gets added, otherwise you can add these into an existing CSS file. I've done both.
Well ... I think you don't want to hear this, but: Never, ever rely on exact pixel positions in HTML/CSS (imagemaps superimposed on one image are the only exception).
HTML is simply not made for pixel-exact design. From your description, there's not even a possibility for graceful fallback on browsers that don't support one of the technologies you seem to rely on. And what about screens that are too narrow to show your complete navbar (e.g. mobile devices)? In the best case, you'll get a multi-line navbar, but from your description, it would be broken since the position would be wrong...