LOL @ Google

Why does Google send SNAILMAIL for promotions?? Overseas?? LOL!!!

They um, have my email address...

The future is now

Shopping Cart Options - Small Business / Indie Labels - Part 2

And the winner is...
Big Cartel http://www.bigcartel.com/
For a new startup indie jewellery label.

Why:

• Low entry level cost $9.99p/m
• Simplicity; of options, of admin, and conveyed through thoughtful interface design throughout their offering
• I don't have to host it 
• Has a 'store directory' for promotion within the community
• Has a sizable community / forums
• Allows a custom domain
• No commissions, just flat store fee, paid monthly no contacts
• Paypal only, no mucking about with merchant stuff, eg. no liasing to make this happen
• The client had already signed up for a free store and seemed comfortable with the admin section, so this was a good sign it would be pain free for them (me).

Result?
I'm pleased with this shop solution, it was up and running at signup, and customising the 'Sexy' theme with basic CSS to personalise it and match the clients website was done and browser tested in under a day. I havn't tried more intense theme customisations / filters as there is no budget, and no need I can see for now.

The non-technical client was able to use the BigCartel admin without instructions to add images and pages, colour options, descriptions, prices, categories etc etc.
The only caveats was explaining how to crop / resize photos in Photoshop properly... as there is no inbuilt crop / resize app in the CMS. (Photoshops better anyway).

It check it here: (Still under construction in terms of content)
http://www.yinjoux.bigcartel.com/
or here when the domains been setup
http://www.shop.yinjoux.com/

Not sure how it goes with SEO etc, but for this sort of client main traffic will come from design blog referrers, online mags and the like, so its no biggie at this stage, and they have a Wordpress main site which can be customised for the SEO goodness.

Shopify's affiliate options are enticing though, I'll keep them in mind for future, larger volume shop clients with a larger budget.

Publish to HTML5 from Illustrator using plugin

This is cool, HTML5 canvas support for Illustrator:

http://rwillustrator.blogspot.com/2010/10/web-designers-rejoice-again-new-html5.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+RealWorldIllustrator+%28Real+World+Illustrator%29

The content displays and animates flawlessly. What’s totally cool about this plugin is that it almost turns Adobe Illustrator into Adobe Flash Professional—only it publishes to HTML5 instead of SWF. It kind of blows your mind.

Wonder if this HTML5 stuff is going to be around for the long haul or if its just a fad... already seen a few job ads for specifically HTML5 developers even though its only just been released far as I know.

Browser testing - new stuff

This is a really good rundown of browser testing and resources associated
http://harrikauhanen.posterous.com/an-ultimate-guide-to-browser-testing

Good point, has testsuite of legacy browsers, modern browsers, and future browsers, for the latest beta of next browser version. Id only go so far for IE though, other just get better really.

Heres a nice list of browser specific hacks
http://paulirish.com/2009/browser-specific-css-hacks/

Heres where I found a standalone Safari 3.2 and safari 4 beta(?useful)
http://tripledoubleyou.subtlegradient.com/stuff/Standalone%20Safari/
sadly the 2.0 versions link not working anymore.

Couldnt install IE9 beta on the windows vista virtual image, maybe it needs to go on my windows 10 machine.

By the way - the newest Macbook Pro has Bootcamp - really simple way to boot into Windows on your mac, no extra vm hardware required...

Drupal latest Zen theme css browser fixes for a sub theme

The latest Zen theme for Drupal 6 has been redone it seems, and I've had very little trouble with x-browser stuff this time, except for being due to trying to make a tricky liquid header with lots of floated blocks, causing the usual problems in IE7 and below with float bugs galore.

Not used nicemenus dropdowns this time, so thats probably saved some testing time.

Added into the zen themes 'html-reset.css' (v 1.6.2.2 2010/06/26) a few YUI2reset or Eric Meyer Reset styles, these were:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0; /*YUI2Reset*/
padding:0; /*YUI2Reset*/
}


table {
border-spacing:0;/*EMReset*/
}


td {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}


caption {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}

acronym {
border:0; /*YUI2Reset*/
}



fieldset {
border: 0;/*YUI2Reset*/
}


address, cite, code, dfn, var { /*YUI2Reset*/
font-style:normal;
font-weight:normal;
}

Then here are some other fixes I added to html-reset.css:

#content th, #content thead th, #content tbody th, #content thead{
word-wrap:normal;/*For benefit of Opera (10), not giving table headers proper width automatically, figure theres rarely going to be a long unbroken url or something that needs breaking in a table header...*/
}

/*Fixes for squashed body text tables in safari and opera when occur after floated image*/
#content .section #content-area .node .content table {
clear:both;
}

And some to ie.css

legend { 
color:#666666;/*IE makes it blue...*/
*margin-left:-9px; /*for IE7, Legend is indented otherwise, IE8 fine*/
}

