IE7 CSS

IE 7 New Css - Features
What we can use that FF supports as well - we will still have to use filters and hacks for IE6.
And in many cases we will not be ble to use them but it's good to be aware that they are supported.
 
Bugs Fixed:
 
    *  Peekaboo bug
    * Guillotine bug
    * Duplicate Character bug
    * Border Chaos
    * No Scroll bug
    * 3 Pixel Text Jog
    * Magic Creeping Text bug
    * Bottom Margin bug on Hover
    * Losing the ability to highlight text under the top border
    * IE/Win Line-height bug
    * Double Float Margin Bug
    * Quirky Percentages in IE
    * Duplicate indent
    * Moving viewport scrollbar outside HTML borders
    * 1 px border style
    * Disappearing List-background
    * Fix width:auto
 
	In addition we've added support for the following
 
    * HTML 4.01 ABBR tag
    * Improved (though not yet perfect) <object> fallback
    * CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
    * CSS 2.1 Fixed positioning
    * Alpha channel in PNG images
    * Fix :hover on all elements
    * Background-attachment: fixed on all elements not just body
	* Min/max width/height support (also for images, which did not work in IE7b2)
    * Transparent borders
    * Fixed positioning support
    * Alpha channel PNG support (Not a CSS feature)
 
We will concentrate on CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
 
We use a lot of descendant selectors: div#foo div#fooFoo p {color: red}
It's useful, yes, but it's also a fairly generalized kind of selection combination.
 
 
A TREE _ VIEW
Body  element has two children: a p element and a ul element. The p element, in turn, has two children: the em and strong elements directly below it on the tree. The p element has one parent, and that's the body element. In fact, an element can only ever have one parent, although it can have many children.
 
 
CHILD SELECTOR
 
Child combinator targets direct children of another element - designated by a ">" symbol
ex: <div><p><span>Text goes here</span></p></div>
div span {color: red;} would work
div>span {color: red;} this would not
it has to be a direct child - take out the P tage and it will target all spans that are children of <div>
ex:
body > p {color: green;}This rule will make green any paragraph which is a direct child of the body element. Therefore, any paragraph which is the child of some other element-- for example, a div or a table cell-- will not be matched by this rule.
How is this different from traditional contextual/descendant selectors? The difference is that, given a selector like body p, any paragraph which is a descendant of the body will be matched. That can mean a child paragraph, of course, but it can also mean a paragraph which is contained inside a table cell that's inside a table that's part of a div.
 
ADJACENT SIBLING
 
Adjacent Sibling combinator, designated by a "+" symbol
The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:
h2+p {color: blue;}, you would be able to make the text blue for any paragraph that directly followed an H2 element.
Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:
 
li+li {border-left: 1px solid black;}
 
FIRST-CHILD
 
allows us to format the first HTML element differently in any given section without having to assign it a class or id. So, for example, say you wanted the first paragraph in the content area to never have a top margin, you could use this CSS command:
 
#content p:first-child {margin-top: 0;}
 
1.	div.article p:first-child {
2.	font-style:italic;
3.	}
 
 
 
ATTRIBUTE SELECTORS
 
Attribute selectors may match in four ways:
 
[att]
    Match when the element sets the "att" attribute, whatever the value of the attribute. 
[att=val]
    Match when the element's "att" attribute value is exactly "val". 
[att~=val]
    Match when the element's "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces). 
[att|=val]
    Match when the element's "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]). 
 
Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.
 
Example(s):
 
For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:
 
h1[title] { color: blue; }
 
blockquote[title] { color: red }
[matches all blockquote elements with a 'title' attribute. ]
 
p[foo|="bar"] { background-color: yellow }
[would match <p FOO="bar-foo"> but not <p FOO="foo-bar">]