You're looking at all articles on The Hickensian tagged 'css'

I’m a staunch Coda 2 user, but I also like to write CSS in Less (and occasionally SASS), with LiveReload compiling the CSS file for me. The problem here is that Coda doesn’t detect the new file, so doesn’t automatically mark it for publishing. It would be nice to just hit ‘Publish All’ and be done with it.

Simple workaround: Right-click your CSS file choose “Open with…” and then “Coda 2.app”. From now on, Coda will detect the compiled CSS and mark it for publishing. Huzzah!

I’ll be doing a 5 minute microslot on CSS filters at the next Oxford Geek Night on July 21st. CSS filters is the practice of linking to your stylesheets in different ways in order to control how different browsers and their versions get your CSS. It’s something I get quite a lot of questions about when people look at my source code, so I thought I’d explain it via a presentation! The OGN microslot is the ideal format for it.

If you live nearish to Oxford, and haven’t been to Geek Night yet, do come and see what you’re missing. It’s a free event (sponsored by local gents/superstars Torchbox) in the Jericho Tavern in Oxford. Beer, geek talk and socialising. What more do you need?

In other news – Family Hicks also waiting to hear about our house move date – what’s the betting that it becomes July 21st?! ;)

Please note Since Simplenote changed their web app design and markup, this no longer works properly. Sadly the design still isn’t fluid. You’re welcome to take the CSS and do as you like with it!

—-

If you’ve ever used SimpleNote as a Fluid app to create a ‘desktop client’, you’ll have discovered that the webapp is a fixed size. I wanted a SimpleNote app that could be resized small, and still be able to see all the fields.

This userstyle does just that – everything is aligned to the viewport. To install in a fluid app instance, go to Preferences > Userstyles. Add the following ‘URL Pattern’:

https://simple-note.appspot.com/*

Paste the contents of the SimpleNote Fluid CSS file into the field below. It should look like this:

Of course, there’s nothing to stop you using this as a normal user style, especially in a sidebar. It’s simply that it’s not intended for those that use SimpleNote in a browser tab, where it would be too wide.

Sure, there’s trouble ahead with the announcement that Safari will be joining Opera in supporting @font-face, the chance at last for wider typeface choice! Place a font file on your server, and link to it in order to embed the typeface. We’ve been able to do it in PDFs and Flash movies since time began, but so far only one attempt has been made to make them work in HTML.

First problem, yes this will mean some people will specify unreadable/unsuitable type for body copy, but what’s new? It simply means that there will be a wider variety of unreadable fonts to choose from.

Secondly, and this is the real sticking point, font licensing. As John Gruber points out:

The conundrum is that most of the fonts worth using can’t legally be shared as free downloads, and most of the fonts that are legally shareable aren’t worth using.

Even if you purchase a font legally, the file is available to all to take. Now then, I have an idea to get around this – just like Google Maps, you purchase a ‘key’, a unique code, that works with that domain name only, with the font file (possibly) being served by the foundry. The actual filename of the font is hidden, and anyone trying to use that on a different URL, simply won’t get any dice. Whatever the solution – the font foundry that leaps onto this has the chance to lead.

Personally, I’m just happy that we’re reaching a point where we’re having this conversation! I want to be able to specify a face, and enable everyone to see it, without resorting to the image replacement and SiFR workarounds.

I’ve been using Flickr as a bit of testbed for a new site theme I’ve been working on for Google Reader. C’mon after the Bloglines thing, I bet you saw it coming didn’t you?!

Same drill again then. There may well be oddness and inconsistencies, and Google may well make radical changes to the Reader’s markup tomorrow, mucking the whole show up. But for what it’s worth, here it is! Its not trying to be original or ‘better’ than the default theme, it’s just trying to make it look like a Mac OS X app – that’s all I want!

Actually, while this may create bugs, it actually solves a bug that I was seeing in WebKit browsers with the default css. When scrolling, some sidebar elements would annoyingly bounce up and down. Not any more!

The download includes a list of known bugs/todos. If you seen anything not on this list, please leave a comment! I’ll update this page when I upload newer versions of the theme.

Changes

17/4/07 – Fixed 2 bugs that were annoying most people: I’ve reinstated feed list highlighting and pressing U now shows the entries list full width

Installation

Download gReader.zip. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.

Firefox

Once you have the Stylish extension installed, just copy and paste the css into the ‘create styles for this page’ window.

Camino

In Camino, either paste this into your /Library/Application Support/Camino/chrome/userContent.css file, or if that file doesn’t exist, rename the greader.css file to be userContent.css. The theme will be applied when you restart Camino.

Safari

Once Safaristand is installed, place the greader.css file in your user/Library/Safari/Stand/UserStyleSheets folder. Then visit Google Reader, go to SafariStand > Settings > Site Alteration. Add the site, enable Site Alteration and choose the greader file from the list. Make sure the matching pattern is just www.google.com. You may have to empty your cache, restart Safari and refresh before seeing any changes!

Omniweb

In Site Preferences > Page Appearance, choose the greader.css file under ‘Style Sheet’. The change should happen instantly!

Opera

Put the greader.css file anywhere you like! Right-click on the Google Reader page, choose "Edit Site Preferences" and select the CSS file through the display tab, under ‘My Style Sheet’. Like Omniweb, the change should apply immediately.

Have you found this theme enhances your life beyond all telling?

Please consider donating some spare change to the Hicksdesign Cheese Fund:

Matthew Tretter has solved the perennial problem with the current vertical centering technique – loss of content vertically when the window is too small, without even scrollbars to see that lost content. His simple solution is the addition of a floated ‘shiv div’ that sits at the top, pushing the main content area down, but then collapses when the content arrives at the top of the screen.

This shiv div could also serve other purposes, such as container for skip links, although the addition of a simple little div doesn’t cause me any sleepless nights.

Before I leave the subject of vertical centering, a wee tip. Instead of making the negative margin exactly half the height of the main content, give it 10px more. Its a picture framing trick, as centering it exactly can make it feel as if it’s ‘falling off the page’.

I’m going to implement this genius fix as soon as I can, although the semi-fluid design I desire ( I don’t intend the site to be stuck at 900px wide) still eludes me.

As well as some tweaks and improvements to my first attempt, I’ve added highlighting of XFN attributes to the list. I’m too lazy to do the XFN thing, but others seem to like it. Maybe one day.

It works by revealing the relationships when hovering over the name, like this (again, taken from adactio)

There is a caveat. This is only CSS, and apart from having the potential to mess up some site layouts, can only work when the author has added a class of “n” or “fn” to the link (as used in hCard). Otherwise, it would go about showing all sorts of rel attributes that wouldn’t be quite so interesting (such as ‘alternate’).

After trying out all sorts of complicated styling, I’ve decided to keep this all as simple as I can bear, so as not to mess things up too much. Do leave feedback if there is anything you want adding! In particular, I’m looking for feedback on whether to use ‘vCard’, ‘Contact’, just an address book icon, or just a microformats icon. What would be the most useful and understandable?

Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.

After I mocked up an image of how Microformats detection might work in Safari, I started looking at the tools there were available. While there wasn’t anything that handled detection, Tantek did release his bookmarklets to allow hCard and hCalendar information to be exported from a page. Nothing in the region of Tails where you could view a list and choose which contacts/events you wanted, but it worked. This just left some way of handling detection, until I came across Chris Casciano’s script for NetNewsWire to Extract Microformats. It was a simple solution too – use css to style .vcard and .vevent classes differently.

So I’ve knocked up one of my own as a starting point. Here it is in action on Adactio, a rich harvest of microformats to be highlighted:

Here’s the file to download: expose-mf.css

It may work better with some designs than others. So far, I’ve not come across any problems where it renders a site unreadable, but it could easily happen. This just highlights hCard and hCalendar, but easily be expanded to things like XFN and show attributes. This is something I might update as time goes on.

A wee CSS note: I’ve put in a border-radius property for those using the latest WebKit. For Camino folks there’s a -moz-border-radius of course.

Using it in Camino

Copy and paste the css into your userContent.css file found in username/Library/Application Support/Camino/chrome/. Restart Camino. If for some reason you did want to use this with Firefox, the instructions (for the Mac) are the same.

User scripts functionality is planned for a future version of Camino, so hopefully this will open better ways of dealing with Microformats.

Using it in Safari

Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.

Using it in Omniweb

Again, put the css file anywhere you like, and then select it in Preferences > Appearance > Style Sheet. No need to restart, just refresh.

One of the headaches I’ve had with the position: fixed navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).

OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none – revealing the rollover state below. With me so far?

When combined with position:fixed, the nav had a strange effect when scrolling. As you scroll down, the background of the anchor tag scrolls with it, but not the background of the <li> item:

This didn’t occur in Firefox or Opera (IE doesn’t support position:fixed of course, so it gets position:absolute instead), just in WebKit browsers. It’s a minor, but irritating problem.

The fix was not, as I thought it might be, applying background-attachment: fixed, but just this:

#nav ol a  { position: absolute; }

I’m posting it here in case anyone else has come across it too. A bug in WebKit? Trouble is, when you’re bending CSS to do thing it wasn’t designed to do (Image replacement and fixed positioning) it may not be.

It would easy to to think that Firefox is the only browser with cool extensions, and overlook the excellent ones available for Safari, such as Saft, Stand and PithHelmet.

Like Saft, PithHelmet started life as an extension with a single purpose, and and has since grown beyond its remit. Starting life as an advert blocker, PithHelmet now boasts powerful per-site preferences, and the ability to apply custom css AND Javascript to individual sites. This takes Omniweb’s site preferences and expands it even further.

Late last year I began playing with the custom css function, and while it didn’t work at first (preferences weren’t saved after quitting Safari), Mike Solomon, PithHelmets developer, soon ironed out all the glitches. Its been a real pleasure to communicate with Mike. I’ve questioned, he’s responded with new versions, and now he’s added the ability to create a single theme file that can be sent to others. Dragging a site rule from the preferences window into the finder creates .phr file (Pith Helmet Rule), but now it will include all the css, javascript and images for your site skin.

Why bother skinning a site? Actually, there is a purpose of sorts. Lets say for example that you’re a heavy Gmail user, but you’d like the interface to look a little less PC. With a site skin you could alter it to look more OS X.

So here’s the one I’ve been working on. A Spotlight-ish skin for de.licio.us. The start of this idea came from Tom Coates mockups of bookmark tagging inside Safari. My aim was to make de.licio.us look more like a part of my browser, rather than a web page.

(click image for full sized version)

If you’d like to give it a go, download this site rule (ctrl-click and ‘Save linked file as’), and then drag and drop it into PithHelmets site preferences window. That should be all you have to do, but this is a ‘first try’, so do let me know if anything goes wrong.

The css for this is a bit quick and sloppy. I’ve coded it so that the css can be used in a usercontent.css (that would get applied to every site), so while it’s flexible, it could be cut down when being used in the PithHelmet context. Ways to improve this (if I had the time) would be to use a javascript to dynamically create classes for the alternating rows, rather than the limited adjacent sibling selector method that I used in the css. All in all, it’s not perfect, but its enough to demonstrate what you can do. Someone with more time could take this and improve on it.

To create your own site theme, you have to use copious amounts of the inherit value to override the site’s own css rules. Then once you’re ready to go:

1. visit the site you want to change in Safari
2. open up PithHelmet menu>Show Site Preferences. If you haven’t already set preferences for that site, it will be at the bottom of the list.
3. under ‘style’ select your custom css, and javascript, if applicable.
4. type in a theme name
5. If your theme requires images, create a directory with the theme name:
6. _{/Library/Application Support/PithHelmet/com.apple.Safari/themename and then add the files to that directory}
7. make sure that images in your css file refer to file:////Library/Application%20Support/PithHelmet/com.apple.Safari/
8. themename/newlogo.png (You can leave the ~, as this will choose the current users home directory, and allow the theme to be used by others). If it all looks OK, drag and drop the theme onto the finder, and this will create the .phr file with all the theme information.

The ability to create an easily sharable site theme opens up possibilities. Sites like de.licio.us are perhaps a little easier than some to theme, as all the styling is done with external css.

So, who’d like to have a go?

(*Disclaimer* – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

div, {
width: 80%;
}

Mozilla, Opera and Safari ignore the rule. It validates too!). I hope this is useful to someone.

The fact that IE 5 Mac applies the rule as well, could reduce its usefulness. If you have time, please test it further and let me know your results.

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

Here are a few solutions, and as you would expect, they each have their own pros and cons:

html>body { height: 800px; }

For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway.
Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.

html>body { overflow:scroll; }

For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content.
Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.

#Content p.bstext {
        font-size:216px;
        font-weight:900;
        line-height:130px;
        letter-spacing:-69px;
        overflow:hidden;
        color:#FFF;
        background:transparent;
}

This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.

Update

Thanks to Patrick Lauke who came up with this genius solution:

html { height: 100%; margin-bottom: 1px; }

This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.

I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).

Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.

userChrome.css

Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.

Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.

download {
 border-bottom: 0px !important;
}

This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:

#throbber-box {
    display: none !important;
 }

This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.

Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.

tab[selected="true"] > .tab-image-right {
    background: url(activetab-right.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-left {
    background: url(activetab-left.png) no-repeat !important;
}
tab[selected="true"] > .tab-image-middle {
    background: url(activetab-middle.png) repeat-x !important;
}

Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).

userContent.css

With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:

input[type="button"],
input[type="submit"] {
    font-size: 12px !important;
    font-family: 'Lucida Grande' !important;
    background: #eee !important;
    -moz-border-radius: 18px !important;
    padding: 1px 6px !important;
    border: 1px solid #ccc !important;
    border-bottom: 2px solid #999 !important;
}

Here’s the result:

Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an ?!).

I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:

input[type="text"],
textarea {
    font-size: 12px !important;
    padding: 1px 3px !important;
    font-family: 'Lucida Grande' !important;
    border: 1px solid #999 !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
    border-top: 2px solid #989898 !important;
}

The University of Kent, is currently looking for a Design and Publishing officer, and interestingly, it’s a post which requires a strong knowledge of CSS and (X)HTML.

It’s based in Canterbury, in the South-East of England, and I’m led to believe that the pay range is £19,460 to £29,128. If you’re interested in applying, further details are available here.

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.

I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.

Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:

ul a {
display: block;
float: left;
clear: left;
}

Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:

li>a {
float: none;
}

The first-child selector means that IE won’t see this rule, but everyone else will.

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Are hovered links underlined?

No – although they could be. Add to the ‘to do list’.

Do visited links differentiate?

No – but this will be sorted in the new design (if it ever sees the light of day)

Is the main text on white background?

Yes – This is mainly because:

1. I like white. White is crisp, clean and looks good. There’s not enough white in the world if you ask me.
2. What doesn’t work on white? Just white (oh, and maybe pale yellow).
3. My colorblindness can make me a bit unadventurous with colour.

Is the main text sans-serif?

Yes – I believe its easier to read body copy on-screen in sans-serif. Strangely, this is the opposite of print design.

Is the DOCTYPE Strict?

Yes – this was a exercise in smugness, dressed up as ‘learning about W3C specs’.

Do they use accesskeys?

No – I did originally have oodles of accesskeys, but recent thinking has made me shun them. Basically, there just aren’t enough spare keys around.

Do they use ‘Steal these’ buttons?

No Рbut as Fran̤ois pointed out, I did until recently. These little things are everywhere. I felt the time was right to make my own.

Is there a print style sheet?

No – Something else I haven’t got around to doing. Silly really, it wouldn’t take long to knock up a basic print stylesheet. Another one for the list.

Is there a 404 page?

No – although I did have one until recently. My move to Textpattern has meant that I needed to rethink how I made my 404 page. Another one for the list.

That concludes the case for the defense m’lud. One issue I’m particularly keen to know your opinions on, is whether links should be underlined? What do you expect when you see to denote a link? Let me know your thoughts…

Please Note : This has now been updated and moved to its own section here.

Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

(Updated: 21.5.04): Added keylines to show ‘fitting’ and changed the background image to be more obvious. Others have now done their own versions, Tom has created a black & white printer friendly version and Douglas has created an interactive version – great work chaps.

There is now a French translation available here.

Quick tip if you haven’t come across this before. There is an excellent web development extension available for Firefox called Edit CSS. Quite simply, it allows you to view all style sheets for the current page in the sidebar, make edits and see the result as you type. The amount of time this saves is amazing.

A problem with many firefox extensions is that they break in current and mac builds, and this is the case here. The useful option to save the css once edited doesn’t work. Even with this bug, its a worthwhile download.

Update 11.02.04: All thats needed to make Edit CSS work fully, is the jslib extension. Now I can save edited styles, or load new ones. Thanks to John for pointing this out.

Perfect for deciding on that new colour scheme… ;o)

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

