Take a look at the two screen captures below.

Both are from the same parking services page. The first is in FireFox 3, the second is in IE 7. JavaScript is being used to change to HREF attribute of mailto links for @pcc.edu addresses. But, why is the inner HTML also changing when viewed in IE?

At first I thought it was a jQuery bug. Here is the code:
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address);

But, after searching it turns out to be an IE bug.

If the text and url of a link match - then Internet Explorer decides to assign them both to the HREF attribute! So, if you alter the HREF then the text will also change… Here is an example:
<a href="http://www.google.com">google.com</a>  // fine - changing href will not change text
<a href="http://www.google.com">http://www.google.com</a> // bad - changing href will change the inner html text


Solutions

1) One answer is to keep the text different, but you may not be the only contributor to the site…

2) Another solution is to keep the HREF local:
$(this).attr("href","/resources/web/forms/email/?to="+address);

But, we have separate sub-domains and need all email to go to the www…

3) So, we are forced to store the inner html:
var linkHtml = $(this).html();
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address).html(linkHtml);

Why am I still surprised by these IE bugs?

This post was created using the new iPhone Wordpress application. A few days ago, I posted about my excitement. Now that I have had a chance to use it - I can say that I am not disappointed.

It is available now in the app store and cost the same as wordpress.org - absolutly nothing!

The interface is refreshingly simple and easy to use. There does not seem to be a WYSIWYG editor, but basic HTML should still work.

You can even include images stored on your phone. The final image below shows the interface. The others are just random images that were on the phone.

Christopher Schmitt

Wait I have his book! CSS cookbook

1. Expectations limit design
2. Browsers limit design (each has its own internal stylesheet)

Then a great story about an interview with Apple and a “hard” question. It all boils down to designing the American flag with CSS (which was something he had, by chance, done previously).

Semantic markup

Using appropriate html for appropriate element!

Only 91 elements! (but most people can only remember 40-50 of hand). Some people in the room didn’t even do that well.

Then goes on the show code he used to create the flag - lists all 50 states in ordered list.

Bad (not to do

• <p>&nsbp;</p>
• <p> … <br><br> … <br><br> … <br><br> </p>
• and so on…

Back to flag

Setting up easel

Recommends using css reset.

For Flag he only resents elements that he needs to style. Uses minimal divs.

Clearing out the Content

display:none;

Stripping

• Absolute positioning - allows for position that is ignored by other elements. However, screws up when fonts or other elements are resized.
• Relative positioning - starts at normal position then moved.

He positions 13 colonies (stripes) absolutely inside realativly positioned easel.

Uses attribute selectors to pinpoint each colony, color and position. IE 5and 6 don’t support - will need javascript to mimic (Jquery is recommended).

Pooling the Stars

z-index is like layersin photoshop. Uses z-index to position blue union area above stripes and -9999 hack to move text off screen.

Stars

Block vs inline.

Uses extra <i></i> (bad form, he admits) to work as element to position star image. Should have added extra info such as year <i>1800</i>.

Texture

Alpha transparency PNGs. Hack for older versions of IE.

Overlays each area with fixed alpha overlay. This is rather then overlay entire flag with z-index image. That would block all links. As it stands all stripes and stars are clickable!

Streached

Reason for pixels vs em? easier… but em based layout (divs not just text) would allow it to be stretched. Talks about setting text to 10px for easy em use.

EM is based in typography. Hard to match up for divs. And what about the images used for stars.

Switches stars to text. Finds star in ZapDingbats. Also, uses CSS Generated content. So this is limited use - wont currently work in IE or without font.

PS

He didn’t Take the apple job - moved to be with his (now ex) girlfriend.

Even after giving Rob some guff about not optimizing his image - he was kind enough to append my comment to the original 1K Competition post. So, I decided to take the challenge and create a real 1K entry.

Tiny Mona

I wanted to take the competition as literally as possible, but I am no wordsmith. So I decided to create an image - a 1K reporduction of the famous Mona Lisa by Leonardo Da Vinci. The image to the right was “hand drawn” with a mouse using only the pencil tool in photoshop. I used this image as a reference, but did not resize or trace it.

• Image Size: 25×40 = 1000 pixles
• File Size: Exactly 1000 Bytes

And yes, I used PngSlim for maximum compression. It took a lot of trial-and-error to get exactly 1K.

Check out the detail

Here is a larger version (html resize of same file). I like how the small version looks pretty good, but in the larger one she begins to resembles a creepy robot.

Rick Ellis -Washington State

Much better! “Our job is to support mountain climbers”, he begins, a huge slide of Mt. Rainier behind him. Mt climbers? Yes, in a way I can see his metaphor. Getting resources on the web can often seem like a daunting task for our faculty and staff. We are the Sherpas to aid them and choose the tools to make sure that their message reaches all students.

Slowly, Rick begins to talk about the history of accessibility and describes what he refers to as the 1.0 and 2.0 versions of web accessibility. At the start, HTML was created only to convey the structure of the content, not the presentation. This was the only way to ensure that any single page could be displayed on different devices, browsers and screen readers. Then the browser wars messed that all up…

I am not a proponent of using Flash to create entire pages. However in small doses, it can do a lot to to spruce up an HTML based site. Samantha Nagmay insisted that her portfolio site “grab the attention” of those who view it. For the front page I created a short animation that shows the development of a sculpture from design to form to patina.