i just saw this in an email. for a limited time, there is a 50% off discount on microsoft expression studio, expression blend and expression web through the new microsoft online store. who said santa does not come early?!?

as promised, i wanted to follow-up on my post on developing the new briangorbett.com site with what was even more challenging... the design.

first, i believe in simplistic, clean designs and i wanted to echo this with the site launch. once i had my paper-prototype done, i figured it would be a fairly straight forward exercise. boy, was i wrong.

it turned out that the challenges i faced had to do more with the various different characteristics of the browsers and how they varied in rendering design. what is so challenging is the way the different browsers handled styles. one that challenged me was ie's inability to use css inheritance (except for the direction and visibility properties).

the challenge was the way i wanted the last 5 feeds posted to fade in and out below my flickr slideshow. in order to achieve the fade effect and be a link, the link property has to inherit the color of the text property so that when the javascript fades the text, the link fades too. well in ie, that is not going to happen. so what i ended having to do is detect if the browser is ie (except 8) and use a standard onclick event on the entire div that redirects to the post. you can see this by browsing to the main page with firefox and hovering over the text. this is using a standard link whereas in ie, you can hover over the entire div box and not just the text.

another little trick i am using (although probably not recommended) is using the deprecated "hand" value for the cursor property in the div. the nice thing about this is that firefox and safari does not recognize this so still uses the default arrow cursor. however, ie changes the cursor to the hand (the correct cross-browser value to change the cursor to the pointer hand).

another handy trick is to use a conditional in your html to assign a custom stylesheet for a specific browser (if only this was not necessary). for instance, i am using this in the head:

    <![if !IE]>
        <link rel="stylesheet" type="text/css" href="NotIE.css" />
    <![endif]>

this is going to load up the styles included in the stylesheet "NotIE.css" only if the browser is, you guessed it, not ie! this is important when trying to do things like simply centering a div. there are plenty of resources on the web for finding how to this in a cross-browser way, so i won't waste your time. the point is to use proper techniques to get your design the way you want it to look on all browsers, not just the one you may use all the time (i test on ie (now using 8 since i can switch modes to make it act like 8, 7, 5, etc.), safari, and firefox).

i guess we all have many different organizations to thank for the incompatibilities within the browsers (particularly the ambiguity in the standards), but it is our duty as web developers and designers to make the user experience as comfortable for users of all browsers. it will be interesting when ie 8 drops in all of it's full standards mode. we will see how many web developers had truly tested their sites.