The alternate index takes the four boxes and turns them into tabs using the jQuery idTabs plugin. I added two more optional boxes below the tabs. I felt that this allowed my client to get more info on the front page without being cluttered or too busy.

Client liked them both but with a slight preference for the original. My preference is for the tabs. I posted links to both pages on twitter and the consensus was for the original. The main reason being offered that the tabs faded into obscurity. After discussion with the client we went with the original, but the tabs are a possibility in the future.

I’m not sure if I agree with the fade into obscurity because it’s not true or because I like the tabs due to a “cool” factor - first time I did that on a web site.

it is now up to designers to move the web forward. The opening chapter breifly discusses the history of browsers, design for layout, the implementation of CSS and issues designers have had with Internet Explorer and ends with the good news that IE 8 is coming and has passed the Acid2 test. According to the authors this means that it is now up to designers to move the web forward.

Chapter two looks at current techniques for layout in CSS and the hacks used to achieve the desired look, including floats, faux columns and absolute position. It then looks at the flaws of each approach. Finally the same sample web site is built using CSS tables. The authors discuss the display properties used to turn elements into tables - table-row, table-cell, table-row-group, table-header-group, table-footer-group, table-caption, table-column, table-column-group and anonymous table elements. I find the anonymous table elements particularly intriguing as they will potentially reduce markup.

The authors also clarify the difference between CSS tables and HTML tables. CSS tables are about controlling how elements display whereas HTML tables are about organizing tabular data.

Chapter three looks at practical applications including flexible layouts, nested tables, and positioning inside a cellChapter three looks at practical applications including flexible layouts, nested tables, and positioning inside a cell.  The reader is also introduced to a way to simulate colspan and rowspan. Might one call this a hack? Not sure, since I’ve never done any tables based development.  Source order is looked at - it’s not possible to reorder elements as everything needs to be placed in the order columns are displayed. The exceptions are table-footer-group & table-header-group which can be placed anywhere and will display correctly.

Chapter four addresses older browsers. The basic recommendation is that developers should say “To Hell with Bad Browsers”. That is to say we should design with modern CSS specifications and allow older browsers (IE 6 & 7) display as they will. The authors do offer some solutions including providing a simplified layout for IE6 & 7 using conditional comments. The final option would be to reproduce the layout using current methods in an IE only stylesheet. The benefits according to the authors are greater ease of development and stability. Instead of having to deal with browswer inconsistencies due to hacking CSS to display the grid with floats everything just works (except with IE7 and earlier).

At the begining of this chapter the reader is informed that History Repeats. That is developers should do what was done in 2001 and advocate that users upgrade their browsers by giving them a reason to upgrade - a better internet experience. Save the Developers is recommended for the modern movement - interestingly this site now redirects to a microsoft Internet Explorer page.

The final chapter was very intersting to read about forthcoming CSS3 specifications. However it’s nothing to get overly excited about since it’s not going to be a practical reality for some time to come.

final thoughts

Everything you Know about CSS is Wrong is an engaging read and provides insight into using CSS tables. I’m determined to try this on a couple of personal sites, but am pretty sure I won’t be moving towards CSS tables for client sites until the market shows it’s a more viable option. Anyhow we’ll see what happens - according to wikipedia IE8 final version is slated to be released late 2008. With only seven weeks left in 2008 that should be really soon.

At $29.95 plus shipping I do not think this book was worth the money. It’s far too short - it only took me 90 minutes to read the whole book. If you can read on a screen then I would recommend getting the pdf version.

My day job is a teacher and I print ALOT of copies off at home in color and in the year since I bought this printer I’ve spent $5 on ink.

Today I finally got back to work and jumped into forms as my current client has three relatively large forms needed for the site. I’ve heard many good things about the FreeForm Module for ExpressionEngine, but hadn’t tried it out until now. I had it installed, but didn’t really know where to begin - partly due to poor documentation and partly due to never having made a form.

Via twitter gexla, a.k.a John Fuller, offered some help and we chatted for about 10 minutes on MSN and suddenly the lightbulb went off. I’ve since got my first form installed and it’s working for the most part. on submit it redirects to the “We’ve recieved your submission” page, but no email is sent and there is no entry in the module admin page.

I’ve posted on the Solspace Forums and am awaiting a response. I’m sure things will get worked out strait away as I’ve always gotten very helpful support there.

