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).
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Why are my CSS properties being overridden/ignored?
(5 answers)
How can I detect overwritten css properties?
(3 answers)
Closed 3 years ago.
I am using timeline.js to add a timeline to my page. Unfortunately the width of an element with class .tl-slide-content is set somewhere I cannot see. As a result, the width is 940px or 448px depending on viewport width. This is causing issues with how the text next to the photo is being displayed.
I have tried selecting the element with every ascendant class available, including any IDs that I could find. Still there is no change and I am unable to figure this out.
What I want to know is this:
what is 'element' in this context?
are there tools in the developer console that enable me to find where width is being set to 940px?
If anyone has any experience with this particular library and could point me in the direction of the appropriate selectors that would be fantastic
I have tried putting my stylesheet after the timeline, I even tried putting it right at the bottom of the body tag. Still no change.
The 'element' selector is displaying all the properties set by the inline styling within the HTML file itself. Inline styles supersede all other styling because of cascading (first to last). Last iteration is displayed.
You can see the word inline to the right of the 'element' box.
If you do not have write access to the HTML file you are working with then you may need to use !important after your width: 100%. This is really a last resort.
My suggestion is to look at their CSS source code:
https://github.com/NUKnightLab/TimelineJS/tree/master/source/less
Overwriting their CSS would just bloat your code.
Duplicate the library(if you intend to use it again) and then use the duplicate to internally mess with their source code to achieve the results you want.
I know I didn't give you a direct answer, but libraries typically have their own conventional styling, etc. without looking at the source you're just guessing...
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.
According to flexbox specs a span flex item (children of a flex container) should be converted into display:block.
Internet Explorer 10 does not apply this transformation an thus flexbox does not work on span (inline) elements.
Here a codepen of what I mean
I can just use divs but I would like to know if this is an explorer bug and if there is a better fix than changing the html code.
This is just because the (working draft) flexbox spec changed, after IE10 was released.
Here's the relevant chunk of spec text from the CSS Flexbox working draft, as it existed when IE10 was released towards the end of 2012:
The flex layout algorithm operates on boxes generated by flex items. Each of the following becomes a flex item:
[...]
4. An anonymous block wrapped around a contiguous run of non-replaced inline child elements.
Source: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items
A span is a "non-replaced inline child element". So IE10 wraps the span (and any adjacent inline content) in an anonymous block (matching the old spec) instead of converting it to a block (per the new spec).
I suspect Microsoft didn't want to change this functionality after release, to avoid breaking content that was already coded to expect a particular behavior in IE10.
So if you want to write flexbox content that works both in IE10 and more recent browser-versions, it's probably best not to depend on this particular behavior. (Be explicit; change these spans to divs, or give them display:block, since you know they're going to be converted to blocks in newer browsers anyway.)
did you try this property?
display:-ms-inline-flexbox; (for an inline flexbox container).
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 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.