How to fix floated images and list overlap
The other day I was looking at my blog and saw that one of the posts had a left floated image followed by a bulleted list. The problem was that the list was not indenting properly the way it did when next to a paragraph without a floated element. After a bit of searching and hair pulling I found a discussion that solved my problem.
15 Awesome web design & development sites you should know about
This is a small list of invaluable websites I use to further my knowledge of everything web and to help out with inspiration, tools, resources and tutorials. It’s a list not aimed at any one facet of web design and development, but the many facets and processes that make a website possible.
It is becoming more and more important to at least have a basic understanding of all the information that goes into making a fantastic website. Knowing limitations and pushing those limits makes web design and development fun, interesting, and challenging. If you work in this field you probably already know that web work is all about constantly learning new technologies, tools, tips and tricks.
CSS tip, declare your font family once
Here’s a CSS tip that I wish more people would follow. When setting up a font on your site, say Verdana, there is no reason to declare it on every H tag, P tag and class you are using. Throw it up in the body and be done with it. The same goes for font sizes, colours and anything else that will be uniform across the site. Once you have done this you can override it for specific tags and classes when you need too.
body {
font-family:Verdana, Arial, sans-serif;
font-size:12px;
margin:0;
line-height:130%;
color:#333333;
}
This will make your life easier and everyone else who has to work with your files will thank you. I think we should always be looking for ways to make our CSS smaller, cleaner and easier to read.
Space below images in Firefox and email newsletters
One thing that is consistently presented to me by other web designers and users is space below images and usually in Firefox, but it can also happen in email newsletters. You will usually notice it when you need images to vertically butt up against each other. This results in a white line or whatever the background colour is set too appearing between two vertically stacked images. Fear not, the fix is extremely easy and you have two good options.
Facebook Development: breaking the application canvas with iFrames
I recently started developing an application on Facebook. It’s actually quite interesting although the Facebook developer interface leaves a lot to be desired. If a chat program operated the way Facebook does it would go something like this. To add a user you must first add the addUser application. Once this is completed you can add the first use through the addUser applications, but after that you must go to the first added user to add an additional user, it’s really a… but I digress. This post is about Facebook’s application canvas and specifically developing applications with the iframe option enabled.
Outlook 2007, inline styles, and links
I recently discovered yet another weird Outlook 2007 bug with email newsletters. Every web designer has probably gone through the nightmare of Internet Explorer and then tried to explain to non-web people why it just plain sucks. Outlook 2007 raises the bar to a whole new level of awfulness, but enough with the ranting.
Internet Explorer 6 and redirected anchor links
Why are my are my anchor links not working in IE6?
As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.
Gravatars, what are they and how do I get one?
A few days ago I added Gravatar functionality to my blog. A Gravatar is a unique picture or icon of yourself which is stored online and globally accessible by blogs that implement Gravatar, or globally recognized avatar. When you post or comment to Gravatar enabled blogs your own avatar will show up on that blog if you have signed up for one on the Gravatar site. It’s a nice way of making your posts more unique and personalized.
Free WordPress theme – Deep Red
I finally got around to releasing my old WordPress theme Deep Red. Anyone can download it and use it. I have included the PSD file so you can tweak it, change it, or do whatever you like. You will also find all the slices in the Photoshop file.
This theme also uses Alex King’s popularity contest plugin. You can see it in the screenshot below on the sidebar; it tracks your most popular posts and displays them on the front page. You do not need to add this plugin to use the theme as there is a function check in the theme that will omit that section if you do not have the plugin activated.
If you like it, flip me an email so I can see how you have used it.
Download WordPress theme and PSD file.
Using WordPress custom fields for toggling plugins
More and more I find myself using WordPress as a CMS. This requires a little more customization than you would need for the average out of the box blog experience but WordPress can make a wonderful little CMS. Custom fields are just one way to gain finer control over your pages and posts both for blog or CMS functionality.
