A bug for anyone needing ie7 compatible forms using a min-width on the buttons. This also affects ie8 running in compatibility mode.

input.submitbutton
{
min-width: 100px;
}

If you are using a min-width for your form submit buttons then sadly ie7 will align button text to the right of the button. It is un-fixable with just css and the only pure solution is to remove the min-width and either use width:auto; or use width:123px;

input.submitbutton
{
width: 100px;
}

If however you don’t mind using javascript you can try using the ie7-js which uses javascript to bring any ie browser less than ie8/ie9 to work as the latest one. You can read more about ie7-js on google code: http://code.google.com/p/ie7-js/

As a bonus this can also fix any transparent png issues found in ie6!

Have you ever had a page that needed styles applying to certain elements again and again (and again) in some sort of pattern. The finished page could have no js either. I just had a long page of tables that the 3rd column had to be formatted differently and it was a pain so I needed a way around the problem.

Write a quick bit of jQuery to apply to to the page and preview it in the browser. Then using firebug (firefox plugin), cmd/right click the document root element and click “copy HTML”. Just paste that into a new file and you now have the static HTML which the jQuery applied the styles to. Just remember to delete the jQuery code from the new doc and you are done.

This example adds the class “value” to all the third “td” elements in the document:

$(document).ready(function() {

var str = “:nth-child(3n)”;
$(“tr td” + str).addClass(‘value’);
        
});

Resources:
http://api.jquery.com/nth-child-selector/
http://stackoverflow.com/questions/2184862/saving-the-manipulated-dom-html-after-editing-it-with-firebug

EDIT: New links added 25-01-2010

So you have probably been hearing a lot about HTML5 and CSS3 on the internet in the recent months and weeks. What are they? What’s the deal with them? Why are they important and should I be doing anything yet?.. are a few questions you might have. I have been reading articles and saving links for a few months now so I thought I better share all the goodies with everyone else and hopefully you will be able to answer most if not all of your questions. I have tried to categorize as best I can but there is some overlap! Enjoy!

BOTH

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

HTML 5

What is supported where
http://a.deveria.com/caniuse/

HTML5 feature sand usage
http://diveintohtml5.org/

A Cheat sheet for html 5
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

HTML5 sites now!
http://seogadget.co.uk/html5-examples-in-the-wild/

HTML5 Tutorials
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
http://html5tutorial.net/

CSS 3

General CSS 3
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/
http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
http://www.exforsys.com/tutorials/css3.html

CSS3 Visual effects
http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/

CSS3 layout
http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

CSS3 backgrounds
http://designshack.co.uk/tutorials/introduction-to-css3-part-6-backgrounds

CSS3 User interfaces
http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface
http://www.zurb.com/playground/css3-polaroids

CSS 3 text effects
http://designshack.co.uk/tutorials/introduction-to-css3-part-3-text-effects

CSS 3 Borders
http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

CSS 3 for ie6+
http://www.keithclark.co.uk/labs/ie-css3/

As always if you have some great links you have found yourself or you have an article about this then drop a comment and I will update the post.

Having learnt about menu’s using lists recently, I have decided to share because I’m nice! Yeah you have probably seen it before in many places and yeah I am waaaaaaaay behing the curve finding out about it but since I’m pretty sure I’m not last it might help someone else! It’s pretty simple really. Once you make a few different menus and see what happens and you will soon get the hang of it…

First start with a list. I am assuming the menu will be in a div called “nav”. It’s not necessary but if you have other lists then you might end up screwing them up. If its not called nav then just drop the #nav or change it to be relevant to your div’s name.\

[code lang="html"]

The tags in question are META tags. They are the bits of code that sit in between the <HEAD> </HEAD> tags and tell search engines whats in a page (except google which actually reads a pages text content).

Meta data should be put just after the <TITLE> tags in the <HEAD>. It tales the format <META name=”the catagory” content=”the information”>. The name is usually one of 4 types – “description”, “resource-type”, “keywords” or “distribution”. The information depends on the name. I will briefly cover the two that are most important for a search engine: “description” and “keywords”.

The “keywords” are a list of main topics covered by the page in question. This blog has the keywords “photoshop, illustrator, dreamweaver, Hints, Tips, Techniques, Carl Topham” since thats the main list that covers it. Separate each keyword with a comma (and space). Keywords can be two words so “Carl Topham” is counted as one keyword. Try to keep the keywords restricted to less than about 250 characters as some search engines actually reduce page ranking if you use too many.

The “description” is just that. It’s a more people friendly description of your page. Try to sumarise in 2-3 sentences. Some search engines use it but its usually just the bit shown under your link in the search engine.

You should end up with code that looks like:

To add it to your page just open your page in notepad, dreamweaver (code view) or web based editor and paste it after the title so it looks like this:

Save and upload to your server.

If you are using wordpress the you need to login and goto “presentation > theme editor” and choose “header” on the page list on the right. Then paste it on a new line after the <TITLE> tags same as in any other editor. “Update file” and your done. Now wondering search engine spiders and robots should add you with the relevent tags.