This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Mininum and Maximum value of Z-INDEX
I see some top z-index in some pages,always 9999,
However is there a top limit about z-index?
Can I set it 9999999?10000000? Or even more greater?
Thank you
Taken from here:
Not really, but you might consider the natural limitations of a
system, like an int range. I'd probably keep it under 32,767. I've
definitely exceeded that in javascript while working on a similar
problem, and didn't encounter any problems on the major browsers and
platforms that I was concerned about at the time.
In the case of 3rd party ads and overlays, making sure that
wmode="transparent" on the flash embed is a common problem along the
same lines. Also worth noting that IE has a bug with stacking
z-indexes, so if you're not seeing success, make sure you're not
hitting your head up against the wall with that one*.
I always like to keep to some kind of convention, and not use
arbitrary figures. For example, maybe everything in my css falls
between 0 and 10. Maybe dhtml stuff happens in the 100's place values,
with a meaningful z-index for any given module.
*Sidenote: The IE bug, to be specific, is that IE considers a new instance of document flow to be a new stacking context for z-index.
You need to make sure that your z-indexes aren't being lost in the DOM
hierarchy when a child node that would normally be inheriting your
z-index is being rendered it's own positioning context.
Related
I am a mostly skilled server-end developer, and am creating an ambitious website project - all by myself. I know c#, MVC, T-SQL, LINQ, and ASP.NET pretty well. Obviously, since I'm working by myself, I have knowledge in design too. I'm obviously good with html (who isn't?). And I absolutely love jQuery! The thing is, I'm decent in my understanding of css, but css is my least knowledgeable trait. I understand programming, I also am good in design, not just because I have a decent level of knowledge in css (and jQuery) - but also because I just know what looks good (I can draw and paint on real paper too).
The thing is, I know I can probably do this with jQuery code, but I was wondering if this could also be done with css alone. On my main design (Views/Shared/_Layout.cshtml) - I made the body to have a "min-width: (my value);" attribute, which, obviously isn't supported with older browsers, so I also included a transparent image of a default width of 1px that I set to stretch to my desired width also - it works in controlling the width of the page (to the minimum I desired). But - I have a site header div which resides at the top of the page. I have a part of that header div with elements positioned on the far right - which is nice when the browser is on a device that is large enough and the browser is in decent size, but once the browser is set to a size less than my desired minimum width, then the scroll bar shows up, and I can move it around as expected. But, the elements in that header div do not stay to the far right in conjunction with my minimum width - but stay on the right of the current window size instead. I have the main div holding the elements itself set to be in fixed position, I tried making those elements relative with no success. I tried a few ideas, the problem still persists.
So, as I said, I am well aware of concepts using jQuery that can do what I have previously described I desire in these regards, but, as I also said, I know a decent amount of css, but am the least close to an "expert" in css than anything else I know. I just have a strong suspicion what I desire here can be done with css and css alone (also, it would be nice to have it compatible with most browsers, or at the least most browsers made after the year 2008).
Can someone please give me some good information in these regards?
I just remembered asking this question.
I actually found a way to go about doing what I wrote I desired here through some experimentation that eventually got me to where I needed to be. What I did was instead of using relative positioning - which I thought was the proper way of doing this, I used absolute positioning inside the absolute positioned top header div. I didn't think this would be the solution at the time of asking the question, I assumed setting something as absolute positon - even inside something that is already absolute positioned - would put it in a new context of absolute positioning like any absolute positioned element inside the body tag. What I discovered was if I put an absolute positioned element inside another absolute positioned element - the context of the absolute positioning was based on the original absolute positioned element - so top (or left for that matter) 0px wasn't 0px from the context of the body (the very top of the page) - but - 0px from the element that the element is inside of. I think that's a pretty explanation of it, so I'll end explaining it here.
I'm sure there's plenty of people that know css much more than I do, and think this issue I had here is so basic, but, I did ask the question, and I might as well answer it based upon the solution I used. I could've posted an example on jsfiddle like asked for in a comment, but I thought my explanation was good enough, and since no one offered an answer based on my question alone, I decided to try to address the issue with experimentation, which I had success with.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Difference between id and class [duplicate]
(2 answers)
Closed 7 years ago.
I'm new to CSS, and after learning about ID selectors, the only difference between them and class selectors is the fact you can only have one specific id per element, whereas multiple elements can share the same class name. But then it's easy: name an element a class name that you won't use for any other element. So it seems in that sense, a class can be treated as an I.D.
I'm new to CSS, so I may be missing something here. What advantage do I get using an ID selector over a class selector in a particular case?
Thanks.
Here are a few reasons that come to mind:
Direct Linking.
You can link directly to a specific element on the page by adding the id to the end of the url. See this post for examples: Link to an element within the current page
Javascript Compatibility.
A lot of JS libraries utilize the differences between classes and IDs. For example, they will treat classes as an array of elements, assuming you want to iterate over all of the instances of that class. IDs on the other hand are assumed to be singular, and whatever functionality you are trying to achieve will look for only a single instance. This has minor (almost unnoticeable) performance benefits, but can also break many functions if not used correctly.
Specificity.
When targeting elements on a page, specificity always comes into play. Since IDs and classes have different weights, using them incorrectly can cause problems when you are trying to keep styles from over-writing each other. See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Browser Compatability.
While browsers are getting better at conforming to modern CSS standards, there are always going to be quirks. Not every selector works in every browser and some CSS tricks may break when your users visit your site using an old version of IE or some random build of Safari. That being said, IDs will always work, no matter what. This may not relate to your specific case, but could help prevent headaches down the road.
Best Practices/Readability.
Most importantly IMO, is the readability aspect. When looking over another developer's code, I assume when I see a class being specified in the CSS that whatever styles they have set will affect multiple areas of the page. This means I shouldn't just go changing things without further research. Opposite of that, if I see an ID being used, I can assume that any changes to that particular style will affect only that one area, and there shouldn't be any surprises for me down the road.
I'm building a 2-column layout using CSS multi-columns, and I want to give a hint as to where to break the columns.
So I say: columns: 2 on the container, and break-before: column on the child where I want the break.
IE (11 in my case) decides to split my content into 3 columns and overflows to the right of its box :-(
Chrome (using the prefixed alternatives -webkit-columns:2 and -webkit-column-break-before: always) behaves nicely.
Am I doing something wrong here ?
Is this a misbehavior of IE ?
Any workaround suggestions ?
As I am myself very interested in this question I studied the spec and some examples of multi-column layouts.
First I have to say that the spec is horribly "imprecise"!
But it seems that any break definition has precedence over the column-count value (though I could not find it explicitly in the spec or anywhere else).
This only happens if, according to the multi-column pseudo-algorithm, the respective element, which sets the break point, is already part of the last column (as in your example fiddle).
The example given by #GCyrillus (see comments on question) just works, because the height setting forces the algorithm to first fill the given height before additional column boxes are created in the inline direction.
You can see the "original" effect, if you change the height from 20em to 10em!
So after all, I tend to say that it is not a bug and IE behaves correctly.
At least it might be an error or shortcoming of the multi-column algorithm to not recalculate or refill the columns so that despite any breaks the column-count value is respected. Logically this can only be done as long as the number of defined break points is one less than the column-count value.
As actually IE 10+ is the only browser supporting the multi-column module including the break-xy properties, it is hard to tell if the behaviour is right or wrong and how other browsers will handle this in the future!
For now, I would recommend to not use these properties at all.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
What bug does zoom:1; fix in CSS?
If I am not incorrect, the default value for the CSS property zoom is 1. And in about the last 6 or 7 online code files regarding CSS, I have seen somewhere in the code this mysterious line of code:
zoom: 1;
Is there a semantic meaning to this piece of markup? Is there a reason why they include it?
Using this rule is the fastest (and - usually - the cleanest) way to activate hasLayout property for an HTML element. This, in turn, affects (usually in positive way) its rendering in older versions of Internet Explorer:
In Internet Explorer, an element is either responsible for sizing and
arranging its own contents, or relies on a parent element to size and
arrange its contents.
In order to accommodate these two different concepts, the rendering
engine makes use of a property called hasLayout that can have the
values true or false for the element concerned. We say an element
gains a layout or has a layout when the hasLayout property has the
value true.1
When an element has a layout, it is responsible for sizing and
positioning itself and possibly any descendant elements. In simple
terms, this means that the element takes more care of itself and its
contents, instead of relying on an ancestor element to do all the
work. Therefore, some elements will have a layout by default, though
the majority do not.
I'd recommend reading this article as well (the quote is from there actually).
I feel like the problem is extremely apparent. I'm working on an issue with a client's site, which actually happens on several of my clients' sites but this one is the most apparent. IE7 Is refusing to obey z-index rules. I've played around with differing values, particularly on the divs #mapWrapper and #map. Take a look here: http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php
I've done dozens of web searches and I can't find anything that resolves this issue. I also ready through Aleksandar Vacić's article on IE6/7 z-index discrepancies, but still nothing. Any assistance would be much appreciated, I'm tearing my hair out on this one.
In my experience, z-index in wonky in IE. Setting it to 0 is especially a problem, so make sure 0 isn't one of your z-index values.
Sometimes the simplest solution is to change the source-order of the html: whatever shows up later in the source will be on top. Is that a possibility in your case?
If I remember correctly, you can't have two elements with the same z-index or things get funky. I notice a lot of your paths have z-index of 1000. Some ideas to try:
Reset the z-indexes to be incremental within faux layers. That is, if you want all the boundary strokes to be on the same "layer", allocate the numbers between, say, 1001 and 2000 for that layer. The next layer above would use the numbers between 2001 and 3000, etc.
Let the document flow set the z-indexes within a few containers, and set the containers themselves to wide-apart z-indexes.
Note that historically with IE, elements like combo-box dropdowns and ActiveX controls, etc. get displayed on a layer above the actual page, and so always appear above any HTML, no matter how high you try to set the z-index. Not saying this is the problem, but perhaps using the map api triggers that problem. Read more here.
Okay, I figured it out. So the main navigation is in div #header with position: relative and no z-index defined. Once I placed a z-index on the header the menu popped right out in front of the map.
I guess the lesson here is look for every element with a defined position, be it absolute or relative, and how it is interacting with the elements in question.