Archive for the ‘Web Design’ Category

Designing and Coding a Mobile Version of your Website

I wrote a 3 part series on designing and coding up a mobile version of a website over on my other blog.

• Part 1 covers essential mobile web design considerations
• Part 2 shows how to code a mobile site using XHTML Basic
• Part 3 does it again but for Wordpress and creating a mobile template in your theme

It also covers how to redirect mobile users from your non-mobile site to your mobile version.

Posted in Web Design | No Comments »

Updated CSS Sticky Footer for 2010 - Works in IE8

I finally updated my sticky footer solution! Yay! It now works in Internet Exploder 8 and is working better in Opera. It no longer uses a clearfix hack, overflow:auto does the trick instead.

My old post for the original version has gotten nearly 300 comments so far. Clearly my most popular post on this blog. I am however considering turning comments off for that post. eeek! I get so many requests for help from those having problems getting it to work and I just don’t have the time to reply to them all.

A big thank you goes to Paul O’Brian who offered suggestions that led to this updated version, and as well he has picked up a LOT of my slack in helping out people in the comments section.

The cssstickyfooter.com website has been featured a few times in places like Smashing Magazine and other major web design resources. Each time it does I get a big spikes in traffic for a few days directly from those articles as well as a ton of Twitter retweets and Stumble Upon stumbles. The server is bracing for the next round that is sure to come.

Posted in Web Design | 6 Comments »

Centering a Div in IE8 Using margin:auto

On the count of 3 everybody scream “MICROSOFT SUCKS AND I HATE INTERNET EXPLODER”.

1, 2, 3, go.

I’ve been working on revamping my Sticky Footer code for IE8 compatibility when I ran into a little bug of sorts. If you are using margin:0 auto; to center a div it will cause problems in IE8 if the parent element has either no width already set, or you’ve not set text alignment to center for that parent div, or you are using the wrong doc type declaration.

These are the three fixes I know of;

Width:100%

Set your containing element to width:100%; so then your centered div inside of that one will actually center. Like this;

#container {width:100%;}
#centered {width:400px; margin:0 auto;}

Text-Align:Center

If you apply text-align:center to the containing div IE8 will obey the margin:auto. You then have to un-center your text content inside that centered div with text-align:left. Kind of convoluted, I know. Apparently some web designer have been doing it like that for years as this was an issue with IE5.

#container {text-align:center;}
#centered {width:400px; margin:0 auto;text-align:left;}

Use Transitional Doc Type

If you are using XHTML 1.0 Strict as your doc type, IE8 will not obey the margin:auto method for centering an element, unless you use one of the above hacks. You can also just change your doc type declaration at the top of your page to be XHTML 1.0 Transitional. IE8 will then obey the margin:auto statement.

Here’s a link to doc type declaration syntax.

Oh the joys of cross browser web design.

Posted in Web Design | 5 Comments »

A CSS Sticky Footer that Works in 2009 (Chrome too)

UPDATE: This sticky footer solution has been updated since the launch of Internet Exploder 8. More recent blog post about it is here. Most the typical problems some people encounter are the same and many have been discussed in the comments below on this post. If you are having problems there is a good chance you’ll find your solution below from someone else who ran into similar issues.

For those that don’t know a sticky footer is a footer that sticks to the bottom of the browser window when the content area is too short to push it down on its own. Having a footer float part way up the page can look like poor design on some sites.

A working solution that actually makes the footer stick to the bottom of the page can be found here.

(more…)

Posted in Web Design | 321 Comments »

Freshly Minted Client Website

I just finished up a great new website for Tod Mountain Ranch in British Columbia. They are a guest ranch offering horse riding vacations. The lodge and cabins are still under construction and are set to open this coming spring in 2009.

(more…)

Posted in Web Design | 1 Comment »