Client site is actually about 85% done - a little styling to go, have to finish the forms, fix the superfish bug in IE and decide how to implement one section of the site so that it has drop down menu as well as a flyout from several of the dropdowns. Not sure how to proceed yet. Fortunately for me, the client is in not in a rush at this point.

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 2, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
New in v0.2.3 : IE8 beta 2 and Print feature !

This is an alpha release, so feel free to post comments/bugs on the IETester forum or contact me directly.
Minimum requirement : Windows Vista or Windows XP with IE7 (Windows XP with IE6 has some minor problems and IE7/IE8 instances do not work under this config)

A couple of features that I would like to see added are the use of a developer toolbar. I checked the forums and it looks like the target is for this to happen in first quarter 2009.

The second feature I would like is tab context menu to open in new tab of whichever IE version you like and/or open in all versions (new tabs). As it stands, you have to manually open a new tab and type in (or paste) the url that you want to look at.

IE Tester is not perfect but as it’s still in alpha, that’s to be expected. I’ve never really liked browswershots or other cam based testing sites as you couldn’t check things real time as you make changes. Now I can do this. IE Tester has now been added to my standard tools along with firebug and the IE developer toolbar. Below is a quick look at what I saw earlier.

I loaded up this blog in IE tester in four different tabs - one each for IE 5.5, 6, 7, 8 beta 2. It was nice to see that my blog looks the same in IE 7 & 8b2.

IE 8 beta 2

IE 7

Things get interesting in IE 6 where the sidebar drops out of view and the design isn’t centered on the page. I wasn’t aware of this since I don’t have access to IE 6 anywhere. Also looking on the portfolio site, some things are a little wacked. I was already planning a redesign of that site and when I get to work on it, I’ll be sure to pay attention to IE 6 there. For this blog I’m not concerned.

IE 6

IE 5.5 does a much better job of rendering than IE6. Everything looks fine except the page isn’t centered, but that’s something I can live with. Just as with IE6 the png images have no transparency, but again for this site, I consider that a non-issue.

IE 5.5

However there is one area that I’m stuck on. If some answers are open and some are closed, clicking show/hide all closes open answers and opens closed answers rather than moving all answers into a single state. ideas?

Another thing I’m behind on is the reading I need to do. I’ve been asked to write a review on a book about Moodle 1.9 from packt publishing. Anyhow the plan is to finish the reading tomorrow and get started writing the review to be placed on my teaching blog as well as amazon & slashdot.

In the meantime, I’ve secured some other work styling an ExpressionEngine forum for another firm. I’m excited to be doing some outsourcing for another firm and hopefully it will lead to further work. Once I’ve finished the work, I’ll see about publishing their name here. First I want to be sure that I’ve done a good job and second I also want to be sure that the firm is okay with letting it be known that they have outsourced part of their contract.

This is my first time doing this so I’m not sure if I bid too low, just right or too high. Actually it wasn’t so much of a bid as I was asked via twitter if I would be available. I think I may have bid a little on the low side. I guess the only way to find out is to see how long it takes to get the project complete. It’s about to start any time now, I’m just waiting to get the source files.

Here is the code - I’ve also posted this on the EE forums.

*edit* fixed a typo in the code, but it’s still not working.

The actual “design” of the site is a commercial theme that the client wanted. I took it and converted it to Expression Engine.

The site is a language school for children in Korea - ILE 외국어 학원. The client wanted a site to provide information for current and potential customers (parents) as well as showcase childrens progress. Student work is showcased via embedded video and mp3s.

A forum has been installed but not styled yet. That’s the second stage of development after the live launch of the site. Right now the forums are set up and can be used by students, parents, & staff. I’ll be working on fitting the forums to the rest of the site look shortly. This is not something I’m looking forward to as I remember styling forums for my teaching blog ages ago and it was a major pain in the butt.

I’m also very pleased to have recieved an email from my client suggesting that he would like to add further enhancements and features to his site in early 2009. Repeat work is always a good thing.

What’s Next

I’ve got to prepare mid-term exams for my students, but I’ve also got another client, also going to use ExpressionEngine. that I will be starting on while at the same time working on the forums for ILE.

With my new client, I’ve got the photoshop work pretty much done. The client is satisfied with it, but I may send it to my graphic design contact to improve it, since my photoshop Kung Fu is fairly weak.

I’ve added ILE to my portfolio, but it’s not done yet. I had a few minutes yesterday and quickly wrote something. later today, after grading some homework, I finish up the protfolio entry and get started coding the new client site.