I have been struggling with this for hours. I have a series of problems related with z-index, position:fixed in IE11. I have tried -ms-device-fixed but nothings seems to resolve this really weird issue. Part of the dropdown is not visible like you can see on the image.
.ms-webpart-zone.ms-fullWidth .ms-webpartzone-cell {
display: block;
overflow-x: auto;
overflow-y: visible;
min-height: 220px;
position: relative;
z-index: 10;
}
Dropdown CSS:
position:-ms-device-fixed!important;
z-index:20;
top: 10px;
position: fixed;
visibility: visible;
left: 88px;
width: 226px;
Try using position: expression(fixed);
Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.
Related
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
I have a question about a CSS dilemma I am stuck with, I tried using various methods but nothing is really working the way I want it. I want a simple backdrop image, and then place images randomly on the backdrop. The trick is, it should stay where it is suppose to be no matter what the resolution.
At the moment this is the code I am using that is failing me :(
<div class="Backdrop"><img src="/Images/Backdrop.png" />
<div class="Ninja"><div class="IE7">(7)Alignment<img src="/Images/miAverage.png" alt=(2)A2" /></div>
<div class="IE8">(7)Alignment<img src="/Images/miBad.png" alt=(1)B1" />
</div>
the CSS looks as follows:
.BackDrop {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 768px;
z-index:1;
background-color:#999999;
}
.IE7{ visibility: visible; position: absolute; z-index: 3; top: 300px; left: 200px; }
.IE8{ visibility: visible; position: absolute; z-index: 3; top: 300px; left: 400px; }
Please note this code was mostly generated with MVC.
I created a little Tooltip thats in a Container. So there a two divs both with position: absolute;. They have to be position absolute or otherwise they will mess up the whole design.
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
}
<div class="container_1"><div class="container_2">Full Name-Name</div></div>
I also have a CSS Triangle in the first container so that's why there are two containers.
In the Tooltip there is shown the Full Name of a user. But now I have the problem that the div isn't as wide as the content. So I fixed it through replacing space with but now there is the same problem with dash's. But the problem doesn't get fixed by replacing the dash with –. Anybody knows a solution?
CSS:
.container_1 {
position: absolute;
top: 20px;
left: 20px;
}
.container_2 {
position: absolute;
width: 95px;
overflow: hidden;
white-space: nowrap;
}
http://jsfiddle.net/yG5eF/
Edit: Sorry, totally misread it the first time.
I have a popup panel which shows nice on chrome and FF like this:
It's a grey iframe with this css style:
element.style {
z-index: 25000;
opacity: 0.5;
position: absolute;
background-color: black;
border-width: 0px;
top: 0px;
left: 0px;
width: 1366px;
height: 361px;
visibility: visible;
}
which contains a DIV:
element.style {
position: absolute;
z-index: 25001;
background-color: transparent;
left: 0px;
top: 0px;
width: 1366px;
height: 361px;
}
which contains another (main) white div:
element.style {
width: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 25002;
visibility: visible;
position: absolute;
left: 483px;
top: 77px;
}
I do not understand why on IE 8 the panel with those tabs is white also, so basically it should be in the background like on Chrome...:
Do you have any clue?
I'm almost sure the problem is on the panel with the tabs and not on the popup one...
The css of the panel with the tabs is:
element.style {
width: 280px;
height: 500px;
position: relative;
}
UPDATE:
Panel tab is actually a table with the above style.
Ps: Do not blame me about css for the popup. Is mainly generated by the icefaces component.
Finally, solved...
Added this style to the div which contains the panel tab:
position: relative;
z-index:-2;
Please note that I've tried with z-index:0 or positive but was not working so a negative one was required...
The single drawback for this solution is that now, the parent div with its panel tab does not appear on Firefox.
Grr... I really hate IE.
UPDATE: I ended up using jQuery to put to that div, a negative z-index only for IE.