Making Your Site Look Great in IE7

Making Your Site Look Great In IE7 Markus Mielke Program Manager Internet Explorer Platform NGW042

Real focus of this talk: standards based design with IE

Will show you:

How we prioritized IE7 work

Fixes and features

How you can prepare for IE7

Leave plenty of room for questions

How Did We Prioritize IE’s Work?

We listened to your feedback

Your issues

MeyerWeb, PositionIsEverything, Quirksmode, WASP

Your requests

IEBlog, newsgroups, conferences

Our focus: Folks who need to make a living

Fixed top pain points/consistency issues

Added most-requested standards features

Will Show You

Fixes and features

Position Is Everything

PIE collects IE6 issues

One of the sources we used

Focus on making your life easier

And A Bunch Of Other Bugs Too

Parser bugs: * html, _property or /**/ comment bug

Memory leaks in jscript engine

Select control: style-able and not always on top

Auto-sizing of absolute positioned element with right and left

great for 3 column layouts

Relative positioning issues

% calculations for height/width for abs positioned elements

hover effect working not just over text

<?xml> prolog no longer causes quirks mode

HTML element truly independent of the Body

1 px dotted borders no longer render as dashed

Bottom margin bug on hover does not collapse margins

Overflow Behavior Now Fixed!

IE6 used to grow the boxes (even if not asked)

IE6

IE7 (and all other modern browsers)

We Also Added Most-Requested Features

Extended existing implementation to be consistent with the W3C spec

Enable :hover on all elements not just on <a> tag

Background-attachment: fixed on all elements not just body

Improved <object> fallback

Added additional standards features (CSS 2.1 and HTML 4.01)

Enhanced Selector support: first-child, adjacent, attribute, and child selectors

CSS 3 attribute selectors: prefix, suffix and substring

Min/Max Width/Height now in MIX build

Fixed positioning support

Alpha channel PNG support

New Standards Features In Action

Fixed positioning

Transparent PNGs

Background-attachment: fixed on all elements not just body

Hover on all elements to build richer menus

Other Ways To Make Your Site Great

Native XMLHTTP

High Assurance SSL Certificates

IE7 integration with Windows RSS Platform

Open Search

Will Show You

Fixes and features

How Does It Affect You?

Behavior changes for better standard support mean some pages break

Need to balance standard compliance with app-compat

IE6 introduced quirks mode and strict mode

All fixes are under strict mode

We are here to help you

Compatibility lab at MIX

Most common breaks and mitigation

Tools to identify and fix breaks

Documentation up on MSDN

Common Breaks And How You Can Easily Fix Them

User Agent Strings and Browser Detection

If you need a switch, base it on “greater equal” rather than “equal”

Overflow

Use min-height/width or correct box size

XML Prolog Bug affecting the CSS Box Model

<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

CSS Hacks

Community workaround: CSS hacks

Rely on parser bugs and/or not yet implemented features

Likely to break from release to release

Examples of hacks that broke:

* html (Target: IE only)

_height:50px; (Target: IE only)

height/**/: 300px; (Target: Everyone but IE)

html > body (Target: Everyone but IE)

Ideally no CSS hacks are needed – but they are

Alternative: Conditional Comments to target browser versions

Maintainable and available since IE5

The Holly Hack and Has Layout

Most famous CSS Filter break: the Holly hack

* html {height:1%;}

Used to force “Has Layout”

IE internal data structure – still exists in IE7

Responsible for sizing and positioning itself

Article produced in cooperation with WASP http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/cols/dnexpie/expie20050831.asp

What can you do?

IE6 and below: Use of Holly hack is ok

IE7 (if needed): conditional comments + zoom:1;

How Do We Analyze Breaks?

What’s Next For IE

With the release of the MIX build we are locking down layout changes

Please test your pages!

We know we are not done yet

Committed to full CSS2.1 support in the future

Working on public bug database where you can report and track your issues

Call To Action

Dev community and Microsoft are dependent on each other

Improvements in standards support mean that behavior will change

End users do not like broken pages

So we need your help!

Please prepare your pages to be ready for IE7

Please send us feedback - [email_address]

We have great documentation that will help you: www.msdn.com/ie

Community Resources

At MIX

MIX Chat – We’re heading over there after this talk!

IE Compatibility lab

After MIX

IE Dev Center: http:// msdn.microsoft.com/ie /

IE Blog: http://blogs.msdn.com/ie/

IE feedback alias: [email_address]

Session Evaluations We value your feedback, so please submit an online evaluation for each session you attend! To make it worth your while, we pick one evaluation from each of the ten session timeslots. If we pick your eval, you will be eligible to win a Creative Zen MicroPhoto

Appendix

3 Pixel Text Jog Before (IE6) and After (IE7)

IE7:

Before:

Notice the gap?

A Word about HasLayout

Are there side effects?

Content of the element cannot flow around other boxes

bad for float based layouts

An element with layout cannot "shrink to fit" its children

Can I still force layout in IE7?

Yes, {zoom:1;} still works

HTML element independent of Body

Viewport of Scrollbar is now outside of the HTML element

Accordance with section 11.1.1 in CSS2.1 spec

Viewport has 2px window border that can not be influenced

Benefit:

Set margins on HTML element

Size the HTML element

Set borders etc.

Allows absolute/fixed positioned elements on the right viewport edge

auto alignment for building flexible 3-column layouts

<style>

body {

margin: 0px; background:#333;

}

#left {

position: absolute; top: 20px; left: 20px;

border: 5px solid #ccc; background: #666;

width: 120px;

}

#middle {

position: absolute;

top: 20px; bottom: 100px;

left: 170px; right: 170px ;

}

#right {

position: absolute; top: 20px; right: 20px;

width: 120px;

}

</style>

Conditional comments

An easy way to target specific browser versions

Maintainable and available since IE5

Rich expressions (lt, lte, gt, gte etc.)

Based on HTML comment syntax

Use to provide special style sheet:

Why shouldn’t we use filters?

We would not recommend to use CSS filters since they are not supported

Neither by standard body nor implementers

Are there inherently bad?

No, if they are used with caution

Target ONLY "older than current" (frozen or abandoned) versions of browsers

Be aware that they are filters (Mark them for maintainability)

Overflow (1of 2)

Overflow allows to specify whether content of a block-level element is clipped when it overflows the box

IE6 used to grow the boxes (min-height)

Prevented us from implementing min/max-width/height

Look at code:

Overflow (2 of 2)

The CSS2.1 default is overflow: visible

All sites that tended to enlarge boxes will now overflow

We only implemented this for non-replaced block level elements and inline-block elements

Not supporting table-cells

pages will still be printed using the old behavior

Before IE7

Native XMLHTTP

In IE7, XMLHTTP is now also exposed as a native script object

Can be instantiated using the same syntax across different browsers

Decouples AJAX functionality from an ActiveX enabled environment

Syntax if (window.XMLHttpRequest){ // If IE7, Mozilla, Safari, etc: Use native object var xmlHttp = new XMLHttpRequest() } else { if (window.ActiveXObject){ // ...otherwise, use the ActiveX control for IE5.x and IE6 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }