Posted By

nealwatkins on 07/13/07


Tagged

css ie7


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

basicmagic


IE7 CSS


 / Published in: CSS
 

URL: IE7 CSS

IE7 CSS

  1. IE 7 New Css - Features
  2. What we can use that FF supports as well - we will still have to use filters and hacks for IE6.
  3. And in many cases we will not be ble to use them but it's good to be aware that they are supported.
  4.  
  5. Bugs Fixed:
  6.  
  7. * Peekaboo bug
  8. * Guillotine bug
  9. * Duplicate Character bug
  10. * Border Chaos
  11. * No Scroll bug
  12. * 3 Pixel Text Jog
  13. * Magic Creeping Text bug
  14. * Bottom Margin bug on Hover
  15. * Losing the ability to highlight text under the top border
  16. * IE/Win Line-height bug
  17. * Double Float Margin Bug
  18. * Quirky Percentages in IE
  19. * Duplicate indent
  20. * Moving viewport scrollbar outside HTML borders
  21. * 1 px border style
  22. * Disappearing List-background
  23. * Fix width:auto
  24.  
  25. In addition we've added support for the following
  26.  
  27. * HTML 4.01 ABBR tag
  28. * Improved (though not yet perfect) <object> fallback
  29. * CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
  30. * CSS 2.1 Fixed positioning
  31. * Alpha channel in PNG images
  32. * Fix :hover on all elements
  33. * Background-attachment: fixed on all elements not just body
  34. * Min/max width/height support (also for images, which did not work in IE7b2)
  35. * Transparent borders
  36. * Fixed positioning support
  37. * Alpha channel PNG support (Not a CSS feature)
  38.  
  39. We will concentrate on CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
  40.  
  41. We use a lot of descendant selectors: div#foo div#fooFoo p {color: red}
  42. It's useful, yes, but it's also a fairly generalized kind of selection combination.
  43.  
  44.  
  45. A TREE _ VIEW
  46. 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.
  47.  
  48.  
  49. CHILD SELECTOR
  50.  
  51. Child combinator targets direct children of another element - designated by a ">" symbol
  52. ex: <div><p><span>Text goes here</span></p></div>
  53. div span {color: red;} would work
  54. div>span {color: red;} this would not
  55. it has to be a direct child - take out the P tage and it will target all spans that are children of <div>
  56. ex:
  57. 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.
  58. 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.
  59.  
  60. ADJACENT SIBLING
  61.  
  62. Adjacent Sibling combinator, designated by a "+" symbol
  63. The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:
  64. h2+p {color: blue;}, you would be able to make the text blue for any paragraph that directly followed an H2 element.
  65. 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:
  66.  
  67. li+li {border-left: 1px solid black;}
  68.  
  69. FIRST-CHILD
  70.  
  71. 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:
  72.  
  73. #content p:first-child {margin-top: 0;}
  74.  
  75. 1. div.article p:first-child {
  76. 2. font-style:italic;
  77. 3. }
  78.  
  79.  
  80.  
  81. ATTRIBUTE SELECTORS
  82.  
  83. Attribute selectors may match in four ways:
  84.  
  85. [att]
  86. Match when the element sets the "att" attribute, whatever the value of the attribute.
  87. [att=val]
  88. Match when the element's "att" attribute value is exactly "val".
  89. [att~=val]
  90. 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).
  91. [att|=val]
  92. 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]).
  93.  
  94. Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.
  95.  
  96. Example(s):
  97.  
  98. For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:
  99.  
  100. h1[title] { color: blue; }
  101.  
  102. blockquote[title] { color: red }
  103. [matches all blockquote elements with a 'title' attribute. ]
  104.  
  105. p[foo|="bar"] { background-color: yellow }
  106. [would match <p FOO="bar-foo"> but not <p FOO="foo-bar">]

Report this snippet  

You need to login to post a comment.