First we’ll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway:

<ul id="navlist">
<li><a href="index.html" >Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>

Next we need to add a unique class or id (doesn’t really matter which) to each of the section pages:

<ul id="navlist">
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="products.html" id="prodnav">Products</a></li>
<li><a href="faq.html" id="faqnav">FAQ</a></li>
<li><a href="contact.html" id="connav">contact us</a></li>
</ul>

Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag:

<body id="home">

This allows us to specify the highlighted tab. After we’ve added the CSS styling for the menu, we add the css rules to highlight the correct tab. As all of these instances use the same rules, we can just list them all, seperated by commas, and the browser will apply the rules to every instance. These overrule the previous styles wherever is on the same page as .

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
color: #fff;
background: #930;
}

I’ve set up some basic pages so that you can see the navigation in action. This allows the navigation to be put into an external include file for ease of updating. The ‘decisions’ as to which button or tab to highlight all happens in the CSS file. This can also be used to introduce different coloured sections. Handy if the layout positioning stays similar and all you want to do is change the colour theme.

If you haven’t already, go and read Peter Paul Koch’s article ‘Keep it Simple’ for Digital Web Magazine. I was left speechless, not sure whether this was a spoof or that he really thinks these things.

Basically, his assertion is that ‘CSS Hackers’ are actively spending time creating hacks just to feel superior and to dazzle, deceive and seduce ‘innocent newbies’. Tee hee! Or am I being naivé? Is there really an underlying conspiracy that I’m blissfully unaware of in my ‘happy and poppy’ world?

“Complicated CSS hacks are the modern equivalents of the frames and tables. Their use serves to give the Web author a feeling of mastery”

My feeling is that unlike frames and tables, CSS hacks do not alter the the content, make it inaccessible or difficult to navigate. I see CSS hacks as a real-world solution to the problem of crappy browsers, without changing the markup or content. Sure, I try and avoid hacks wherever possible, but if all I have to is add a 2 line hack to make sure a layout works in IE 5 WIn – I’m jolly well going to do it! I don’t do it to feel masterful, I do it to get something working.

If we follow his recommendations, I fear that CSS design would be left in the basic, boxy world that it has been derided for.

What do you think?

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

• I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
• I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
• It had to show all links ‘flat’ if the user had javascript disabled
• Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
• I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
• I wanted to control the look completely with CSS
• And the moon on a stick please

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Hooray for Netscape DevEdge, where I finally found their Hybrid-CSS JS menus which fulfilled all my needs. Also, through this article I came across another alternative at Brainjar’s. This uses event handlers, but is more flexible with its css and javascript.

I’ve finally finished off my second submission to the CSS Zen Garden, and its been accepted! I’ve been wanting to have another go, and do something more comtemporary, but I really felt the pressure after recent entries. Release One, sub:lime and si6 have all been beautiful examples of slick modern design.

One of the hardest things is coming up with a decent name. I originally wanted to call this one ‘Design Wankery’, but I settled for the more subdued ‘dusk’ instead. You’ll see what I mean.

Rather than sit down and plan this one, I spent a while getting the text in a position I liked, and then added the eye candy around it. It very slowly evolved over the space of a couple of months (whereas my last entry took 2 evenings). In the end I had to draw a line and decide not to tickle it any further. Because the page is marked up with lots of extra tags for flexibility, I had to fight the urge to try and do something ‘clever’ with all of them. That’s just not what the Zen Garden is all about.

Finally- here’s the honesty bit. The layout isn’t perfect in Opera 6. I’ve used overflow:auto to scroll the main text, which means that a height value must be declared. Opera 6 will display all the text without scrollbars, but still assumes that its still as high as you’ve declared it. This means that the links list doesn’t run on and appears on top of the main text.

I’ve just changed the site from being XHTML Transitional to Strict, and I was surprised how little work was involved. What follows is a list of everything that didn’t validate, and had to be changed:

• remove target=”_blank” from <a> tags. Opening new windows breaks the back button anyway, which is an accessibility problem. You can always use a simple javascript to open new windows, which is what I’ve done for the desktops section
• remove border=“0” from <img> tags (use css instead – img {border:0} )
• add <fieldset> tags around form elements. (You can actually use p, h1 etc, to validate, but fieldset makes more sense.
• remove language=“javascript” from javascript tags
• change any remaining name=” “ attributes to id=” “

The last 2 were leftovers from the original Movable Type templates. In a matter of an hour the site was converted. The search and replace function within Movable Type meant I didn’t have to go through every entry individually.

Why bother? Well, apart from a chance to be even more anal, it was education. My reason for creating this site in the first place was to practice and try out new things. While it doesn’t mean I have a thorough understanding of all the nuances of the XHTML strict spec, I know more now than I did a few hours ago. (There may well be the odd entry page that doesn’t validate – let me know if you spot one.)

A recent article at The Web Standards Project alerted designers that ‘Skip Navigation’ links, traditionally hidden with the CSS property display:none, are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which also uses display:none.

If you’ve got a long list of navigation links, skip links give users the option to go straight to the content, useful if you have a textbrowser, PDA or screenreader (doh!). It can be particularly painful to hear a screenreader speak al long list of links before finally getting to the content.

Put ‘em somewhere else

One way around this is to use a layout technique that allows navigation to be placed after the content, removing the need for the link. The Layout Reservoir at Blue Robot has useful examples on how this can be done. Navigation is positioned using position:absolute, which takes it out of the normal flow of the page, allowing it to go anywhere in your HTML. This won’t always be possible of course, and if you do, you’ll need to add a ‘skip to navigation’ link instead!

Hide ‘em

The following workaround was developed by Bob Easton, who wrote the original article on CSS Discuss, and works in the top 3 screenreaders – Jaws 4.51, Window-Eyes 4.5(beta) and IBM Home Page Reader 3.02.

<div class="skiplink"><a href="#content">Skip Navigation</a> </div>
	
.skiplink {

position: absolute;

left: -1000px;

width: 990px;

font-size:1px; line-height:1;

}

As you can see, it places the content off the screen to the left. Bob also added width, font-size and line-height to allow for extra information such as a menu of your accesskeys. The width rule is a failsafe, to make sure that div doesn’t become visible. If your link is a small simple affair, you can remove the width and font attributes. Tom Gilder extends this further , with a clever technique that makes the div visible when a user is tabbing through.

Don’t hide ‘em

However, Joe Clark argues the case for making these links visible. He lists several ways of doing this, and keeping it small, suggesting that just the word ‘skip’ would be acceptable.

The suggestion in my last post was kindly tested by Bob Easton, who wrote the original article on CSS Discuss. It only worked in 2 of the top 3 screenreaders. It works in Jaws 4.51 and IBM Home Page Reader 3.02, but failed in the number 2 – Window-Eyes 4.5(beta). However, Bob suggests the following, which he has tested and does work in all 3:

.hide {
	position: absolute;
	left: -1000px;
	width: 990px;
	font-size:1px; line-height:1;
	}

As you can see, it places the content off the screen to the left. He also added width, font-size and line-height to “allow placing very large blocks of assistive text over there in hidden space”. Great – at least we know of a tested way of working with all 3. Thanks Bob!

Dave Shea offers this more compact version:

.hide {
	position: absolute;
	left: -999px;
	width: 990px;
	}

You can even remove the width if you’ve just got a ‘skip navigation’ link, but Bob’s original suggestion allows you to add more than just a ‘skip navigation’ link, such as a menu of your accesskeys. Tom Gilder extends this further, with a clever technique that makes the div visible when a user is tabbing through.

Bob has also set up a test suite for screen readers, trying 7(!) different solutions in total, including some that were suggested in the comments of the last post. If you have a screenreader, head over and get testing.

I’ve just been reading on The Web Standards Project about the fact that ‘Skip Navigation’ links hidden with the CSS property display:none are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which uses the same property.

Skip Navigation links give users the option to go straight to the content, useful if you use a textbrowser, PDA or screenreader (doh!). One way around this is to use a layout technique that allows navigation to be placed after the content, removing the need for the link. The Layout Reservoir at Blue Robot has useful examples on how this can be done. Navigation is positioned using position:absolute, which takes it out of the normal flow of the page, allowing it to go anywhere in your HTML. This won’t always be possible of course.

Another way is to use a similar technique to Seamus Leahy’s Image Replacement method at CSS Play, which is known to work with screenreaders. If your skip link looks like this:

<div class="hide"><a href="#content">Skip Navigation</a></div>

Then your CSS would look like this:

.hide {
height: 0;
width: 0;
overflow: hidden;
position: absolute; /* for the benefit of IE5 Mac */
}

Like display:none, this won’t take up any ‘physical space’. The only browser I found that had a problem with this was IE5 Mac, but it behaved itself after adding position:absolute to the code.

Please note: This has since been tested in screenreaders, and it isn’t quite up to the job. See the next post.

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing

#horizon {

background-color: transparent;

position: absolute;

top: 50%;

left: 0px;

width: 100%;

margin-top: -200px;

text-align: center;

min-width: 900px; 

}
#wrapper {

