IE7 – Good, Bad, and Ugly

On the Web Standards Group mailing list today, Stephen Stagg posted his list of IE7 updates and downdates. I thought it was well put and wanted to share it.

More informative Error Pages.
As a general usability feature, I thoroughly approve of the more friendly error pages in IE7. That way, when your site’s server goes down, people won’t just be dumped with a nasty pile of technical text.
Transparent PNGs
This is a good one, I can’t wait to begin using transparent PNGs, tho I can see lots of usability issues arising from sites mis-using them.
Default Font Size
The IE7 default font size seems a very small, even for me (someone who likes his font sizes at about 70%). Perhaps this will be changed in the final release, but trying to read the Register in IE7 using the default size is pretty taxing.
Zoom function.
M$ seem to be trying to cater for everyone by including both font size and overall zoom controls. However their zoom feature doesn’t seem to be as well implemented as Opera’s one and I have noticed lots of odd effects appearing while zooming.
Invisible Menu-bar
I know it’s not a WSG issue but: I like what they’re doing with the menus. By default, the menu bar is hidden, freeing up screen-space for the tabbar. However, when you press a standard menu shorfut (Alt- f for example), the menu magically appears and then hides again when you’ve finished. (You can turn the menu-bar back on if you wish).
Tabbed Browsing
Well this one was just waiting to happen. I’m not someone who expects my tabs to do lots of wonderfull things so I’m just happy that they’re included in IE7.

Stephen Stagg

IE7 Updates

The Microsoft team is still hard at work, trying to fix assorted rendering bugs before launch. While they deserved to be criticized for the sad shape of IE6, their work on IE7 also deserves some kudos. Granted, it’s not as good as Firefox and Safari, but it’s getting much closer.

Add code snippets to your site with “Code Snippet” for WordPress

It’s time consuming to write a blog entry and format code snippets for WordPress and other blog programs. You’ve got to translate < elements into &lt; and either use pre tags combined with code tags, combined with blah, blah, blah. If I have a complicated snippet, ordered lists were used for easier reading and to keep the pre tags from breaking the layout.

Code Snippet

My friend Alex suggested I look at the Code Snippet plug-in for WordPress. It transforms anything inside a set of <code> tags into an easy to read and copy presentation.

The instructions on the site are a bit vague, there’s little mention of how to use the plugin. The truth is, you don’t have to do anything! Just download the plugin, upload it to your plugin directory, and activate it. Instantly, anything on your blog that was surrounded by code tags is formatted.

You can alter the appearance in the options panel. It even uses microfomatting logic: insert lang=”CSS” or the appropriate language and the plugin will color code your example.

It’s pretty darn slick. Now I need to go back and fix older posts that used ordered lists or had code tags inline. If you see a post that needs to be fixed, please take a moment and leave a comment. I’m trying to update this site’s content as effeciently as possible.

Using vertical-align for images and buttons

I’m working on a basic search form and the visual design requires a graphic button instead of the browser-generated input. I’m using the button tag instead of an input type=”submit”. While putting the page together, I had a nagging issue with the button not aligning with the label and input. I tried various combinations of margins, negative-margins, padding, and even floated the elements. All of these techniques eventually worked, but the were too klunky and I knew there had to be a better way.

I remembered the vertical-align:middle style while working on a footer paragraph that included inline links and RSS buttons. I tried it with the submit button and it also worked perfectly. I’ve tested this in FF 1.5 and IE6. I have not tested it in Safari yet.

Code Examples

CSS:

form#foo button {vertical-align:middle; border:none; padding:0; background:none; cursor:pointer; *cursor:hand; /*alternate cursor for IE*/}

HTML

...

Resources

The perfect FAQ page ! – by Thierry Koblentz

— This was originally published on www.tjkdesign.com. Visit the original site for updated code and to see a working copy of the script. Thierry has created a Dreamweaver plugin to make this super-easy to add to your site!

This is about using a Definition List and the DOM to create a nice FAQ page where clicking on the DTs (the questions) “toggles” the associated DDs (the answers).

