After a few lost days, I have given up trying to solve this.
So, here is the situation and I'll be really thankful if someone could tell me what I should do:
I have a vertical menu, and the second level of the menu is absolute positioned.
The inner <ul> is styled position: absolute; and has a set z-index. The problem is
ie6 and ie7-specific, which does not recognize the z-index in an absolute positioned block.
If the element was a relatively positioned, there are no problems but I need the
element to be positioned absolute.
Are there any suggestions? Thanks a lot to everyone who's going to give their advice or opinion.
Try this if it helps.
Inside absolute div, add a relative div and put your code inside it.
IE6 and IE7 have a z-index bug where each absolutely positioned element creates a new context for the stacking order. It's difficult to tell without seeing the html in question, but try adding position: relative; and z-index: 100 (or something above the z-index of your sub-menus) to the container (parent) of all the elements with position: absolute.
Related
I am developing a store for a friend and I want to make the "ADD TO CART'S DIV" fixed when the users scrolls after it. As I am far from being a CSS expert I am facing problems with it.
I tried to use JS to add "position: fixed" to the div, but I cant do that because the div has a relative position and changing it do fixed mess up with all the div's elements
this is the link
and this is the div I want to make fixed (the div id is rightcol):
I would also want to make the div stop right before footer
Thanks in advance
Use this property to make div sticky on scroll
position: -webkit-sticky;
position: sticky;
top: 0;
the header is your website is also sticky. you can use the same properties it works
You can use position sticky. sticky element works as fixed element with respect to its parent element. It will serve as fixed in the space provided by its parent.
So in order for your project. You need to restructure your html in such a way that sticky element should get enough space to behave as fixed element in that region.
Internet Explorer 9 is not properly displaying an absolutely positioned element. The parent is relative, so the absolute element should be "absolute" relative to the parent div. However, it is acting much closer to "fixed" behavior. When I try to trigger hasLayout on the involved elements, it shows everything inline.
The element in question is the .programs-list div that appears when you click on a region and then a country.
This happens in all versions of IE.
Thank you very much in advance.
After analyzing your HTML structure, you need to set your div#main-wrapper with a position:relative in order to keep the popup over the map area.
CSS
#main-wrapper {
position: relative;
}
Please look at this fiddle:
http://jsfiddle.net/dyv88/16/
On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.
All more recent browsers, it does not.
Can someone please explain?
And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?
If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one.
Do position: relative on one of the parents to fix this. Or position the table relative.
I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.
jsFiddle Demo
I'm working on a responsive design where the logo needs to be positioned top/center of the page and overlaying the content beneath it.... http://reversl.net/demo/ I can get this desired layout by giving the logo an absolute position
position: absolute;
top: 0;
left: 50%;
margin-left: -98px; /*--half the width of the logo--*/
For best standards....is there any reason why I shouldn't take this approach? From looking around folks tend not to favor using absolute positioning. Would it be better to give the logo a negative top margin and auto left/right margin? The main thing is that the logo remains top center when the media query breakpoints kick in..
Whether absolute positioning is appropriate depends on whether the positioned element should affect positions of other elements (or to be affected by them). If not, absolute positioning is perfectly OK.
Absolute positioning is absolutely acceptable.
Absolute Positioning is cool. forever people were using a 960px width layout and absolutely positioning everything in a relative wrapper... this worked well back then. But that was before we started designing responsively. When people say "AHHH NO absolute positioning," this is what they are talking about. But absolute positioning is great for all sorts of rad stuff... like what you are doing. that is the way to go about it... I am also a really big fan of fixed positioning... and it seems so be all working on ioS devices now !!! YAY !!!
How can I get this CSS declaration to work in IE6 please?
#mask{width:725px;height:495px;margin:0;border:0;padding:0;overflow:hidden;}
The problem is the content which is much larger than 725px and exactly 495px (much like a horizontal scrolling thingy) does not get hidden in IE6.
Edit:
1. The background images of the hidden divs shows.
2. I am also using Twin-Helix PNG Fix 2.0 Alpha.
Thank you.
This will be happening because you have relatively positioned elements inside your #mask container.
This is due to a bug where relatively positioned children are not correctly clipped and hidden for a parent element with overflow: hidden applied in Internet Explorer 6 and 7. The same problem also exists for overflow: auto and undoubtedly overflow: scroll as well.
It can be fixed by also applying position: relative to the element you are setting the overflow on.