margin: 0px auto;

background-color: #fff;

position: relative;

text-align: left;

width: 900px;

height: 380px;

}

I am on holiday – honest. Its great, finally getting plenty of quality time with my family, and not thinking about work. I do like to keep in touch with the blogosphere though, and this week I’m able to use my in-laws broadband connection.

After all my excitement at working out how to do pure image based CSS rollovers, here’s a far better way that doesn’t need images to be preloaded! If you’re prepared to create your images in slightly unusual way, it looks like the way to go! (found on stopdesign).

Also, NetNewsWire 1.04 is out, and //hicksdesign is one of the ‘latest additions’ in the sites drawer. Thanks Brent!

No matter how you try and avoid it, you often get to the point where you need to hide CSS from a particular browser, because of a bug. Its 'not cricket' but they work, and they validate. So rather than being an article as such, what I've done here is gather all the various links for hiding CSS from browsers.

• Opera - Owen Hack
• IE 5 Windows Tantek Celik hack
• Media Type Hack - Hide CSS from all versions of IE up to 6
• IE 5 Mac - commented backslash hack
• IE 5 Mac - alternative hack
• Netscape 4 @import hack
• Star 7 hack - affects Opera 7 amongst others
• Safari - Escape Hack
• Inline high pass filter hack - hides styles from browsers with poor CSS1 support
• CSS Filters - Kevin Smith has put together a huge table of all the hacks, and you can see instantly which browsers it will affect.

Please let me know if you find any more!

Dave Shea recently mentioned some alternatives to Doug Bowmans Image Replacement Trick. Having tried one of these methods, I realised that it would really suit rollovers without the need for javascript. Whereas previously I’d only thought it was possible by A List Apart’s method, this way doesn’t limit you to using only using bitmap fonts. Its purely image based. Apparently, Dave already uses this for the rollovers on Mezzoblue (so I’m not claiming any originality here!)

So to test this out, I’ve added a rollover & homepage link on this sites logo, and an article on how to do image rollovers with CSS. As with all my ‘articles’, please let me know if you have anything add, dispute or change. I don’t pretend to be a CSS expert, but hopefully someone will find it useful.

Here's how a plain text link can be converted into a pure image rollover using only CSS. You can see the result on the site's logo.

If you're not already familiar with 'Fahrner Image Replacement', read Doug Bowman's article on Using Background-Image to Replace Text. This presented a guilt-free way of using images for titles, although it relied on a superfluous <span> tag to hide the actual text. Not really a concern unless you were an absolute XHTML purist. The bigger problem was with JAWS screen readers, that treated text styled with 'display:none' as invisible and skips it.

The Gilder-Pixy Method

The following combines 2 techniques - Tom Gilders text-transform and Pixy's no-preload rollovers. The former uses 'text-indent: -10000em;' to hide the text from view, while the latter changes the position of the background image, rather than loading a seperate image. This means that you have to create an image containing both states, like this. These methods avoid the need to use the Box Model hack, display:none or some convoluted route to preload the rollover state. Its small code, and the rollover is faster. Combining the 2 methods also allows you to use pure images, rather than the text link/background combination (such as A List Apart)

Here's the code that went into the HTML:

<div id="logo">
<a href="/index.php" title="click to go back home">// hicksdesign</a>
</div>

No presentational markup, its just a plain ol' text link. Here's the CSS to go with it:

#logo a {
	text-indent: -1000em;
	background: url(images/logo.png) no-repeat left top;
	width: 64px;
	height: 369px;
	display: block;
	overflow: hidden; /* For nested divs in Safari */
	}

/*  IE 5 hack \*/
#logo a {overflow: hidden;}
/* end hack */ 
	
