I have this code
*html #alertBox {
height:100px;
}
#modalContainer > #alertBox {
position:fixed;
}
is this supported by css, i found this code in some other site(I forgot the link)
*html #alertBox {
height:100px;
}
That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.
The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.
However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.
#modalContainer > #alertBox {
position:fixed;
}
That's a child selector: it selects the alertBox when it's a direct child of modalContainer.
> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.
This is known as the star HTML hack and is useful in helping you pass certain CSS rules to older versions of Internet Explorer.
So the first example will only set the height of #alertBox to 100 pixels if the browser that is used is susceptible to the star HTML hack:
The second example (#modalContainer > #alertBox) will be applied to any element with an ID of alertBox which is also a direct child of another element that has an ID of modalContainer.
The markup would have to look something like this:
<div id="modalContainer">
<div id="alertBox"></div>
</div>
and not this:
<div id="modalContainer">
<div>
<div id="alertBox"></div>
</div>
</div>
Both of these rules are valid CSS.
Related
Short version:
Using Chrome, I noticed that the selector
#main-content p:first-of-type::first-letter:not(.subhead) { ... }
seems to fail to apply first-letter styles regardless of the class of the paragraph, but if I place the :not pseudo-class earlier, as in either of
#main-content p:first-of-type:not(.subhead)::first-letter { ... }
#main-content p:not(.subhead):first-of-type::first-letter { ... }
then it works as I would expect. Is this an issue in Chrome, or is there some aspect of CSS selectors which explains this, that I just don't understand?
(Additionally, if it's not just an issue in Chrome, can someone suggest a better title for this question?)
Long version:
The short version seems like a good self-contained question to lead with, but there's some more complicated background info which might have its own interesting ramifications. (And which might warrant its own separate question, or be another bug. Help very much appreciated???)
Originally I was trying to apply initial drop-caps to the first paragraph in a div and any subsequent paragraphs that immediately followed a horizontal rule, unless they were part of a subheading. Here's a highly-abbreviated mock of the page structure:
<div id="main-content">
<section class="panel">
<header>
<h1>Welcome Friend!</h1>
<p class="subhead">This is a subheader! (0)</p>
</header>
<div class="customhr"></div> <!-- consciously NOT an hr tag -->
<p>Here's a paragraph (1)</p>
<hr>
<p>First paragraph of a new content section (2)</p>
<p>And another paragraph. (3)</p>
</section>
</div>
And the extremely-abbreviated CSS:
#main-content p:first-of-type::first-letter,
#main-content hr + p::first-letter {
/* Drop-cap styles */
}
.subhead::before {
/* Indent sub-headings with a cute fleuron */
content: "\00a0\00a0\2767\00a0";
}
While testing in Firefox, this resulted in paragraphs (1) and (2) having drop-caps, which is what I desired. In Chrome however, the fleuron from the ::before rule for paragraph (0) also has the drop-cap styles applied. I'm fairly confident Firefox is in error here, as :first-letter should match text from the ::before pseudo-element if it is present, but instead the ::before causes :first-letter not to match anything.
In trying to fix it for Chrome, I added the :not pseudo-class to the end of the first selector (see the first CSS rule in the short version). In Firefox, ironically, this produces the desired effect just as before, but in Chrome, this now caused paragraph (1) to no longer have the drop-cap styles applied. That, I have no explanation for, but I determined it has nothing to do with the .subhead element; Chrome apparently just never applies the rule, and paragraphs following a horizontal rule are the only ones that get styled. But if I move the :not pseudo-class earlier in the rule, as in the two alternatives I gave in the short version, it once again works as expected.
I feel as though I somehow simultaneously stumbled onto two different bugs in Firefox and Chrome, but the use of pseudo-classes and pseudo-elements is slightly arcane to me and I'm not fully confident with them. So I'm curious a) whether there's anything in-spec that would explain this CSS behavior in either browser as being correct, and b) if not, whether these are already known bugs with consistent behavior that has been documented somewhere. [And c) if not, let me know whether you plan to report said bugs so that I don't accidentally file a duplicate.]
::first-letter and ::after/::before do interact in Firefox, but only when the first character is a letter, a number or some punctuation. Other symbols (like the fleuron) seem to be ignored by ::first-letter whether ::after/::before are present or not (JSFiddle).
Chrome is IMO right regarding the relationship between :not() and pseudo-elements. The documentation says that a pseudo-element must always appear at the end (that's why the first selector from the short version doesn't work):
Only one pseudo-element may appear per selector, and if present it
must appear after the sequence of simple selectors that represents the
subjects of the selector
HTML:
<p>Hover</p>
CSS:
p::after {
content: " here";
transition: all 1s;
}
p:hover::after {
font-size: 200%;
color: red;
}
Live demo: http://jsfiddle.net/SPHzj/13/ (works in Firefox and Chrome)
As you can see, I've set up CSS transitions on the ::after pseudo-element of the paragraph. Then, when the paragraph is hovered, two new styles apply for the pseudo-element which are transitioned.
This works in Firefox and Chrome, but not in IE10. My reasoning was that IE doesn't understand the p:hover::after selector, as it works in IE if you set the hover on an ancestor element, e.g. div:hover p::after - live demo: http://jsfiddle.net/SPHzj/14/.
However, this is not the case, as IE is indeed able to understand that selector. The trick is to define a p:hover {} rule as well. (Discovered by #maxw3st.)
p:hover {}
This rule can be empty. The mere presence of this rule will make the transitioning work in IE10.
Live demo: http://jsfiddle.net/SPHzj/15/ (also works in IE10)
What's going on here? Why does IE require that rule to be present in order for transitions to work on the pseudo-element? Should this be considered a bug?
Appears to be a Regression
This does appear to be a legitimate regression in Internet Explorer 10. As indicated on MSDN, since Internet Explorer 7 users have been able to target the hover state of any element , and not only a.
Curiously I tried the :active pseudo-class, and this appears to work as expected. Further establishing that this is a regression, you can see that by changing this to an a element, the transition takes place as expected (since historically, a and :hover go hand-in-hand).
Optional Work-Arounds
There are only a few solutions that I can think of at this point (while waiting for this to be fixed):
Use the empty p:hover {} fix.
Modify your markup to target ::after on a child of the p.
Modify the selector to use combinators.
The first item is that which you specified in your question, and is very attractive given its simplicity. In fact, you could use :hover{} and get the same results (probably the best solution).
The second item is also do-able, but a little less desirable since it requires modifying the markup, which is not always possible, and to be frank, a bit silly.
The last option is somewhat interesting. If you modify the selector to be based on sibling relationships, it magically begins to work again. For instance, suppose we have multiple elements in the body:
<h1>Hello, World</h1>
<p>This is my first paragraph. it does not animate.</p>
<p>This animates, with a pseudo-element.</p>
We can now use combinators to target the second paragraph:
p+p:hover::after {}
This selector will match any paragraph following a paragraph though, which isn't desirable. At this point we could consider :nth-child, or :nth-of-type to further specify which paragraph we want, even using the general sibling combinator:
h1~p:nth-of-type(2):hover::after {} /* Targets second <p> nearest <h1> */
But more ideally we would target with a class:
h1~.hoverme:hover::after {} /* Targets <p class="hoverme"> */
A Two-Char Solution?
One step further, maybe you don't want to be locked down explicitly providing a general sibling tag. You could also use the Universal Selector:
*~.hoverme:hover::after {} /* Targets <p class="hoverme"> among siblings */
This requires that the p tag have siblings, which is typically expected. Very rarely does a document consist of nothing more than a single paragraph tag.
I understand that these aren't ideal, but they are a means to an end for now. Let's hope to see this resolved in future releases of Internet Explorer.
Strangely, the effect will work on a <a> link rather than a paragraph tag.
It certainly appears to be an IE10 bug or regression. Fortunately, you've found a nice fix.
This same phenomenon popped up when I tried adding a rule to change the cursor to a pointer. However, cursor: pointer; has to be included in the pseudo's parent, it can't be used to target just the pseudo's content string in IE10.
http://jsfiddle.net/maxw3st/SPHzj/22/ uses a div as a container, http://jsfiddle.net/maxw3st/7sBVC/ uses the p:hover workaround. Adding the div was suggested by #simevidas, and works fine for the transition, just not the pointer. The pointer only seems to appear in IE10 when it is applied to the parent of the pseudo-element.
I've found such code in html5boilerplate:
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
What address? What does it affect? Elements with attribute hidden like following example?
<div hidden></div>
Yes, exactly like your example. The selector will match any element with a hidden attribute (there's an implied universal selector before the attribute selector).
The hidden attribute is a new addition to the HTML specification, and is therefore not supported in older browsers. By adding that rule to your stylesheet, you effectively polyfill the native behaviour of that attribute (which is, fairly obviously, to hide the element, similar to setting display: none).
The "known issue" in IE6 is caused by the fact that it doesn't support attribute selectors.
hidden is an attribute in HTML5
Read Detailed description here.
Also read a good explanation here
The comment would seem to suggest that that CSS solution is to address those browsers which are not compatible with the new hidden behavior by default
You can also create your own attributes using the prefix "data-". For example Jquery Mobile uses it.
Example :
Your HTML
<div data-role="header" data-position="top">
// content here
</div>
Your CSS
[data-role=header]
{
font-family:arial;
font-size:20px;
}
[data-position=top]
{
top:5px;
}
A good explanation is available here.
The W3C documentation
Long time reader, first time poster asks:
After many weeks of google and forum trawling, I am still at a loss. I have a series of nested divs, some with ids, some with classes, and some with ids and classes.
It's XHTML strict, and validates.
Original code http://www.drewsonne.com/melonstack/?topic=brisbane
eg.
<div id="main">
<div class="rEntry" id="r1">
City of Brisbane<br>
<span id="rSum1" class="rSum">This is a website summary</span>
</div>
<div class="rEntry" id="r2">
City of Brisbane<br>
<span id="rSum2" class="rSum">This is a website summary as well</span>
</div>
... et cetera ...
</div>
For the purposes of testing, my CSS currently looks like this
.rEntry{
padding:10px;
margin:10px;
}
For the life of me, I can not get this style to work at all in IE6. If I change to #r1, #r2, or div the style is applied to the appropriate elements, but neither div.rEntry nor .rEntry will make the style stick. Does anyone know where I have gone wrong?
DJS.
Now, looking at the HTML at your provided link, I don't see any divs with the rEntry class. Then I realized, they were being generated dynamically. That reminded me that for IE6, when adding CSS classes through the DOM, you have to use the className property, not class. In other words, the IE6 DOM is not seeing that the divs are of class rEntry at all.
How are those divs being generated? If it's through your own code, you may want to try modifying the class AND className properties of your elements.
edit: It looks like it's in scripts/REsultsList.js. Try changing the line that says:
entry_div_element.setAttribute('class', 'rEntry');
to:
entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';
I have three pieces of advice:
Use a reset CSS (there are several of these around);
Use a DOCTYPE declaration, if you aren't already, to force IE into standards-compliant mode (well, as standards compliant as IE can be) instead of quirks mode. I usually use HTML 4.01 transitional for this but if you comply with strict, even better;
Qualify your styles with the element name.
For example:
div.rEntry {
padding:10px;
margin:10px;
}
The more specific a style is, the greater its importance in CSS for determining which one applies. You can see if thats the issue by testing it with !important:
div.rEntry{
padding:10px !important;
margin:10px !important;
}
If that fixes the issue then you've got other CSS that is taking precedence. I suspect this is the issue as #id selectors have a higher precedence than .class selectors, which is the behaviour you're seeing.
Note: I don't recommend using !important as a general rule, just to find issues with CSS precedence. Once identified, it's generally best to fix them the "right" way.
I just went to the "original code" link, and your CSS reads:
div.rEntry{
margin:10px !important;
} padding:10px !important;
It looks like your padding style is outside of the the bracket. Are you certain this isn't all just due to a typo?
I was looking at a css file today and found the following rule set:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
What does the star mean in *padding and *line-height?
Thanks.
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
In CSS? Nothing; it is an error.
Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.
Using conditional comments is clearer and safer though.
The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:
*{color:#000;}
The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:
#uniqueValue div strong{color:#f00;}
The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".
Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:
* strong{color:#f00;}
The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.
The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.
This is a hack for IE7.
If you write this:
.test {
z-index: 1;
*z-index: 2;
}
on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.
This is not standard.
To achieve same thing with W3C Standard, follow this steps:
Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->
And use the previous rules like this:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}