Archive for the ‘Web Design’ Category

Centering a Div in IE9 Using margin:auto

Almost 2 years ago I after Internet Exploder 8 was released I wrote a post about how to get divs to center properly when using margin:auto in your CSS. Now with the release of IE9 - yet another piece of shit MS browser - I’ve encountered similar issues with getting it to obey centering styles.

For IE8 there were 3 different methods that could be used to make it work;

• Set Width:100% on the containing element
• Set Text-Align:Center on the containing element
• Use Transitional Doc Type

With IE9 the use of the Transitional Doc Type is now obsolete, at least for me as I’m building in HTML5 now. Maybe it still works if you use the Transitional, I don’t know. Nor do I care, so I wont bother testing it. If someone tries it please leave a note in the comments as to whether or not that works.

In my testing the text-align center trick is not working for IE9 - so that’s off the table too. Good, this was a dumb hack anyways. Having to set a broader element with centered text alignment then every other element inside it would need to be reset to left alignment - makes for bloated CSS files.

Solution : Set Width:100% on the Containing Element

So the fix is to set your containing element, the one the centered element is to be centered within, to have a width of 100%. That will get that pesky div to center in Internet Explorer 9.

For example, if your were building a fixed width centered web page that was to be 1024 pixels wide you could set the body to width:100% then set your wrapper div or what have you to width:1024px and then center it with margin:0 auto. So your CSS might look like this;

body {width:100%}
#wrapper {width:1024px;margin:0 auto}

The one extra rule of width:100% does not add much bloat, though it should not be necessary if the asshats on the Internet Exploder dev team could ever get their act together and build a browser that renders as well as FireFox, Chrome, Safari or Opera.

Posted in Other Stuff, Web Design | 1 Comment »

Playing with HTML5 for First Time

I dabbled with HTML 5 for the first time last week. Built a small website for a Pool Cleaning company in Fort Worth, TX and decide to try using HTML5.

Me likey! Just scratching the basics, not doing any fancy geo-location stuff or anything.

Note, to make the new elements like header, footer, aside, section, article, etc… compatible for Internet Exploder all you need to do is include this HTML5 java script enabler.

On another site I built later for this painter in Kelowna, BC I had forgotten to include that piece of java script. Revealed the finished site to the owner, having failed to do all my cross browser checking, only to realize they were looking at it in IE8 and it was totally broken since it did not recognize nav tags. And with a huge number of people still on IE 8 and IE7, that java shiv is essential.

Appears my CSS Sticky Footer solution also works just fine with HTML5.

Posted in Web Design | No Comments »

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.

And here are a few mobile sites I’ve done for clients lately; a car detailing shop in Vancouver, BC, and another auto detailer in Calgary, a Psychotherapist in NYC, a security alarm company in Shreveport, Louisiana, a lawyer in Los Angeles (that one is done in Wordpress) and a few more still in the works.

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 | 14 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.

note: Newer post has solutions for centering in IE9

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 | 15 Comments »