#logo a:hover {
	background-position: -64px 0px;
}	

There are 2 changes to the original code. The addition of the display: block, as the <a> tag will be treated as an inline element rather than a block and nothing will show up. Also, if the rollover is placed inside an absolutely-positioned nested div, Safari throws up a huge horizontal scroll bar (presumably 1000em wide). The overflow:hidden stops this, but needs to be hidden from IE 5 Mac or else the image won't visible.

Pros and Cons

This method allows you to create image based rollovers, without any need for javascript. Not that javascript is evil, but there are several advantages to using this method:

• Substantially less code.
• Works in IE 5-6 Win/Mac, Opera 7, Mozilla/Firebird/Camino and Safari.
• Users without CSS, or those using a different stylesheet will see the just plain text link.
• Search engines place little importance on <alt> tags, but plain text links are good. I've been told that text styled with display:none doesn't count either, but I can't confirm this.
• Javascript rollovers need an 'onMouseOver' and 'onMouseOut' event adding to the <a> tag. Accessibility validators pick up on this and request that you supply an alternative with <noscript>. A bit of a faff quite frankly.

• If the user has CSS on, but images turned off to improve browsing speed, they'll see nothing. Ooops! Tom has a solution for this which requires an extra span tag.
• One other problem is a bug in Safari, where if you place the rollover in an absolutely positioned DIV the image doesn't revert back when rolling out. Fortunately, I was able to position the logo DIV with margins instead (and decrease the amount of code needed in the process! Sweet!)

Thanks to Tom Gilder and Pixy for creating these methods!

Further Reading:

Dave Shea has written an article on Fahrner Replacement for Digital Web Magazine.

For a long time I'd wanted to achieve a vertical centering effect with CSS that I used to achieve with tables or frames. A fixed size block that floats dead centre in the browser window, no matter what its size. Techniques for horizontal positioning have been known for some time, with the 2 methods described on Blue Robot. Then I found across a piece on Web Page Design for Designers, outlining how to do this. Nirvana! It uses absolute positioning to put find the exact centre point of the window, and then uses negative margins to 'shift it all back halfway', producing the effect. It works, but there are 2 problems with this:

the problems

• As the CSS technique uses absolute positioning with negative margins, if the browser window is smaller than the centered content, it crops it off without giving you scrollbars to access it. I wanted the site to get a long 'panoramic' style, but I also didn't want to exclude users with 800x600 resolution. The fact that some users couldn't even scroll to see content was a big problem.
• In Interner Explorer 5 for Mac, if an XHTML doctype is used instead of HMTL Transitional (as used in the Web Page Design for Designers article), the content gets uncereromoniously pushed off the top of the browser window. While IE5 Mac is being phased out now that development has been stopped, its still the main browser for OS 9 users.

the solutions:

the cut-off content problem

The WPDFD technique uses 2 container divs - #horizon for the vertical and #content for the horizontal. Originally, these 2 divs were needed due to a bug in Opera. While this has since been fixed in version 7, there is another use for the extra container div.

Instead of using absolute positioning to center horizontally, use the auto margin method to centre the second <div> within the first. This is the best way, as it stops trying to centre the content when the window is too small. This still cuts of the the left hand side in Mozilla/Camino/Firebird, but all it needs is a 'min-width' value adding to the containing <div> to stop this.

Here's the new CSS:

#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

The addition of position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats, which makes life easier and accurate. You may not need this however. This solves the problem of content being cut off horizontally.

As for the vertical - you just have to make sure that you specify a height that will fit in your target market's lowest screen resolutions. I used 380px, which should fit in most browsers at 800x600 (once you've allowed for all that browser chrome).

IE5 mac and the commented backslash hack

To solve the IE5 mac problem, you need to use the commented backslash hack. First you add your style rules to work in IE5 mac, then you add your real styles rules, beginning with a backslashed comment and ending with a normal comment. IE 5 Mac ignores everything between the 2 comments, and these override the previous rules, providing the centering effect for all the other browsers:

 
 /* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 }
 
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 }
 /* end IE 5 hack */ 
	  
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

As we've already stated rules like 'position: absolute' in the first set of style rules, we don't need to repeat these, only redefine rules that we want to change. So far I haven't been able to replicate the vertical centering effect, but at least it centres horizontally.