Fair enough.  That is the final straw.  I will now endeavor on building my own blog.  Something I started doing a number of years ago and never finished.  We may be looking at a repeat but I’m feeling confident and dangerous.  Much of this maverick persona is the same reason that I didn’t back-up my files before upgrading versions.  Throwing caution to the wind is the only way to learn quickly.

Wish me luck and please weigh in on the question du jour:

CodeIgnitor

OR

Ruby On Rails

You essentially have 5 minute to respond…I’m starting pretty much now…

Google Wave has become my new collaborative brain-storming tool of choice.  I maintain an unhealthy list of side-projects.  Each one, I am undertaking with different friends.  For each project, I have a number of waves going at any given moment.  I invite all the contributors into the wave, give it a title like ‘Redesign Data Model’, and let the brainstorming begin.  We can embed images of data models, use the poll gadget to vote on certain decisions, or just throw out ridiculous ideas to get the creative juices flowing.  As each contributor’s creativity ebbs and flows, they can hop on wave and jot their thoughts.

Looking for other cool ways to use GoogleWave, I stumbled on this mashable post.  Although most of these examples aren’t that pragmatic, they’re entertaining.  I’m interested though, in hearing how others have used GoogleWave and what they’ve thought of it.  Let me know.

And if you want an invite – I got a few left – just ask.

In that experience, I was a horrible salesperson and an equally bad negotiator. On having identified two potential clients through referrals I made no attempt to market myself via the web or otherwise. The terms of both of my contracts didn’t guarantee me any money up front and left me very little if the site was never ‘pushed live’. With nothing ‘in the funnel’ and very little cash I decided to turn back to the 8-5 workplace and regroup.

I haven’t returned to a life of full-time freelancer but I still hone my craft and business skills taking on occasional web development work. My latest project launched at the end of the summer and I missed my opportunity to announce it. So here is my self-promotion piece of the week:

You should really check out my latest web development project here

I look forward to your feedback!

A very simple (and apparently very well known) method is to use conditional commenting. If I were to do it again I would implement conditional commenting to dictate one style for IE and another for non IE browsers.

Thanks all for the feedback. For those looking for there own solutions here is a good introduction to conditional commenting: quirksmode.org

My friend’s website on the other hand is very well-designed and, for my sake, I hope well-implemented.  In developing this site I ran into a few challenges.  To help others in the battle against  IE styles, horizontal navigations, and related issues I thought I would document my process.

Step 1.  Research: In beginning to build the horizontal navigation I figured I would search for some examples in Google.  I searched for “horizontal navigation” and one of the top five results was this:

http://phoenity.com/newtedge/horizontal_nav/

Step 2.  More Research: I searched other sites and reviewed at least 10 examples.  Some decent and quick implementations are seen at the following sites:

http://www.alistapart.com/

http://css.maxdesign.com.au/listamatic/

http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/

Step 3. Decision based on inuition of what would be easiest: Ultimately, I decided I didn’t want to involve much javascript and I wanted to try to get the navigation using only CSS.  I have never gotten very familiar with javascript and I was more confident in my abilities to tailor code examples of purely mark-up.

Step 4. Tailor the example:

I ended up with this CSS:

/*** Nav bar styles ***/

ul.nav,

 .nav ul{

 /*Remove all spacings from the list items*/

 margin: 0;

 padding: 0;

 cursor: default;

 list-style-type: none;

 display: inline;

 }

ul.nav{

 display: table;

 width: 100%;

 table-layout: fixed;

 text-align: center;

 }

ul.nav>li{

 display: table-cell;

 position: relative;

 margin: 0px 2px 2px 0px;

 text-align: center;

 }

.nav ul li a{

 /* Make the hyperlinks as a block element, sort of a hover effect */

display: block;

padding: 2px 10px;

}

/*** Menu colors (customizable) ***/

 ul.nav,

 .nav ul,

 .nav ul li a{

 background-color: #EDEDED;

 color: #959595;

 }

ul.nav li:hover,

 .nav ul li a:hover{

 background-color: #000;

 color: #fff;

 }

ul.nav li:active,

 .nav ul li a:active{

 background-color: #000;

 color: #fff;

 }

