If you’re looking for a quick and easy way to do pure CSS zebra striping the following code snippet will alternate row colours for you in browsers that support CSS3.

tbody tr:nth-child(odd){
    background-color:#ddd;
    }

I’ve been creating a fluid layout design with some nested data tables in and needed some of my columns to line up. No problem at all in Firefox and Safari but IE7 didn’t want to play nicely – I tried width=, style= and class= but IE ignored it all.

After a bit of Googling I found http://vinhboy.com/blog/2009/02/13/ie7-table-width/

Basically, you just need to put…

table{ table-layout:fixed; }

…in your stylesheet and IE will start listening to your width declarations.

I’m a heavy user of subversion (SVN) for version control and sometimes when I start a new project I begin by copying the structure of an older one.

As everything is under version control I need to then delete all the .svn files from every folder in that project so that I can start afresh.

To do that I use the command:

find . -name ".svn" -exec rm -rf {} \;

It then looks through every folder and removes any folder or file called .svn

So, you want to override the browser’s default selected text colour? A simple bit of CSS will allow you to change it in most modern browsers (Firefox, Safari, Opera) while not causing any problems for users with IE.

p::selection{ background:#000; color:#fff; }


You’ll see I’ve changed the colour of the text there as well so that it is still legible when the background is black.

I probably don’t need to point out that you can, of course, apply this to any text element and have different colours for headings, links, etc.

Today I had a client that wanted to remove the dotted borders that appeared around the anchors on her site when she clicked on them. At first I had no idea what she meant as I’m so used to them but she was insistent.

Luckily there’s a nice easy way to hide the border (or ‘outline’):


a:hover, a:active, a:focus, a:active{
outline: none;
-moz-outline-style: none;
}


The second line there just targets older versions of Firefox.

Want to get rid of the toolbar that appears when you hover over an image in Internet Explorer 6? You can hide it on a site-wide or image-by-image basis as follows.

To hide it across your entire site, simply add this line to your header:

To hide it on each image:

Conversely, if you’ve turned it off in the header and want to display the toolbar buttons on just one image you can do:

Today I encountered an issue with a menu that was based on an unordered list (UL) where all of my floated list items were displaying 100% wide and then dropping a line. They should have been sitting next to each other, with each LI the size of the text it contained.

My code was:


#header ul{
float:left;
width:740px;
height:26px;
list-style-type:none;
}
#header ul li{
float:left;
height:26px;
}
#header ul li a{
display:block;
height:26px;
}


I use this structure all the time and so was surprised that today it had decided not to work. After fiddling with it for a while I made my anchor float and suddenly everything started working .


#header ul li a{
float:left;
display:block;
height:26px;
}


Using conditional comments to target the various Internet Explorer versions can be a great help but even they have their own bugs.

Recently, a conditional comment I was using to specify an IE specific stylesheet started coming out in the body of the page. The code was in the header but somehow the comment was being printed out on the page.

It all came down to a missing space in the comment. I was using:

<!--[if lte IE7]><link rel="......./><[endif]-->

When I should have been using:

<!--[if lte IE 7]><link rel="......./><[endif]-->

(note the space between IE and 7).

Might not be an obvious one for people approaching CSS from a design background rather than a programming one.

The browser will not pick up your styles if your element’s class or ID starts with a number.

If you’re wondering why the browser is ignoring the styles you’ve set, that might be why!

The same goes for hyphens and underscores, the only non-alphanumeric characters allowed in classes and IDs. The CSS spec states that hyphens and underscores should only be used for vendor-specific extensions (for example, if you’ve ever seen -moz-attribute used).

Came across a problem today that meant I needed to select all elements that had two particular classes.

I needed to apply my styles to any element with class=”className className2″.  This is easily done by using:

className.className2{ styles }

Fortunately this was for an intranet project, as IE6 and lower do not support selecting like this. I believe they will only read the last part and apply the styles to className2.