IE7 Hacks

Microsoft has fixed much of the bugs that plagued IE6 and in the process removed the filters we used to target Internet Explorer in our CSS. As Lord God Martha would say, this is a good thing.

However, there will be a time when you need to send a rule to IE7 and not to IE6. Or perhaps you need to send a rule to IE7 and to IE6. I’ve put together a test page of IE6 hacks to see what IE7 doesn’t walk right past. I’m condensing the test page into the paragraph below.

Luckily, there is a loophole for us and we can use this for “offroad use only.” Why am I using this silly description? Because you and I need to move beyond hacks. Place browser specific (IE) in conditional comments or use a serverside script to place a class on the HTML or body (HTML class=”ie6″ ) to target these browsers in your main CSS file.

However, these hacks will let you develop your CSS on the fly and fix your issues before going the proper route.

Test Paragraph (condensed version of test page)

this is the test paragraph to see how IE7 will handle hacks

  • IE7 Beta2 understands #wrap>p.borderfun and applies correct color.
  • IE7 Beta2 ignores * HTML p.borderfun styles.
  • IE7 Beta2 recognizes the * hack.
  • IE7 Beta2 ignores the underscore hack.
  • In Firefox, Safari, and Opera, you should see a red border. In IE7, you should see a black border. In IE6, you should see a pink border.

How to use this

If you need to send something to IE6 and nothing else: use the underscore attribute hack (_border:1px solid pink;) If you want to send something to IE7 AND IE6, use the *attribute hack (*border:1px solid black;). If you want to send something to IE7 and NOT IE6, use a combination (*border:1px solid black; _border:1px solid pink;).

A call to arms

Get out there kids and begin removing your * HTML rules. Place those suckers in a conditional commented CSS file or at least begin replacing them with the underscore hack. When it comes time to tune for IE7, you’ll have less work to do.

— This was originally published on tdrake.net

Yahoo’s new open-source code

Yahoo has just unveiled their new User Interface Blog to the public. This is a great resource for those getting into advanced CSS, DOM-scripting, JSON, and AJAX applications. Why should you care? Yahoo has hired some of the leading web developers over the past couple years and their passing their wisdom to you.

This is quite timely, just tonight I was looking for Dustin Diaz’s AJAX contact form. Unfortunately, his personal blog was down, but I bet I could find it in here. Not to mention the pagination chore, the ratings widget, and more.

— This was originally published on tdrake.net

Z-index conflict with Flash and DHTML widgets

I’m working on a project that has a Flash movie and a DHTML dropdown menu on the same page. Flash movies like to sit on top of the page and the dropdown would slide behind the movie. Since this isn’t what I wanted, I needed to find a way to make the it have a lower z-index than the dropdown.

I did a Standardista Search for a cure and didn’t see it. But a quick message to the Web Standards Group returned the solution. It’s actually pretty easy.

UFO Flash detection and insertion script

I’m using the UFO JavaScript to detect the browser’s compatibility with the Flash movie and insert it on the fly. This method provides good default content to those without Flash and valid, shiny, happy Flash to those with it.

UFO gives you the ability to insert parameters into the movie and this is what you need to cure the z-index issue. You need to set the wmode parameter to “transparent.”

var FO = { movie:"swf/myMovie.swf", width:"300", height:"120", majorversion:"6", build:"40", wmode:"transparent" }

That’s all there is to it.

About

This site features helpful hints, in-depth exercises, and book reviews. It’s the site that I want to have handy when I need to remember how to do something and what to look out for. It’s primary focus is standards-based web development with an eye towards accessibility.

It’s primarily written by Ted Drake, although guest writers are welcome to add to the discussion. If you would like to write something for this blog or to re-publish an existing story, please contact Ted: ted@tdrake.net.

Last-child is named after a CSS3 selector that lets you target the last object in a document tree. I also chose the name because I’m the youngest of 6 kids.