Amerivespa.org

by cdwise 28. April 2010 04:45

Many of you know that I ride scooters. This year Vespa Club of America is having then annual rally just down the highway from me in San Antonio Memorial Day weekend this year.

I have been looking at their website http://amerivespa.org off and on for a few months. Mostly I've been looking at the daily schedule and lodging pages. Every time I visit I get annoyed. So I just have to vent a little.

Why?

Because this is what I see in IE 8 (same in 6 & 7):annotatedFF

  • Notice the footer overlap?
  • See the huge horizontal scrollbar at 1024x768?

(note these are thumbnails, click to see 750px version)

Here is the same page seen in Firefox on Win 7 (which displays the same as Safari on my Mac:

annotatedIEDoes this look like they ever tested how their Drupal theme looks in IE?

True it is possible to use the site through it is very difficult to read the registration link. At least the link does function and I was able to register but the site poor usability in Internet Explorer 7 & 8 (according to Adobe Browserlabs and MS SuperPreview the same overlaps and horizontal scroll exist in IE 6 as well) leaves visitors using those browser with a broken experience.

Ironically when I look at the code I see a conditional comment for IE that loads a separate IE stylesheet which is what I think is breaking the site since it converts floating divs into absolutely positioned ones:

#main {
   position: absolute;
   margin-top: 20px;
   margin-left: 344px;
}

Position: absolute;

Which moves the entire content section 344px to the left creating the huge horizontal scroll and removing that content from the document flow which brings the footer up directly under the loco causing the overlap.

This is a prime example of why I consider using position: absolute is a bad idea.

Using old hacks creates problems

Other hacks are used as discovered when I pasted the page into Expression Web such as:

#page {
   _text-align: left; /* 2nd part of IE5/IE6quirks centering hack */
}

Why is that hack still in the stylesheet? Simple solution regarding IE 6-  the doctype switch is being used since an XHTML Strict doctype is specified so no quirks mode code should be in the page.  Is anyone really still concerned with IE 5? Get rid of the old hacks and if you are going to use IE conditional code limit it to appropriate versions, in this case LTE IE 5 not all versions of IE.

Using a CMS

Adding an additional layer of complexity is the use of Drupal which seems like serious overkill for this site. Maybe there were plans to add a forum or something that didn’t materialize which is why Drupal was used but so far I haven’t seen it.

Conclusion

I’ve never understood why people create websites that don’t render well in major browsers. To me that means a site needs to render well in the major browsers. My list of must display well in are:

  • Internet Explorer 7 & 8
  • Firefox 3.x
  • Safari (Mac)
  • Opera

Internet Explorer 6 must be functional but it can lose some of the bells and whistles as long as it is functional and reasonably attractive. There is nothing difficult about making this site render properly in IE 6+ and it is ridiculous that the page displays so poorly in IE 7 & 8.

What do you think?

Tags: ,

Web Design & Development Books

by cdwise 11. February 2009 00:01

SitePoint offers some really good books on web design and web development (both front-end and back-end). For a limited time they are offering buy 5 SitePoint books for price of 1 ($29.95) and EVERY $$ goes to victims of the Australian bush fires: http://sale.sitepoint.com/

Design related books I might suggest:

Development related books:

If you are new to the world of freelancing or are doing a few projects "on the side" you might also find their business related books useful as well.

Technorati Tags: ,

Tags: ,

Web Design



Outstanding Hosting