And a zoom:1 to something containing floats

And for ie6.css
The usual double float margin bug fixes (display:inline) and transparency fixes, some zoom:1 for HasLayout, and this one I havn't come across before:

#block-menu-primary-links ul li a { 
display:inline-block; /*List white space bug [5]*/
}


#block-menu-primary-links ul li a { 
display:block; /*List white space bug [5]*/
}

And for print.css
In addition to zens pre setup print stylesheet I added these changes or additions


/* Un-float the content */
#content,
#content .section,
#content-area {
float: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide sidebars and nav elements */

#header,

#skip-link,

#navigation,

.region-sidebar-first,

.region-sidebar-second,

#footer,

.breadcrumb,

div.tabs,

.links,

.taxonomy,

.book-navigation,

.forum-topic-navigation,

.pager,

.feed-icons,

.warning,

.sticky-header {

  visibility: hidden;

  display: none;

}

/* Otherwise, Firefox clips the content after the first page. */
#page-wrapper, #page, #main-wrapper, #main, #content, #content .section, #content-area, .node, .node .content
{
overflow-y: visible;
display: inline; /*Important for Ffox content clipping after first page, and makes content full width of page*/
*display: inline-block;/*Fixes text clipping on right side in IE6, IE7*/
}

#page

{

font-size:12pt;

}

#content{

_textalign:left; /*Ie6 is centering text...*/

}

Clearing Floats... modern methods and explanations

Probably the best explanation of using clearfix by Suzy I have seen, including explaining errors and now obselete parts.
http://www.sitepoint.com/forums/showthread.php?t=567147&page=2

There is such confusion between 'clearing floats' and 'containing floats' and 'triggering HasLayout'. They are all called clear fixes but are different things really.
eg this comment from http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element

That is for pushing down the bottom edge of a container to wholly contain its floated children, which is a different problem altogether.

Totally! So much focus on 'containing floats' methods.

I've come across a situation where I actually need a float to just clear the one before it for layout purposes, because IE7 cant handle float and clear on the same element, it's actually not a float containment/hasLayout problem, but a serious limitation as it just cant do this layout it seems, its a real bug, no type of clearfixing/HasLayout is helping. It dont care if the float parent contains the children or not, I just need it to clear!
See demo, it is situation #3:
http://www.brunildo.org/test/IEWfc3.html

I actually think I need to use an empty clearing element in the markup... the author of that demo says elsewhere that there is no solution.
Cant even use the :after pseudo class for this weird purpose since IE7 dosn't read that...
only solution that keeps coming up
http://stackoverflow.com/questions/2614566/ie7-and-ie8-float-clearing-without-adding-empty-elements

Other good resources on modern clearfix use:
Good post explaining block formatting context, more indepth use of clearfix and how it can cause more problems if your not thinking about it.
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/

This is an evolved clearfix hack, using a space instead of a period. (see comments for using a unicode space, and line height etc to make it even more invisible.
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

eg see the hack at the end for clearfix on the 960 grid css. uses a unicode space  and zoom:1 for IEs. I prefer zoom:1, its simple, dosnt mess with overflow, and is clearly just for older IE, and goes just in IEs stylesheet. I like it since I always rememebr what its there for, whereas an overflow property might be there for a different reason and if you forget to comment it, you might not realise its a haslayout trigger.
http://960.gs/css/uncompressed/960.css

A nice roundup of IE6 specific fixes for HasLayout and a few specific things
http://www.onderhond.com/blog/work/ie6-core-bug-fixing

A JQuery plugin that shows you when your floats aren't cleared!!!! this is cool!
http://code.google.com/p/samaxesjs/wiki/CSSFloatPlugin

IE7 CSS float bug, Never put float and clear on same element

A day of IE hell worse than any I can remember... 

Nasty encounter with a bug that happens when float and clear is on the same element, which is floated in an opposite direction from a preceding float, nothing you can do will clear the preceding float, it seems, except adding an empty div or similar to clear, in between the 2... yuk...

Mental note: Never put float and clear on same element

I did, with the floats in opposite directions, and I got this bug, situation 3
http://www.brunildo.org/test/IEWfc3.html

So I restructured the PAGE TEMPLATE, so my elements could have the floats going in the same direction. But no dice, what I got then was this bug

http://www.brunildo.org/test/IEWfc.html

The culprit being that I still had float and clear on same element. IE7 just dosn't like this. The solution luckily for me, was to remove the clear:both from the 2nd last floated element. I realised I could do this by using firebug and checking out what I could do without, and low and behold, removing the clear didn't make any difference, because of the elements length, it was longer than the space available that I was trying to clear it from.

Thats not really a fix, but it works in this layout, it self clears because it simply wont fit alongside the previous floats, lucky me.

The only other option would have been to add an extra clearing wrapper and wrap the floats above in that, or put an empty clearer div preceding the floats I wanted cleared.