Accessibility links

« back to home Hello you. from my twitter@withoutnations I'll bring it along tomorrow

« mi casa es su casa

Archive for October, 2009

Epic Win
  • No Related Post

Epic Win

Monday, October 26, 2009 at 9:20 pm
Comments 0

Bob Ross Legend

Common ie6 fixes

at 7:17 pm
Comments 1

Like many I tend to come across ie6 rendering bugs and like many have developed my own (read others) set of techniques to overcome theme.

Correct doctype, with full correct DTD, transitional or strict (solves so many issues without having to change anything):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reset stylesheet (via Eric Meyer) the goal of a reset stylesheet is “to reduce browser inconsistencies” see here for a deeper explanation, again solves many many issues and enables a new build to start from the same starting point on every browser by resetting common element behaviour.

/*
=Reset
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;font-weight:inherit;
font-style:inherit;font-size:100%;font-family:inherit;
vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

And some other fixes I have picked up

/* -------------------- */
/* =IE6 FIXES */
/* ------------------ */
img {border:none;display:block;}
/*display block to avoid IE6 whitespace on inline elements
due to baseline spacing (for descender space),i.e. images*/

.inline {display:inline;}
/*used to fix IE6 double margin bugs*/

.haslayout {height:1%;}
/*used to fix IE6 haslayout bugs*/

.button {overflow:visible;display:block;}
/*add this class to form buttons with issues*/

a, a:link, a:visited, a:hover, a:active {color:red;}
/*link styles should be in the order LVHA esp for IE6 to display them well*/

Also, avoid/beware overuse of widths, heights, margins (esp with floats), too many position: relative’s (esp. nested position:relatives), widths + heights + padding + margin (box model issues, add padding/margin to fixed-width child elements). There are many more issues and many other ways to solve them, but generally most can be solved via fairly well documented locations, a good one here, otherwise search on google.

FUN!
  • No Related Post

FUN!

at 2:00 pm
Comments 0

Fun!

Scary

Saturday, October 24, 2009 at 6:56 pm
Comments 1

<eeek/>” class=”

Tiny washing!
  • No Related Post

Tiny washing!

Thursday, October 22, 2009 at 3:54 pm
Comments 1

Tiny Washing

Adiós ie6

Wednesday, October 21, 2009 at 7:24 pm
Comments 0

Sorry ie6, your names not down your not coming in.

ie6 is ancient, crap and quite frankly I can’t be bothered, not when it’s my own site. I deal too much with that in my day job to be arsing about with rendering bugs and bad programming in my own time.

So for ie6 users I have applied “Aggressive Graceful Degradation” via Andy Clarke and his Universal Internet Explorer 6 CSS.

The site is still very accessible via IE6, but just no visual goodies. There have been too many advances in css for me to stick with 6 year old knowledge, to allow me to grow professionally I need to be able to play with the new toys. I mean it’s not too much to ask for li:last-child or input[type="button"] is it?

So if you are an ie6 user, just think of it as a realllly minimalist version of the design, or if you want to see websites not framed via technology from the last century upgrade now.

For those not using satan’s own browser, screengrab below:

ie6

Buttonz
  • No Related Post

Buttonz

Tuesday, October 20, 2009 at 9:01 pm
Comments 0

Right adding new post to try and get in the habit again, look our (cyclists) very own crossing machine type thing:

Our own button!

clear:both

at 8:45 pm
Comments 0

I’ve abandoned this blog for too long, my excuse being twitter took over my general communications attention and I have built more blogs in the last year and a half that the rest of my online career put together (about 250 odd blogs in just over a year).

The main driver for this was leaving publishing after eight long and enjoyable years in publishing to join Headshift Ltd. a social business consultancy (thus the multitude of blogs). I’m loving it, but haven’t felt the desire to blog much, I guess a coals to Newcastle type issue.

Yet it’s time to return to blogging, both as twitter, although an excellent tool is just that, a tool among many others that each have their own benefits and disadvantages. So as it’s a new chapter in this blog, it felt necessary to refresh the focus and design. Which has culminated in a more tumbler-esque feel (yeah, a bit obvious I know) in the sense that there are different types of blog entry; video, image, post and code (and maybe others in the future). That last category is because I want to speak more about code and my professional practice more, specifically css/xhtml/jquery as well as other concerns such as ux, interaction design, development (front-end + back-end) and all the bits inbetween (i.e. the issues with how those practices interact).

So I have categorised this post somewhat incorrectly as ‘code’ just because I can, to justify it, some css I use far too often, it’s generally non-semantic, there are other probably better methods (overflow:hidden on container for self clearing) but sometimes there is nothing more satisfying that popping this into a container after floated elements and see that bad boy get into line.

/* -------------------- */
/* =Clearing */
/* ------------------ */
.clear {clear:both; line-height:0; font-size:0; height:0;
padding:0; margin:0; border:none;}

Oh and btw, haven’t tested this in the IEs yet – not sure if I will (i will but I just want to be mean). Although they will be getting graceful degradation for the nicer more advanced bits on this design; you can’t make black&white tv’s show in colour so why try.

Right, hopefully it won’t be 6 months before I post again.

Tree
  • No Related Post

Tree

Monday, October 19, 2009 at 11:04 pm
Comments 0

[flash http://www.flickr.com/apps/video/stewart.swf?v=71377]