Note: If you’re already using this solution, please check your version number (this is version 1.5.4). Before you download the newest version I suggest to go through the entire article again (since a few things have changed).

This is what it does:

Open AllClose All

Question 1?
The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals.
Question 2?
To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.
Question 3?
The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed. The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach.
Question 4?
The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To ensure that non-operating cash outflows are assessed.
Question 5?
The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.

The main advantages of the basic technique (related to the DL):

  • It uses semantic markup.
  • It degrades nicely (hidden elements are visible in script-disabled UAs).
  • DTs do not appear as links without script support.
  • It does not use inline event attribute (onclick()).
  • It does not require A elements in the markup.
  • It is screen-readers “friendly”.
  • It is keyboard “friendly”.
  • It is IE Mac compatible.
  • It relies on one single hook.
  • It allows the author to add/move/delete DT/DD pairs easily (there is no variable in the script to edit and there are no class or ID to include nor change).
  • It is “powered” by a very light script (3Kb).

About the “Show All/Hide All” “links”:

  • they let the user expand all answers at once, so it is possible to search the document.
  • they are hidden from Javascript-challenged browsers.
  • they can be “Named Anchors”, images or SPANs (actually they can be any inline elements or any other elements styled as inline).

This is more or less a plug-and-play solution (script and stylesheets are at the bottom of this page).
You’ll need to:

  1. Create a Definition List (do not use more than one DD per DT.); the markup for the one above looks like this:

    Question 1
    The vitality of conceptual synergies...
    Question 2
    To focus on improvement, not cost, ...
    Question 3
    The vitality of conceptual synergies...
    Question 4
    The vitality of conceptual synergies...

  2. Assign a specific ID to your DL:

    <dl id="TJK_DL" />
  3. Download this ZIP File (3Kb) and unzip its content in the same directory as your FAQ page.
  4. In your FAQ page, right above the closing headtag cut and paste the following:
    <script type="text/javascript" src="TJK_ToggleDL/TJK_ToggleDL.js"></script>
  5. Call the script, for example using:

    <body onload="TJK_ToggleDL()">

    Note: In case you want to add multiple onload handlers to a page, make sure to read executing JavaScript on page load.

  6. In order to use the “Show All” / “Hide All” feature, you will need to create 2 named anchors with specific IDs (TJK_ToggleON and TJK_ToggleOFF). Dreamweaver users can take advantage of the “Named Anchor” icon in the toolbar to easily create the required markup. Dreamweaver will plug the name attribute as well, but that’s OK, you can either delete it or ignore it.
    This is the markup I’m using in this page:

    <a id="TJK_ToggleON">Open All<<a id="TJK_ToggleOFF">Close All</a>

    Note: adjacent anchors are confusing in text-browsers.

    important noteYou can also replace these Named Anchors with other inline elements, for example SPAN or IMG (yes, images). Just make sure to set the proper IDs.

  7. Because we want to hide these “links” from script-challenged UAs, you need to include the following rule somewhere inside your stylesheet:
    #TJK_ToggleON,#TJK_ToggleOFF {display:none}

    Note: You can also use a style element to include this rule in the head of your document (your FAQ page).

You’re done!

Feel free to edit the rules in the CSS file to fit your needs.

important noteNote: in case your questions are more than one line long, you may want to change this: “background:0 50%” to this: “background:0 0” and add “display:block” to the #TJK_DL dt a {} rule (to avoid any “wrapping”).

For the curious

TJK_ToggleDL.js


