IE7 and inherit: ignoring entire rule?
color
isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color
and display
are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important
ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.
IE7 CSS inheritance does not work
No, IE has never supported inherit
for any property - sorry. This has been fixed in >= IE8.
Whilst you could use a JavaScript fix to copy the properties from h2
to a
, it's probably easiest just to apply the same styling rule to both elements:
h2, h2 a {
font: something;
color: black;
text-decoration: none;
}
You don't need to set inherit
on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...
not:first-child selector
One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):
div ul:not(:first-child) {
background-color: #900;
}
If you need to support legacy browsers, or if you are hindered by the :not
selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:
Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
When limiting the scope use the default value for each CSS attribute that you are setting.
*.do files not opening in my IE7
It might have something to do with the server, not IE (got bitten by a similar situation). Is it possible that your server isn't sending the correct content type with the response?
Your response should have a header like Content-Type: text/html
or similar. Are you sending back HTML content or something else?
CSS text-overflow: ellipsis; not working?
text-overflow:ellipsis;
only works when the following are true:
- The element's width must be constrained in
px
(pixels). Width in%
(percentage) won't work. - The element must have
overflow:hidden
andwhite-space:nowrap
set.
The reason you're having problems here is because the width
of your a
element isn't constrained. You do have a width
setting, but because the element is set to display:inline
(i.e. the default) it is ignoring it, and nothing else is constraining its width either.
You can fix this by doing one of the following:
- Set the element to
display:inline-block
ordisplay:block
(probably the former, but depends on your layout needs). - Set one of its container elements to
display:block
and give that element a fixedwidth
ormax-width
. - Set the element to
float:left
orfloat:right
(probably the former, but again, either should have the same effect as far as the ellipsis is concerned).
I'd suggest display:inline-block
, since this will have the minimum collateral impact on your layout; it works very much like the display:inline
that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.
Here's a snippet with your code, with a display:inline-block
added, to show how close you were.
.app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; display: inline-block; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000;}
<div class="app"> <a href="">Test Test Test Test Test Test</a></div>
Is it possible for the child of a div set to pointer-events: none to have pointer events?
Yes, it's possible, and you basically just described how. Disable it for the parent and enable it for the child.
pointer-events
is supported in almost every browser, including IE11
Please note that pointer-events: all
is for SVG only.
For HTML, only auto
and none
are supported values.
.parent {
pointer-events: none;
}
.child {
pointer-events: auto;
}
<div class="parent">
<a href="#">Parent</a>
<div class="child">
<a href="#">Child</a>
</div>
</div>
Why is vertical-align: middle not working on my span or div?
Using CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
use "justify-content: center;" to align elements horizontally
Note: This might not work in old IE's
What's the difference between html[lang=en] and html:lang(en) in CSS?
In HTML, both the :lang()
pseudo-class and the attribute selector will match an element with the corresponding lang
attribute.
The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang()
pseudo-class which may be defined by the document language and/or the implementation, whereas an attribute selector will only check an element for that given attribute, without any accompanying document-based semantics.
For example, in HTML, the pseudo-class will also match any of the element's descendants for which there isn't a different lang
, depending on how a browser determines the language for those descendants. Usually, the descendants will inherit the language attribute from their ancestor if it is not explicitly set.
Here's what the spec says:
The difference between
:lang(C)
and the ‘|=’ operator is that the ‘|=’ operator only performs a comparison against a given attribute on the element, while the:lang(C)
pseudo-class uses the UAs knowledge of the document's semantics to perform the comparison.In this HTML example, only the BODY matches
[lang|=fr]
(because it has a LANG attribute) but both the BODY and the P match:lang(fr)
(because both are in French). The P does not match the[lang|=fr]
because it does not have a LANG attribute.
<body lang=fr>
<p>Je suis français.</p>
</body>
Notice the specific phrasings of "has a LANG attribute" and "are in French". These two phrases have very different meanings in English, as you might imagine.
In your example, the following selector will also match your .foo
element:
.foo:lang(en)
But the following selectors won't, if it doesn't have its own lang
attribute set:
.foo[lang="en"]
.foo[lang|="en"]
As for browser support, the :lang()
pseudo-class is supported starting from IE8, so IE7 really is the only browser you will be unable to support by using the pseudo-class over the attribute selector.
Based on this understanding you can then answer the question "which should I use": you should always use the :lang()
pseudo-class by default, unless certain quirks (or the need to support IE7) require working around by using an attribute selector instead.
Selectors 4 not only brings enhanced functionality to the :lang()
pseudo-class (thereby widening the gap in functionality between it and attribute selectors), but also introduces the :dir()
pseudo-class for matching elements based on their directionality. Because directionality is a language-related property, the dir
and lang
attributes work similarly in HTML, and the difference between :dir()
and its corresponding attribute selector is analogous to that between :lang()
and its corresponding attribute selector — to the point where the first sentence of the following quotation is in fact a word-for-word copy of the same paragraph in the section describing :lang()
:
The difference between :dir(C) and ''[dir=C]'' is that ''[dir=C]'' only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches ''[dir=auto]'' will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]
Related Topics
Does a CSS3 Animation Run When Parent Element Has Visibility: Hidden
How to View Google Maps in "Print" Mode
Use an Image Instead of a Bootstrap's Glyphicon
Firefox Printing Cuts Canvas on End of First Page, How to Make It Not Do That
Column Width in Rich:Datatable
Bootstrap - About Fonts Files (.Eot .Svg .Ttf .Woff and .Woff2) Roles and Usages
Identify Browser and Os with CSS
Horizontally Center Absolute Positioned Element Below The Center of Another Element
Scss: Change Element Style If Child Input Is Checked or Not
How to Use Pure CSS Selector to Select Hidden Element
Internal Stylesheet Not Working in Ie9 with Jsf
Padding Between Checkbox and Label
Force Absolute Div to Listen to Parent's Padding
Using CSS Modules How to Define a Global Class
Style Ng-Bootstrap Accordion with CSS
Why Does an Inline-Block Div Get Positioned Lower When It Has Content