The big list of fixed stuff in IE7

The IE7 blog has a new post of items that have been fixed in the upcoming release of IE7. While not on the list, the problem I found with alpha transparent png sprites has been fixed for the final release.

Take a look at the list and think of it as new tools to use.

Bugs we fixed

All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)

  • Peekaboo Bug
  • Internet Explorer and Expanding Box Problem
  • Quirky Percentages
  • Line-height bug
  • Border Chaos
  • Disappearing List-Background bug
  • Guillotine Bug
  • Unscrollable Content bug
  • Duplicate Characters Bug
  • IE and Italics
  • Doubled Float-Margin bug
  • Duplicate Indent bug
  • Three pixel text jog
  • Creeping Text bug
  • Missing First letter bug
  • Phantom box bug

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

  • Overflow now works correctly! (That means boxes do not automatically grow any more.)
  • Parser bugs: * html, _property and /**/ comment bug
  • Select control: CSS style-able and not always on top
  • Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
  • Addressed many relative positioning issues
  • Addressed many absolute positioned issues
  • % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
  • <?xml> prolog no longer causes quirks mode
  • HTML element truly independent of the Body (now gets its own width, height etc.)
  • 1 px dotted borders no longer render as dashed
  • Bottom margin bug on hover does not collapse margins
  • Several negative margin issues fixed
  • Recalc issues including relative positioning and/or negative margins are fixed now
  • CLSID attribute of <object> tag no longer limited to 128 characters
  • :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
  • Descendant selector now works properly for grand children when combined with other selectors
  • First-line and first-letter now applies when there is no space between word :first-line and opening brace {
  • Pseudo-classes now are working as expected if selector is excluded
  • The :link selector works now for anchor tag with href set to bookmark
  • Addressed !important issues
  • PositionIsEverything piefecta-rigid.htm now works
  • List-item whitespace bug fixed
  • Fixed Absolutely Buggy II
  • Absolute positioned elements now use always correct containing block for positioning and size information
  • Nested block elements now respect all overflow declarations (hidden, scroll, etc)
  • Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
  • <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
  • We no longer lose the image aspect ratio on refresh
  • Cleaned up our ident parsing according to CSS2.1 rules
  • Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
  • And many more

We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>
  • Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
  • Improved <object> fallback

Finally, we added new features from CSS2.1:

  • Min/max width/height support (also for images, which did not work in IE7b2)
  • Transparent borders
  • Fixed positioning support
  • Selectors: first-child, adjacent, attribute, child
    • A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
  • Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

IE Blog

IE7 is still not as good as Firefox, Opera, or Safari. However, Microsoft is planning an aggressive updating campaign and hopefully it won’t be long before we can count on our average user’s browser supporting advanced CSS styles. It’s time to stop complaining about IE6 and begin planning how you will use these new tools.

Attribute selectors to provide language information

Attribute Selectors for International Web Sites

Sébastien Guillon, recently wrote a post about using the CSS2 attribute selector and content rule
to let visitors know what to expect when clicking on a link to an international web site. Inspired by his approach, I’ve simplified some of the code and added background images to
represent the countries.

Guillon’s original project focused on adding a text description after the link in the site’s native language. To do this, he used a set of descending selectors to look at the page’s language declaration and the link’s hreflang attribute. I am assuming the site that hosts this CSS is in english. However, it would not be difficult for you to simply change the generated content if your site is written in French, Spanish,
Swahili, etc.

Sample list of international Yahoo sites

Europe

Now look at the final version with new CSS. Internet Explorer users will not see a difference, try Firefox or Opera. Internet Explorer 7 beta 2 shows the flags but does not show the generated content.

The hreflang Attribute

The hreflang allows the user/browser to define the language of a link’s targeted page to avoid presenting
unreadable information:

The hreflang attribute provides user agents with information about the language of a resource at the end of a link, just as the lang attribute provides information about the language of an element’s content or attribute values.

W3C.org

The hreflang attribute defines the language of the web site you are sending someone to. The language is defined with a two letter abbreviation, such as en, fr, sp… You can also define the locality of this language by adding the country code to this language. This is particularly helpful for languages that have dialects. A Mexican site would have this attribute: hreflang=”sp-mx”.

The Attribute Selector

CSS2 allows us to look for tags that contain specific attributes. We can look for blockquotes with cite attributes, tables with summaries, table cells with header attributes,
and our little friend, the link with an hreflang attribute.


/*English */
a[hreflang="en"]:after, a[hreflang|="en"]:after {content:"\A0(In English)";}

Breaking it down

This rule uses a combination of attribute selector and pseudo-class to transform the link from common to fabulous.

a[…]
Look for a link with an attribute
hreflang=”en”
The hreflang attribute must include the letters “en”. This allows the CSS to work on links that do not define a country variation
:after
This pseudoselector defines the space after the link
{content:”\A0(In English)”;}
After the link, place the following text: (In English)
hreflang|=”en”
The hreflang attribute must include the letters “en” within a hyphenated set, i.e. en-us, en-ca, …

Adding the flag

Now that we’ve notified the user about what language the link will be in, let’s tell them the country the site is from. Once again, we will look at the hreflang attribute for this information. This rule is not as neat and tidy. For each country, we are going to look for all of the possible language attributes. For instance, Canadian links could have hreflang=”fr-ca” and hreflang=”en-ca”.


/*Canada */
a[hreflang="en-ca"], a[hreflang="fr-ca"] {background:URL(flag-sprite.png) no-repeat 0 0; padding-left:35px;}

This time, we will give links that have Canadian country codes 35px padding to the left side and a background image of the Canadian flag that sits to the
left edge of the link’s text. This style sheet is using an image sprite to keep the server requests to a minimum. See the Alistapart.com article about using
image sprites for more information on this technique.

Et Voilà

There we have it. A set of international links with the country of origin and language clearly defined. All of this has been made possible by our friends, the
attribute selector, the pseudo-class, and the content style. Tune in next week as we learn how to make a cruise ship out of two
shoe-boxes and an XML schema.

Fine Print

This has not been tested in Safari, but it shouldn’t be a problem. The pretty and useful presentation elements will not appear in IE6, NN4, and probably
most alternative devices (My Treo shows the flags but not the added content). I do not know how assistive devices would render these styles, more than likely they would be ignored. This project falls under
the “build for the best, don’t hurt the rest™” protocol.

Resources

IE7 Beta 2 is out for developers to test

IE7 Beta 2 is now available for developers to begin testing. I’ve been suggesting on the web standards group mailing list that people need to begin looking beyond 2005 and start coding for IE7 and 2006. That doesn’t mean you design for IE7 and hack for Firefox. No, it means you can begin using more sophisticated CSS rules. Here’s a very brief summary of what I’ve seen with IE7 Beta 2 so far.

Rolling out IE7

Microsoft has an aggressive agenda to upgrade people from IE6 to IE7. By the end of Fall, we should see a significant percentage of our web site visitors using IE7 and by the end of the year, the majority of our traffic will be IE7. Those without IE7 are machines with illegal copies of XP, people with XP Service Pack 1, and those that don’t accept Microsoft service updates.

Use real CSS

If you are working on a site now, begin using real CSS.

  • Use child selectors, first-child, attribute selectors, etc.
  • Hover your list items and more. IE7 supports the hover pseudoclass on more than the link.
  • IE7 offers full support of alpha transparent PNG graphics, so begin using them as well.

Forget what you knew about “* HTML”, those hacks now belong in a style sheet that is introduced via a conditional comment. They are gone, kaput, zilch. Sure, they’ll still work on IE6, but you’re going to have one heck of a nightmare keeping track.

Test Sites

I am a big fan of All that malarkey (Andy Clarke). However, his site is full of special rules for IE6 and its a great testing ground to see what IE7 chokes on and what it does as good as Firefox, Opera, and Safari. If your site is fairly hack free, you probably won’t notice a difference going from Firefox to IE7 Beta 2. Start hunting around and finding the errors.

What is still broken on IE7

There are two major issues that I have with IE7.

  1. No generated content. You can’t use CSS to add checkmarks to visited links, clearing containers spans, etc.
  2. Double float margin still exists. This can be fixed by adding display:inline to your floated objects when this problem occurs.
  3. While I haven’t been able to nail down the specifics, there seems to be some bugginess with positioning absolute/relative.

I’m sure there will be much better analysis of this launch by PositionIsEverything, Quirksmode, and the IE7blog. I hope these scribbled notes help you move forward. IE7 is a good thing. It’s not perfect, but damn it sure is nice to ditch the son of suckerfish javascript, class=”firstitem”, haloed transparent gifs, et al.

I forgot to mention, IE7 replaces IE6 on your computer. You need to have an extra computer to continue testing your pages in IE6. If you only have one windows box, I’d suggest keeping IE6 on that and just program for Firefox, et al and placing your IE6 hacks in a conditional comment linked style sheet

— This was originally published on tdrake.net