Reasons Why IE Stinks

I've been rather reluctant to suggest Microsoft Internet Explorer is crap but here you go…Reasons Why IE Stinks

Minimal support for selectors, pseudo-selectors and pseudo-elements

While it handles the "simple" selectors like class and id, it can't handle :before, :after, :focus, child (ul>li), :first-child or attribute selectors. I don't complain for academic reasons. I'm using all those selectors on this website. If you're using IE, you're not seeing the site as I intend it or the CSS 2 (circa 1998) recommendation specifies.

The BLOCKQUOTE element style uses :before and :after pseudo-elements to add quotation marks (they shouldn't have to be marked-up as quotes) and the blockquote[cite] attribute selector to show the quote's source. See Oak Park for an example. If you view the source of that page you'll see I didn't add a DIV to display the URL to "Travels with Samantha." The stylesheet was able to display it by using the cite attribute-value of the BLOCKQUOTE.

The comment form for this blog entry has a :focus pseudo-selector that will add a blue border to the input and textarea boxes—only the text boxes, <input type="text" />, and not the button by using input[type="text"].

If the navigation links at the top have a light-grey border on the far left and far right side it's because the first-child pseudo-element doesn't work in your browser.

No support for generated content

Any CSS rule can contain a Content: declaration to automatically add—you guessed it—content to the selected element. Again, the BLOCKQUOTE style on this site uses content.

blockquote[cite]:after

{

content: attr(cite);

display:block;

font-size:smaller;

}

CSS 3 Selectors

I also added a few CSS 3 selectors to my stylesheet to add a visual cue to links that lead to other sites.

a:link[href^="http:"]:after

{

content:"\00BB";

}

The other half of the navigation link style is the :last-child selector added in CSS 3. It adds the dark-grey border on the right side of the Travel link.

This works in Mozilla and Safari but not in IE 6. Because CSS 3 is still a Candidate Recommendation I won't ding IE for not supporting it but I will give Gecko and WebCore credit for being ahead of the game.

Solution: Switch from IE

I strongly suggest you install Mozilla Firebird, Mozilla Camino (OS X native) or Safari—read my Reasons to buy a Mac—and see how much better the web looks when you see it as the designers intended.

| Comments (2) |

Reasons to buy a Mac

Awesome third-party Apps
  • Watson — THE killer web-services client
  • NetNewsWire Lite — the gold standard for RSS news readers
  • iStopMotion — free stop-motion and time-lapse movies with a DV camera
  • NetFlix Fanatic — manage your NetFlix queue with the ease of drag and drop
Awesome Apple Apps
  • iTunes
  • iMovie
  • iDVD
  • iPhoto
  • iCal — view multiple calendars in one grid. Let's see Outlook 2003 do that! Publish and subscribe to calendars on the internet
  • iSync — have your contacts and bookmarks on every computer in the world, complete with the look and feel of the desktop applications
  • Safari — the only browser to support text-shadow and RGBA color values
  • iChat — audio and video instant messaging client
  • DVD Player 3 — remembers where you stopped the movie, even if you remove the disk. Simple but Windows Media Player doesn't do it.
Awesome OS X Features
  • Exposé — manage your windows with smoothness like butter. See it live on Apple.com
  • Way-cool ALT-TAB application switching — features the incredible quality of OS X icons and you can use the mouse to click the application you want. No more tab, tab, tabbing around to the application you accidentally tabbed over.
  • The Dock — it looks great and solves the UI problems of the Windows Quick Launch bar, task bar and System Tray
  • Text Edit — the Apple version of Notepad now opens and saves DOC files and has fantastic typographic quality
  • Built-in Apache, SSH
  • It's not Microsoft — buck the norm
| Comments (5) |