div > span = <span> with <div> as parent:

This is a span which should be italic (in all but IE6) b/c IE6 doesn't recognize child selectors
This is a span which should be italic (in IE6 too) b/c of an .ie6 class assigned to it.
This is a span which should be italic (except in IE6).

The CSS:

div#ex1 > span {
font-style: italic;
}
Above was the original coding using a child selector, which doesn't work in IE6.

span.ie6 {
font-style: italic;
}
Above is a quick addition to work in IE6, though it does require creating a new class target.

min-width = applies to the element

This <div> should be at least 500px wide.


The CSS:

div#ex11 div {
min-width: 500px;
background: yellow;
}
Above style rule works in IE7 and Firefox, but not in IE6, which by default extends only as far as the content (i.e., text) extends.

Below the original code is rewritten with an IE6 HACK
div#ex11 div {
width: 500px; In IE6 the width property works basically like the min-width property in IE7 and Firefox.
min-width: 500px;
float: left;
background: gray;
}
div#ex11 div {
width /**/: auto; This Hack applies these styles to all BUT IE6, basically overwriting the IE6-specific code for Firefox and IE7.
background /**/: yellow;
}

max-width = applies to the element

This <div> should be no more than 500px wide. This <div> should be no more than 500px wide. firefox_doesnt_have_wordBreak_CSS_rule._Can_use_the_Conditional_Statement_in_Head_part_of_this-page_(note spaces_will_break_to_a_new_line_in_a_text_string_in_firefox.<space> So_you_can_either_add_spaces_or_you_can_set_overflow_to_"hidden",<space> which_doesn't_break_the_text_to_a_new_line,_it_simply_hides_it_from_view. This <div> should be no more than 500px wide. This <div> should be no more than 500px wide.


The CSS:

div#ex12 div {
float: left;
max-width: 500px;
background: pink;
}

Hack to display ONLY in IE6
/*\*/ * html div#ex12 div {
background: green;
width: 500px;
margin: 0 0 15px 0;
} /**/

You could add the declaration: "word-wrap: break-word;" to the above Hack. However, this is a proprietary Microsoft CSS rule, which needs to be hidden within a Conditional Comment to validate. So I placed the Conditional Comment (that you see below) in the header area.

<!--[if IE]>
<style type="text/css">
div#ex12 div {word-wrap: break-word;}
</style>
<![endif]-->

NOTE 1:  the text in the pink box displays differently in Firefox compared to IE6 & IE7. In case you didn't understand the text within the pink box, basically the Conditional Comment (see above) forces IE6 & IE7 to break a long-string word where the containing box, in this case a <div>, ends. Firefox doesn't handle long-string words so well. You need to physically create a space to have the word break. See where I placed the <space>s, which is where the text breaks to a new line in Firefox, even if beyond the edge of the pink box.

Luckily, if you were to place a second block-level element to the right of the pink box, say a second column, the text that extends beyond the edge of the pink box would simply fall BELOW the second column's content. See the section "The Case of The Problem" on IE and the Expanding Box Problem.

NOTE 2:  the difference in spacing between the top of the "The CSS:" header and the bottom of the colored box above it. For IE6, a browser-specific margin declaration is applied, manually adding space between these two elements. This makes things display in IE6 more like things appear in Firefox. Compare this to IE7.

This kind of extra spacing above and below a block-level element seems to appear in Firefox, but NOT in IE6 & IE7. Keep this in mind when you position elements on your site.

In case you aren't sure about the specifics, block-level elements, such as a <div>, <h2>, <p>, automatically generate a new line both before and after their boxes. Inline-level elements, such as <span>, <a>, and <img>, do not automatically generate a new line. Of course, you can use the display property to change an inline element to display like a block level element and vice versa.