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">]
Well, technically this is not an acroynm or even a tag. :)
"An acronym is defined as a WORD formed from the initial letters of a
multi-word name. The important point here is that an acronym must be a WORD
- this means that the joined initial letters must be able to be pronounced."
http://www.maxdesign.com.au/presentation/abbreviations/
Metropolitan Statistical Area (MSA) is actually an initialism - An
abbreviation pronounced as the names of the individual letters formed only
from the initial letter of constituent words.
Initialisms are subsets of abbreviations. So theoretically this should be
marked up using the <abbr> element:
<abbr title=" Metropolitan Statistical Area">M.S.A.</abbr>
The problem is that the <abbr> is poorly supported by IE5 and IE6. This
means you may have to (1) revert to using the <acronym> element, or (2)
place a span inside your <abbr> element and style this instead or (3) use
JavaScript:
http://annevankesteren.nl/2003/08/improved-styling-abbr-in-ie
The full stops between the letters in the initialism are used by some
authors in order to allow screen readers to spell out the letters properly
rather than coming out as a single unintelligible word - "msah".
Oh, and I'd vote for just the first instance on each page - as others have
suggested.
Thanks
Russ
Create an new css document and link to it from your html page using the following filter:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->
Where iestyles.css is your css document containing all the rules which will be only applied if IE browser is detected.
/* undohtml.css
(CC) 2004 Tantek Celik. Some Rights Reserved.
http://creativecommons.org/licenses/by/2.0
This style sheet is licensed under a Creative Commons License.
Purpose: undo some of the default styling of common (X)HTML browsers */
:link,:visited {text-decoration:none}
ul,ol {list-style:none}
h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img {border:none}
address {font-style:normal}