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.
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.
So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example
But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2
(the links are server archives, won't be changed.)
Sincerely,
a confused dev.
Changed your code in your first exmple, now it's working fine:
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
height: 300px;
/*changed*/
z-index: 100001;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
/*added*/
position: relative;
}
You have to add position:relative to the elements using z-index make the z-index work
Found the problem:
Add position: to #headimage in the css.
My bad guys :).
As you can see in this JSFiddle I have a fixed header with links to different sections of the page.
.header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
background-color: rgba(255, 245, 255, 0.9);
border: 1px solid grey;
padding: 5px;
}
.goto {
padding-top: 20px;
}
I want to give an offset when I click to a link in order the header not to cover the beginning of the section. That's why I give this top padding to the anchors.
The problem is that this works fine on Firefox and IE11 but not on Chrome and Opera.
How to solve this problem?
You are applying padding to an inline element (a). If you make your a's block your padding will work:
.goto {
padding-top: 20px;
display: block;
}
Working demo
In css3, they plan to add a border-style called "dot-dash" that will look like this:
Unfortunately, that is not yet implemented in any browser, and I need that kind of border now for a web-app.
The Application works with the Javascript-Framework ExtJS, so the solution of my problem can be a javascript one, too.
I already tried with a background-image (very bad solution, I know) - but that didn't work because there will be many divs with this border, which will all have different sizes (which I don't know before).
Thank you!
Well, if you don't have it, make it by yourself !
The recipe for a dash-dot: 1 part of dash and 1 part of dot:
#dash {
width: 200px;
height: 200px;
left: 35px;
top: 35px;
position: absolute;
background-color: lightblue;
border: dashed 6px red;
}
#dash:after {
content: '';
width: 100%;
height: 100%;
left: -6px;
top: -6px;
position: absolute;
border: dotted 6px red;
}
demo
It'll probably be supported by all browsers in the future, but as of now, I don't think it's a supported border type. Here's a test page someone made with the different border types: http://www.aaronsw.com/2002/testcss
You'll probably have to use a border image like Kyle suggested. http://www.w3schools.com/cssref/css3_pr_border-image.asp
Although it looks like Internet Explorer doesn't even support that yet. Surprise!
Here's a workaround for IE: border-image: workaround for IE
I needed something very close to this and came up with a variation of vals' solution. This uses a continuous solid line instead of dashes, but I am showing it here because it removes the need for position: absolute on the main div.
.dash {
background: none;
position: relative;
box-shadow: inset 0 0 0 1px #fff,
inset 0 0 1px 1px #000;
}
.dash:after {
box-sizing: border-box;
content: '';
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
border: dotted 3px #bbb;
border-left: 3px solid white;
border-right: 3px solid white;
}
If you need only the bottom border, you could try the following css
.class:after {
content: '–⋅–⋅–⋅–⋅–⋅–';
display: block;
position: absolute;
top: 30px;
left: -4px;
font-size: xx-large;
font-weight: bolder;
color: #59defc;
height: 12px;
overflow:hidden;
width: 130px;
}
Please note that the dashes in the above code are special unicode characters and are not the ones on the english keyboard (those dots and dashes wont align on the same line).
Please change the pixel properties values to match your need. I found all these properties are needed to get the same behavior across multiple browsers.
#vals solution will work but with inconsistent results across browsers especially IE stretches the dashes.
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.