I am working on a project and I am using woocommerce dynamic gallery pro plugin to preview product images in product page. but the issue is that the preview image is showing half in IE.
please can you guys check the following link in IE and help me to fix.
http://www.joannelouise.com/shop/sexy-ladies-red-embellished-dress/
I find a fix, but I am not understanding how i apply this.
I notice if i remove the position from the following class, it may fix the error. but when i am giving position some value like absolute, relative, fixed, static or even inherit. it isn't giving any response until i off the position.
so guys kindly help me to fix this.
following are my changes. which are effecting 50%.
.ad-gallery .ad-image-wrapper .ad-image {
overflow: visible !important;
position: inherit !important;
}
but position thing is not working
You should really avoid so many inline styles. It makes for messy code and more work.
For some reason you're setting .ad-image to {top: 179px;}. Try this (after removing the inline top statement):
.ad-gallery .ad-image-wrapper .ad-image {
top: 0;
}
Strangely, I see {top: .5px} in Firefox. I'm not sure what's going on.
I'm not on a widows box right now, but it could be a case of not clearing a float or a parent item isn't containing children who are floated.
Try using:
overflow:auto on the parent container of whatever images are not showing fully. Can also try using overflow:hidden to achieve the same but avoid scrolling bars in some instances.
Try to avoid ever using !important on production sites if possible.
OP, What version of IE are you using?
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Via http://www.w3schools.com/cssref/pr_class_position.asp
IE 7/8 Work-around:
.ad-gallery .ad-image-wrapper .ad-image {
overflow: visible !important;
position: <whatever-the-parent-is> !important;
}
Since IE 7/8 doesn't understand to inherit the position from the element's parent, you can create a CSS rule that specifies what position you'd like the element to use.
Related
I'm having issues with IE8 and hope that someone can point me in the right direction.
So I have a parent which is relatively positioned. The parent has two children of which one is absolute and one relative in position. When you hover over the parent, the left values of the children change and the relatively positioned one is supposed to overflow and be hidden.
Here's a fiddle: http://jsfiddle.net/Sladkoff/s7ub9zL8/3/
"Normal" Browsers hide the relative child if it overflows but IE8 will still display it no matter what.
I'm not quite sure if anyone will be able to test this in IE8 thought, since I had to open http://jsfiddle.net/draft/ to see it there. Don't know how this works for guests viewing the fiddle. I guess you need to have it open in e.g. Chrome and then switch to the mentioned link in IE. Let me know if it works...
Any Advice?
Thank you.
Try to use z-index to position your objects in the stacking order you need.
.absolute {
z-index:1;
}
.relative {
z-index:2;
}
I'm trying to put an (hover) image on top of its parent div. I use an older version of www.cssplay.co.uk/menu/magnify.html, though a bit modified to my needs.
I found a way to achieve what I want earlier in a previous site => http://www.keurslagergeertenkristel.be/. In the center you'll see a picture containing a black/white photograph at left and some pink/bordeaux tints and some text. If you hover with cursor, the picture will enlarge so you can see it properly (I know there might be an issues with small screen resolutions, but thats not the problem right now)
I'm trying to do the same thing again in a new site I'm building, but I can't get it to work :s The image always stays in its parent div.
You can check out here => http://www.vermeulenklasseslager.be/NEW/.
The CSS for the images for both websites is identical, so it must be something with the parent div I guess, but I can't see it.
I tried a lot of variations, using display:block, position:relative (for parent div), overflow:hidden and auto, adding extra divs or spans, adding z-index...
UPDATE: I JUST DISCOVERED THE PROBLEM ONLY HAPPENS IN IE11. (wich makes I understand even less why, because the first website works in all browsers)
I think the solution to that is:
position : fixed
in ie 10/11 it crops the large image because of a border-radius property on the content div. The solution is to remove overflow:hidden and clear this container with standard clearfix:
#content:before,
#content:after {
content: "";
display: table;
}
#content:after {
clear: both;
}
#content {
zoom: 1;
}
I'm running into some extremely strange behaviors, and non-consistant across every browser i've tested.
I've a pretty complex layout, but the main issue lies here:
<div id="drop">
<div id="header"></div>
</div>
#drop has position:absolute and z-index:100
#header has position:fixed; top:60px;
As I start scrolling down Chrome ignores the position:fixed rule. If I remove either of the two styles above from #drop then Chrome starts respecting the position:fixed rule.
can't get it working on Ubuntu Chrome 23.0.1271.97 and see the same behavior on Mac Chrome 25.0.1364.99. My friend uses Ubuntu Chrome 25.0.1364.68 beta and it works correctly for him. I've tested it on firefox and it kinda works (with other symptoms)
Has anyone heard of this error? or can anyone even reproduce it?
edit
I'm using openlayers map as another div with position:fixed if I delete that layer or at least change it to display:none then this weird bug goes away.
edit
Noticed that during the presence of this bug, if I change the zoom level back and forth, then the position adjusts itself to the proper behavior. To me, this indicates a webkit issue that fails to execute some internal callback function on scroll.
Another extremely strange thing is that I have a few links inside of #header and they work if I just click the expected location, even though the the div does not appear there. Overall I've noticed that it's only the rendering that's broken. If at any point of time I force the browser to re-render by resizing the window, or changing zoom, or just doing Select-All, then the header bar jumps to the proper position, but does not remain fixed.
You mentioned in the comments that OpenLayers uses CSS transforms. That being the case:
the element with fixed positioning will become relative to the element with the transform - not relative to the viewport
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
.wpr
{
width: 200px;
height:1000px;
background: pink;
position:relative;
margin: 0 200px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.fixed
{
width: 200px;
height:200px;
margin: 50px;
position: fixed;
top:0;
left:0;
background: aqua;
}
<div class="wpr">
<div class="fixed"></div>
</div>
As the accepted answer says, this is the intended behavior, and is spec-compliant. Another important component of this is what it means to be using CSS transforms.
In your case, it was due to OpenLayers, but this applies to anyone using will-change: transform as well (probably a lot of the people visiting this question). This has been brought up on the Chromium bug tracker here, and marked as WontFix, because (as I said) it's intended behavior. The official comment is this:
This behavior is required by the spec
(http://dev.w3.org/csswg/css-will-change/): "If any non-initial value
of a property would cause the element to generate a containing block
for fixed-position elements, specifying that property in will-change
must cause the element to generate a containing block for
fixed-position elements."
The idea is that once will-change:transform is specified, you should
be able to add/remove/change transforms cheaply, without needing
fixed-position descendants to get re-layed-out.
Note that using other values of will-change (e.g. opacity, top) will
not change the positioning of fixed-position descendants.
As far as I am aware, the only solution is to make the child of the will-change element a sibling instead, to prevent the attribute from cascading.
As a side note, in my specific case, I was able to fix it by being more specific with the will-change attribute. Instead of using it on the div containing the performance-jarring element that required GPU offloading, I used it directly on the offending element. This was due to my original bad code, though, so it won't work for most cases.
You will have to place header outside the parent container drop to make it work.
I had slightly similar issues days back.For instance,if you set z-index of header,it will be attain the z-index of the parent dropcontainer.The z-index of header will be useless because it is already inside a container which has another z-index.
The same logic of z-index applies to position.
I want to add another possible solution because I was struggling with chrome ignoring position:fixed for quite some time until I finally found the culprit:
-webkit-perspective: 1000;
It was coming from a plugin I was using and causes ALL position:fixed elements to be ignored.
Hope it helps someone.
I think this is impossible, i don't think if two positions can be placed at the same place without one to collapse. But i think its better to use Avail height in javascript, i mean if you wanna an outer div to hold inner div, and outer div must cover the whole screen, use Availheight in js, this will get the screen height and then apply if, thereafter set all the divs in fixed position.
Add this to parent:
position: fixed;
...and this to the child:
position: sticky;
First of all, put something in your div as empty ones behave really weird. Then, what do you expect by putting a fixed into an absolute? Obviously, nobody knows what is the reference point of your fixed div. Should it be its parents position? which is not changing with scroll or the page position which changes? Try to use things that are completely meaningful and have a clear definition because if you fix it in chrome, what would happen with another browser? Do you really prefer to test is on all of them?
I suppose a small change in your divs so that pull the fixed div out of the absolute one or move the absolute div somewhere else.
I tried to use HTML+CSS to generate simple inline info popups, yet I was not able to make it work as intended. In particular, the popup div container ignores my max-width and z-index settings.
I posted a small demonstration on jsfiddle.
Can someone please enlighten me? What am I missing? Many thanks in advance!
You need to set positions to absolute/relative/fixed in order for z-index to work http://jsfiddle.net/NMh8j/12/
If you change .faq>.body to position:fixed, the 240px width is observed, and the top : 12px is moving the popup over the underlying ?. You can then drop the left-20px as well as it will center itself.
jsFiddle update
Your .head hasn't any position specified, change your CSS to :
.faq:hover>.head {
position: relative;
border-color:#cccccc;
border-bottom-color:#ff0000;
z-index:100;
}
z-index need the position property to be fixed (fixed, absolute, relative.. but not static, which is the default value)
The nav works the same in every browser i've tested on a mac and pc; however, I cant for the life of me figure out why in IE7 the nav is appearing under the content in the main content block. Check out http://obs4.dynapp.net/ to see the problem, it only exist in IE7. Check out the source if your interested in helping out with the problem. I dunno, I've spent hours staring at html/css and cant figure anything out.
http://obs4.dynapp.net/
This is a seriously annoying IE7 bug. It occurs because positioned elements later in the DOM will be given priority over those earlier in the DOM, regardless of z-index status.
This article will explain how to fix it: http://thedesignspace.net/MT2archives/000763.html
Basically, add position and z-index to the least common ancestor. So, if your header and content are both contained in a container, add position and z-index to that container. If they're direct children of the body, add it to the body.
Hope that helps.
z-indexing is weird with IE7. You have position: absolute for your nav. You have position: relative for your content. Yes, z-indexing should work where your position doesn't matter, but IE7 will take that into affect and give you two different "stacks" for z-indexes so absolute and relative positioned elements do not interact with each other. Try giving your nav a position: relative instead and then readjusting your css accordingly.