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!

Over the weekend you may have noticed my site being down, then up, then down again and now finally back up.

There was a hosting issue with my old hosts that was thankfully resolved by moving to the wonderful Media Temple. I have been using Media Temple for a few other sites for a while now and I was planning on moving this site over in the next month or two but the hosting issues forced my hand. Apart from being really flexible & customisable, they also offer more features than my last hosts so it’s all good. If you are interested in having your hosting with Media Temple then please check them out via my referral link http://www.mediatemple.net/go/order/?refdom=thehipshooter.com

The referral site thehipshooter.com, is a photography site I am in the process of designing and building between other work. Watch this space for more info.

Links:
http://www.mediatemple.net/go/order/?refdom=thehipshooter.com

Since i have been working on quite a few web projects in the last few weeks a question has popped up. Let me explain… Here is the situation.
Lots of the websites I make have similar features and I have been using the “snippets” tool bar to save the common ones for re-use, i.e. list menus CSS and HTML as 2 snippets to drop into a CSS doc and a HTML doc respectively and I have a basic formatted list quickly and easily. However some of my lists have graphic elements such as background and these are stored in an image folder.
My question/wondering is:
Is it possible to make a code element into a “module” (that’s what I’m calling it for now) where when I add the module it copies the relevant graphic resources across (and drops the code in where needed, not essential though as I can use snippets for that). Mainly is it possible to have a snippet equivalent which drops resources into folders for your site? Maybe from a main repository?

Does this feature exist or do you have a similar situation that you resolved? Please let me know.
Thanks

-EDIT I have figured it out! The answer extensions! Once I figure them out I will share

Theres no need for paper notes any more! An aide-memoire in the form of a small wiki site will note down all the information I learn during coding and programming and the problems I solve for future reference. For the moment the wiki-memoire will be for coding and programming only. Any design information, techniques and tutorials will remain here in theblog.

With the wiki-memoire acting as a reference site that can be accessed to find the right CSS selector or a piece of PHP code etc. it will no longer be necessary to spend hours crawling the internet for the solution to a problem I have solved once before but forgot to bookmark, or search my pages of notepads for a snippet of code I have used before, it will all be in one place. Initially I will be the only contributor and the site and it will take a while to build up a significant amount of useful information but every time I code I learn so little by little the content will grow.

http://www.carl-topham.com/wiki

When making an image it is often necessary to use images as backgrounds or parts of images as textures. Since I am not loaded I have to find the cheap ways to get them. The best way to get some images is to go out and about and take photos of everything. The draw back to this is that you might not be able to get images of certain places and things since they will be half a world away.

I can’t pop out and get a nice picture of a rain forest or a new York skyscraper. I certainly can’t get images of the arctic or the dark side of the moon. Sure I could go and pay for someone to go and take pictures for me but like I said I am poor. I could also search google images for pictures to use but most results will be copyrighted images and you could end up getting into complicated legal issues.

Free free free

This is what you need royalty free images for. There are whole galleries of images for you to route through and use. Here is a short list of useful sites to start you off*

http://www.shutterstock.com/
http://www.dreamstime.com/
http://creative.gettyimages.com/source/frontdoor/DefaultRfLanding.aspx
http://www.jupiterimages.com/rfimages.aspx
http://www.fotosearch.co.uk/

Most of the above also have photographs and images for sale too if your wallet is full of the dollars

Sell sell sell

If you have lots of images that you think you want to share then you can try selling them too.

http://www.dreamstime.com/
http://www.shutterpoint.com/Home-Photographer.cfm

*make sure you read the terms and conditions of free-ness as some images are not free for commercially use.

Any product or graphic you produce will probably need some form of type on it. You might think all you need to do is choose a font and type away. Wrong! Well 99% of the time anyway. Whether its a simple tag line or a paragraph of information you have to consider two things. Fonts and Typography. There are a few rules you need to follow to make things look great and not just good.

Grammar

You need to punctuate sentences properly. That means using the correct number of punctuation marks!!!… Only using one space after a full stop or comma, capitalising the right letters and using dashes and hyphens correctly. Spelling+ is also a crucial part of using fonts. The only exceptions to any of these rules are when you are trying to design something that is meant to have the gramatical errors. In general thought it is better to stick to the rules unless you absolutly feel you have to break them.

Font

Once you have your words all sorted out you need to get the right font for your work. Here are a few tips to help you get it right.

1. Don’t use to many fonts unless you absolutly have to. 3 – 4 is the general max. Use less fonts on short documents but on long documents try not to use more than 3 – 4.

2. Keep similar fonts for similar parts (titles, headings, body etc)

3. If you are producing something that needs to be read try to use legible and clear fonts. You can break this if you are just making things with no content that look “cool”.

4. Keep headlines clear of text bodys so a clear divide can be made for each section.

5. Keep font sizes readable. size 6 font may look good on your huge high resolution monitor but think about your audience. If they can’t read it the there is no point.

6. Make sure the headings and body fonts work well together.

Get started

The more fonts you have the more chance you have of having the best font for the job so here are a few places to begin looking.

fonts to pay for
http://www.fonts.com/

http://www.linotype.com/

http://www.fontshop.com/
http://www.altemus.com/

free range fonts*
http://www.dafont.com/
http://www.free-fonts.com/
http://www.fontfreak.com/
http://simplythebest.net/fonts/

http://www.1001fonts.com/

http://www.dingbatdepot.com/

+ Any spelling mistakes, punctuation errors etc in this article are of course deliberate to emphasise my point!!!

* These may have commercial usage restrictions