// Copyright 2006 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
// TJK_ToggleDL() Version 1.5.4 report bugs or errors to thierry@tjkdesign.com
if (document.getElementById && document.getElementsByTagName){
document.write("<link href=\"TJK_ToggleDL/TJK_ToggleDL.css\" type=\"text/css\" rel=\"stylesheet\" />")
document.write("<link href=\"TJK_ToggleDL/TJK_ToggleDL_ie5mac.css\" type=\"text/css\" rel=\"stylesheet\" />")
}
function TJK_doToggleDL(x){
var zDD=document.getElementById('TJK_DL').getElementsByTagName('dd');
var zDT=document.getElementById('TJK_DL').getElementsByTagName('dt');
zDD[x].className=(zDD[x].className=='hideDD')?'showDD':'hideDD';
zDT[x].className=(zDT[x].className=='DTplus')?'DTminus':'DTplus';
}
function TJK_ToggleDLopen(){//we open all of them
var zDD=document.getElementById('TJK_DL').getElementsByTagName('dd');
var zDT=document.getElementById('TJK_DL').getElementsByTagName('dt');
for(var i=0;i<zDT.length;i++){
zDD[i].className='showDD';
zDT[i].className='DTminus';
}
return false;
}
function TJK_ToggleDLclose(){//we close all of them
var zDD=document.getElementById('TJK_DL').getElementsByTagName('dd');
var zDT=document.getElementById('TJK_DL').getElementsByTagName('dt');
for(var i=0;i<zDT.length;i++){
zDD[i].className='hideDD';
zDT[i].className='DTplus';
}
return false;
}
function TJK_ToggleDL(){
if (document.getElementById && document.getElementsByTagName){
var zDT=document.getElementById('TJK_DL').getElementsByTagName('dt;
var zDD=document.getElementById('TJK_DL').getElementsByTagName('dd');
var ToggleON = document.getElementById('TJK_ToggleON');
var ToggleOFF = document.getElementById('TJK_ToggleOFF');
if (ToggleON && ToggleOFF){
ToggleON.onclick = TJK_ToggleDLopen;
ToggleON.title = "Show all answers";
ToggleON.href = "#";
ToggleOFF.onclick = TJK_ToggleDLclose;
ToggleOFF.title = "Hide all answers";
ToggleOFF.href = "#";
}
for(var i=0;i<zDT.length;i++){
var zContent = zDT[i].innerHTML;
var zHref = "<a href='#' onclick=\"TJK_doToggleDL("+i+");return false\" title='Show/hide the answer'>";
zDT[i].innerHTML = zHref + zContent + "</a>";
zDD[i].className='hideDD';
zDT[i].className='DTplus';
}
}
}

TJK_ToggleDL.css


/* "Show All" + "Hide All" links */
#TJK_ToggleON,#TJK_ToggleOFF {border:1px solid #333;padding:0 5px;margin-right:5px}
/* zeroing out padding and margin */
#TJK_DL dd,#TJK_DL dt {margin:0;padding:0}
/* margin for the DTs (shorthand) */
#TJK_DL dt {margin:7px 0}
/* image and left padding for DDs */
#TJK_DL dd {background:url(answer.gif) no-repeat;padding-left:55px}
/* styling all anchors in the DTs */
#TJK_DL dt a {background:0 50% no-repeat;padding-left:32px;color:#000;text-decoration:none}
#TJK_DL dt a:visited {color:#666}
#TJK_DL dt a:visited:hover, #TJK_DL dt a:hover, #TJK_DL dt a:active, #TJK_DL dt a:focus {font-weight:bold}
/* the + and - gif in the anchors */
#TJK_DL .DTplus a {background-image:url(toggleDLplus.gif)}
#TJK_DL .DTminus a {background-image:url(toggleDLminus.gif)}
/**********************************/
/**********************************/
#TJK_DL .showDD {position:relative;top:0}
#TJK_DL dd,.hideDD{top:-9999px;position:absolute}
#TJK_ToggleON,#TJK_ToggleOFF {display:inline;cursor:pointer; cursor:hand}

Note: “cursor:hand” is for IE5 Win, but this declaration will make this sheet fail Validation. If Validation is important to you, you can either delete this declaration or move it inside a Conditional Comment.

TJK_ToggleDL_ie5mac.css


/**//*/
#TJK_DL .showDD {display:block}
#TJK_DL dd,.hideDD {top:0; position:relative; display:none}
/**/

For the DOM police

Earlier versions of this script did not use document.write(), I was using the DOM to plug the stylesheets in the HEAD element. Unfortunately, setting the rel attribute of the LINK element makes Safari “go blank” and STYLE fails in IE Win. So, I decided to go with what works!

important noteThis script should work in HTML and XHTML documents.