ul.nav,

 .nav ul{

 /***	border: 1px solid #369;  ***/

 }

 .nav a{

 text-decoration: none;

 }

/*** END NAV STYLES ***/

and this HTML:

<div id="nav" class="nav">

 <ul class="nav">

  <li><a href="<?php echo $pageurl; ?>home/">Home</a></li>

  <li><a href="<?php echo $pageurl; ?>what-we-do/">What We Do</a></li>

  <li><a href="<?php echo $pageurl; ?>blog/">Blog</a></li>

  <li><a href="<?php echo $pageurl; ?>about/">About Us</a></li>

  <li><a href="<?php echo $pageurl; ?>contact-us/">Contact Us</a></li>

 </ul>

</div>

The markup above worked like a charm in Chrome and FF3.

Step 5. Circumstantial Challenge: I chose to ignore IE browers while I crafted the pages.  Generally, I wouldn’t do that.  My Windows machine that I use for development had recently died and was awaiting replacement parts.  I had just converted my old tablet laptop into an Ubuntu machine without the likes of IE (Side Note: I was looking for a way to get use out of an old machine and ended up reviving it in very similar fashion as this cool blogger).  I had tried a few user agent simulators but didn’t immediately have much luck so I just decided that checking across browsers would have to wait.

Step 6.  Finally Facing IE: Last night I knew it was time to face the IE style challenge.  Most of the tweaks required were relatively easy fixes but I was stuck on the horizontal menu.  None of the <li>s were displaying inline as they did in other browsers.  I spent probably an hour making changes to the above code with no good results.  Most of my attempts negatively affected the display in FF and Chrome.

Step 7. Investigation and display:table-cell; Back to Google with queries like “Horizontal Menus in IE”, “Inline Navigation broken IE”, “IE is annoying”.   Searching led me to this thread in which I realized the display:table-cell style of the <li>s wasn’t recognized in IE.  The thread offered a work-around that I wasn’t stoked about mainly because I didn’t fully understand it.

Step 8. Newb and IE Specific Style Sheet: Being impatient and a newb, I went with the first plan that popped in my head:  Use php to determine the browser.  If the browser is IE, load an alternate stylesheet.  In that alternate stylesheet, replace display:table-cell with a float approach.  I started with the stylesheet first assuming the first two steps would be a piece of cake.  My navigation style for IE ended up looking like this (changes in red):

ul.nav>li{
	/* display: table-cell; */
	position: relative;
	margin: 0px 2px 2px 0px;
	text-align: center;
	float: left;
	width: 182px;
}

The above worked to get the menu to display very well in IE7

Step 9.  Determine the User Agent using get_browser(): I had trouble with this step.  First I thought it would be really easy to use get_browser() .  However, for that to work you need to modify the php.ini file to point to a new browscap.ini file that you have to add.  That really isn’t bad at all but I couldn’t figure out how to get to the php.ini file on my GoDaddy hosting account.  Perhaps there is a way using the terminal but FTP and the hosted controls wouldn’t grant me access to anything in the root directory.

Step 10. Preg_Match and HTTP_USER_AGENT: I decided that I could use some regular expressions or pattern matching and pull out the browser type from this:

<?php

 echo $_SERVER['HTTP_USER_AGENT'];

 ?>

This went surprisingly quickly and I ended up with the following php at the top of my page template:

<?php  /* Sense browser in order to make navigation work in IE */

$u_agent = $_SERVER['HTTP_USER_AGENT'];   

$ub = '';   

if(preg_match('/MSIE/i',$u_agent))   

{   

$ub = "ie";   

}   

else  

{   $ub = "decentbrowser";  

}  

?>

Within the head, I placed this code/html:

<?php

if ($ub=='ie') { 

    echo '<link rel="stylesheet" type="text/css" href="/stylesIE.css" />'; 

  } else { 

    echo '<link rel="stylesheet" type="text/css" href="/styles.css" />'; 

  } 

?>

I’m fairly confident there are much better and more elegant ways to do this and I welcome anyone’s comments on this.  Otherwise, it is working today.  I’ll link to the site when it is “Officially Launched”.