-
So I totally forgot to mention ...
Drew and Brian did a fantastic job last December with their organisation and editorial skills for the annual magazine 24ways. I was very honoured to be asked again to contribute to the 2007 issue.
Natalie Downe sets the presses rolling with an in-depth look at the state of print stylesheets in 2007. Often neglected by developers but much loved by the user, the simple print stylesheet can really add that finishing touch to even the best site designs. So get this down you. Ding dong!
It really is worth checking out the selection of articles, there is a great variety of topics and all make fascinating reading.
-
Happy Naked day!
As part of CSS Naked day this site is going CSS nude for today only! I encourage you to do the same. Go on ... show off your <body>!
-
Nabuur - expandable form fields in the wild
Nabuur - expandable form fields in the wild — Site to aid charitable works through use of the skill set of the contributor, good cause. Also nice use of expandable form fields in the wild. Would be better if it had some restriction as to how big the fields could get, or just allow text areas ind stan.
-
Reliably attaching CSS
In response to PPK's 24 ways article I thought I should describe the method I currently choose employ to hide elements onload. I have gone through this briefly in my article 'releasing the permalink slideshow'. As PPK mentioned, it is important to hide elements not needed for browsers that don't support JavaScript. The most important part of this hide technique is that there is no flicker in the period that the page is being loaded.
PPK suggests using document.write as to insert style elements inside the head. I propose instead using JavaScript's try / catch functionality to attach a stylesheet. Elements that need to be in the source for accessibility purposes, or need to be displayed for browsers without JavaScript, can then have a class that will hide them for browsers with JavaScript.
I like to use the try catch to ensure there are no issues in appending the link element to the head. The link contains the stylesheet that will then hide the elements that need to be hidden:
function setCSS(css) { try { // append stylesheet to alter document.getElementsByTagName("head")[0].appendChild(css); } catch (e) { setTimeout(function(){setCSS(css)}, 100); } } // create CSS element to set up the page var css = document.createElement("link"); css.setAttribute("href",path/to/stylesheet); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); // attempt to add the css and then keep trying till we do setCSS(css); css = null;The setTimeout ensures that if there is an issue attaching the link to the bottom of the head (e.g. if the head hasn't finished loading when the link is trying to be attached) it retries after 100ms. Resetting the css variable to null avoids potential memory leaks.
-
Using hasLayout to fix bugs in IE
Recently at work I came across a particularly tricky IE bug that I have seen a couple times now. I thought I would share the solution since it wasn't immediately obvious.
On the new Business in the community site (just launched by Torchbox) there is a timeline facility to show information about different events in Business, Politics and 'Business in the community' over time (Matthew did the awesome javascript that powers it).
The scrolling is controlled by animating the horizontal position relative value of the inner timeline div, the container window has
overflow: hidden. Whilst styling it, initially in quirks mode, the animation of the timeline div's worked just fine. IE behaved and respected the overflow on the container. However, in standards mode the overflow failed and the timeline divs were appearing outside of the container in both IE6 and 7, where of course other browsers were fine.
When debugged I realised that adding a position property fixed the issue, from this and from experience it was then apparent that the inner timeline was having its hasLayout property set to true in IE but the container was not.
The
hasLayoutproperty is Microsoft's way of identifying elements that form part of the structure of the page, it treats them differently and some crazy bugs can occur because of it. The solution was then to force the container to also sethasLayoutproperty to true, so putting position:relative on the container made theoverflow:hiddenbehave.hasLayoutis really annoying, it defaults to false unless (as found on the Microsoft site) an object has the properties height, display, float, position or width set (or also writingMode or zoom which are both proprietary Microsoft properties) however I would be careful believing entirely the 'remarks' section especially as it doesn't listposition:relativeas one of the triggers where as in fact it is.In case you haven't come across it before now, other craziness that can occur from the
hasLayoutproperty includes some elements disappearing behind containers with background colours (again quite easily fixed by forcing the elements inside to have thehasLayoutproperty as true)hasLayloutalso affects keyboard navigation in subtle ways as explained in this article. -
Still testing those blockquotes
Inspired by the comments on my last entry I decided to try out their techniques with some multiple paragraphs. Since my technique was only ever aimed at single quotes, I welcome the new suggestions.
I really love the
display: list-itemidea that Pete Lambert but I have been avoiding last-child because of browser compatibility issues.First I tried multiple quotes with the paragraphs displayed as list items and
list-style-position: inside;the problem with that is that the second bottom right quote to display correctly without extra markup. Naturally it is not possible to have the display set as list item - to get both images appearing per paragraph - together with the display inline - to get the second quote make snuggled amongst at the end of the text.So, just for fun I made it look nice with the constraints of no extra markup, not the same look or idea admittedly but the padding and list-style-position outside are more consistent than the first attempt.
The only way to make it resemble the first 'one paragraph - inline image quotes - effect is to add an extra div containing each paragraph, yeah its nasty, I know. The div is set to display list item with list-style-position as inside, the paragraph is display: inline with the background image.
It could be argued that logically each paragraph should not have their own quote marks, if this is the case there are a number of methods that you could use, either Ben's last child technique or Simon's similar, background image technique from a while back, which again requires extra markup.
As ever the technique you choose all comes back to the design, and what you want to do with it.
-
Inline image quotes
I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images.
To be a valid blockquote there must be an inner block level containing element such as a paragraph or div. You can use this to your advantage in order to apply the two background images. The top one you can apply to the block quote itself using a text indent to make space for the image.
blockquote { text-indent: 25px; background: url(quotes1.png); background-position: 0 2px; background-repeat: no-repeat; }For the second image on the bottom right, you are going to be doing something a bit clever with the containing paragraph. Set it to be display inline, set padding on the right to be a bit more than the width of your image, then put the background image of the end quote mark on the bottom right of the paragraph.
blockquote p { display: inline; margin: 0; padding-right: 24px; background: url(quotes2.png); background-position: bottom right; background-repeat: no-repeat; }And there you have it, inline image quotes.
7 items tagged "charity"
Look at "charity" on del.icio.us, Flickr or Technorati