CSS adjacent sibling selectors and IE 6 Jul26 '05

Here’s the problem, which occurs in IE 6/Windows:

Everything below the header, Available Products, should be below the big image. In CSS terms, it should clear the block-level element, and be treated as a new block-level element.

Firefox renders it correctly:

The CSS rule that I have in place looks like this:

.pic img
{
float: left;
}

.pic + *
{
clear: left;
padding-top: 20px;
}

The element with a class of "pic" is the one with the large picture. If you can imagine a box surrounding that large picture:

The red box above demonstrates how the <div class="pic"> appears.

So, everything after <div class="pic">, in the HTML, should be cleared to the next line. It should not float up next to it, on the right, like it does in IE.

Here is the stripped-down HTML (for the sake of example):

<div class="pic">

<img />
<p>Dark green sublimated plate on ebony, piano–finish plaque</p>
<p><a>Order this item online!</a></p>

</div>

<h3>Available Products</h3>

Unfortunately, IE for Windows has yet to support CSS adjacent sibling selectors, which is what the example CSS code demonstrates.

CSS explanation

The CSS code above declares that the image inside the <div class="pic"> is floated to the left.

Also, it declares that any element which follows a <div class="pic"> element should be cleared, and treated as a new block-level element, meaning it skips down to the next line, instead of floating up to the right of it.

The CSS selector looks like this:

.pic + *

This is an adjacent sibling selector. Like the term states, it selects an element next to (adjacent) to the specified element.

The .pic part indicates which element we are referring to.

The plus sign (+) indicates an adjacent sibling selector is about to be declared.

And, finally, we are using the star sign (*) to indicate all, or everything.

We don’t have to use the star sign (*), if we don't want. We could have it set up so that only <h3> elements, which follow the .pic element, get used.

That would look like this:

.pic + h3

Related

But, as mentioned above, IE 6/Windows does not support adjacent sibling selectors - but Firefox, Safari, Opera, and many other browsers do.

And... Internet Explorer 7 is right on the horizon, and it will certainly have support for adjacent sibling selectors - among many other CSS advancements.

Adam Howell discusses adjacent sibling selectors, in his article about firming up your ASS knowledge.

Categories: Browsers , CSS , Tutorials

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

Popular Pages

  1. Fast rounded corners in Photoshop (7423 recent visits)
  2. PHP – passing variables across pages (2558 recent visits)
  3. JavaScript set selected on load (2413 recent visits)
  4. Removing all child nodes from an element (1828 recent visits)
  5. Firefox 3 smart address bar: wildcard search (1755 recent visits)
  6. iPod songs out of order? (1314 recent visits)
  7. Britney - Everytime piano tab (1137 recent visits)
  8. MySQL LEFT JOIN syntax (884 recent visits)
  9. Firefox 3 smart address bar: wildcard search (722 recent visits)
  10. Date difference in MySQL (651 recent visits)

Similar Entries

Stats

83 unique visits since July 2008

Syndicate

Advertisements