CSS Adjacent Sibling Selectors - IE8 Problem

CSS adjacent sibling selectors - IE8 problem

You need to make sure IE is running in standards mode - put in a doctype like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

From the documentation:

The adjacent sibling combinator is a "plus sign" (+) character that separates two simple selectors. Whitespace is not significant.
A selector of the form "E+F" matches element F when it immediately follows sibling element E in the document tree, ignoring non-element nodes (such as text nodes and comments). Element E and F must share the same parent and E must immediately precede F. To match the first child of the parent, use the :first-child pseudo-class.
Note Requires Windows Internet Explorer 7 or later.

Note Combinators are enabled only in standards-compliant mode (strict !DOCTYPE).

Adjacent sibling selector not working with dynamically added class in IE7/8

Well, this is a known bug, see the section about + selector here: http://www.quirksmode.org/css/contents.html

IE8 focus pseudo class and Sibling Selector

According to http://www.quirksmode.org/css/contents.html Adjacent Sibling Selectors are not correctly supported by IE browsers, and based on that I am afraid I must say - sorry, you cannot achive what you want using CSS only.

But you can use jQuery, and this is how you can do it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        /* .textbox:focus { background-color: #FFFFBF; } */
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        /* .textbox:focus + .hint {color: Red; } */
        .hintOn { color:Red; }
        .textboxOn { background-color: #FFFFBF; }
    </style>
    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        var Hints = {
            Swap: function(obj) {
                $(obj).parent().find('.hint').toggleClass("hintOn");
                $(obj).toggleClass("textboxOn");
            },
            Init: function() {
                $(function() {
                    $('.textbox').focus(function() {
                        Hints.Swap(this);
                    }).blur(function() {
                        Hints.Swap(this);
                    });
                });
            }
        };
        Hints.Init();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
                <label for="ListName" class="label">List Name</label>
                <input id="Name" name="ListName" type="text" class="textbox" />
                <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
                <label for="ListSlug" class="label">http://List/Username/</label>
                <input id="Slug" name="ListSlug" type="text" class="textbox" />
                <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

In my solution I included reference to Microsoft hosted jQuery, and wrote simple method to apply styles you need. You can easily modify "highlighted" state of hint and input box by amending your CSS classes.

I have tested my solution on IE6, IE7, IE8, Firefox, Opera, Chrome and Safari and it is working correctly.

css child ( ) selector not working in IE8?

You need to use the HTML5 Shiv for IE versions under 9:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

CSS selector if exist adjacent sibling

It is possible to place the span before the div in the html, and then position it with css.

Then use a css adjacent sibling selector to select the div adjacent to the span.

Finally put a position absolute on the span, and give it a top:..px to get it below the div.

So you get the following:

span + div {

  background-color:red;

}

<td> 

  <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span> 

  <div class="t-numerictextbox">

    <div class="t-formatted-value">$0.00</div>

    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName">

  </div>        

</td>

IE8 CSS :not selector

Without the need of using javascript, you may simply define those properties for all links

ul.dynatree-container a {
    color:black;
    text-decoration:none;
    vertical-align:top;
    margin:0;
    margin-left:3px;
    border:1px solid white
}

and thus revert them with

ul.dynatree-container a.remove {
    ...
}

A bit verbose but it will work also on IE8

Child selector problem in IE7, IE8

Always set list-style and list-style-type properties to the ul (not the li).

ol { list-style-type: decimal; }
ol > li > ol { list-style-type: lower-alpha; }
ol > li > ol > li > ol { list-style-type: lower-roman; }

Update: Now that you’ve added the HTML to your question, it looks like a couple of things are wrong:

You’re not declaring a doctype. Try adding <!doctype html> above the first line of your code.

Your HTML for your main OL is invalid. You’re closing the LI elements too early. An OL element can’t have another OL as a direct child element. This is what it should look like:

<ol>
 <li>
  <div>level1</div>
   <ol>
    <li>
     <div>level2</div>
     <ol>
      <li>
       <div>level3</div>
      </li>
     </ol>
    </li>
   </ol>
  </ol>
 </li>
</ol>

CSS Adjacent Sibling Selectors - IE8 Problem