Or, Spend Your UI Development Money Wisely.
I’m a generally contractor, I work for a lot of client’s and I’m interested in making money (who isn’t) and I want to spend as little of my money in the process of making more money, so I can maximise my profit! That is probably true for you as well. So my adventures in CSS have made me realise that for my purposes, I can’t get away with “pure” css, I will have to be bad and use tables, at least on some things.
If you are a business person who is paying a developer to create a webUI, then you have to consider what browsers you are going to support. If you are doing an intranet, where you control the browsers available on your employee machines, or you are willing to only offer your web app to a percentage of all available clients, then I say, do pure CSS. Let your developer take the time to do it right (as long as they follow some guidelines for next year when you need to make changes and they aren’t available and you need to get someone else to modify things) and layout your web the “correct” way.
If however you are unwilling to either forgo getting the dollar of the IE 6 and IE 7 user, or like me, you want to at least have your public web site give a good first impression to prospective clients investigating you, then my business recommendation is DON’T let your web designer insist on nothing but pure CSS formatting. From a business prospective you don’t want to waste your development dollars with your programmers spending time figuring out how to hack a presentation that looks great in FireFox so it looks good in IE 7 and 6. If they can do the positioning layout with no hacks, then by all means do it “correctly”, but if like me you have to watch your cash out flow, then you need to put down a firm foot and tell them “Use Tables, No Hacks”.
Yes I admit that is giving into Microsoft’s previously bad record in WC3 compliance, but as a business decision, that makes no difference, remember that in the end that extra money you just spent didn’t cost Microsoft anything, and it won’t make you any extra money; Because let’s face it a potential client doesn’t look at the source of your html page and decide that “oh my god, they used tables to format their home page where CSS doesn’t work correctly in IE6 so I’m not going to give them any business!” Or if they do, I promise you the losses you take from that type of purist won’t be nearly as big of a hit you take if a potential client comes to your web-page and it looks “wrong”. No one hires a person to pimp a car if their own car looks like a wreck.
Your Web Designer is going to fight you on this, saying that tables are a “hack” (ask him why a table hack is worse then a IE specific CSS hack). But it’s a matter of money, faster development means less spending.
Now that doesn’t mean you should skip CSS, tables should only be used where CSS doesn’t work in IE 6 and 7 and even than they should probably be putting the tables in a <div>. After much work, I couldn’t get this blogs top appearance to be correct using pure CSS (not even with IE hacks) and so in the end after two days I took JUST the section that was causing me problems and I put it in a table. that took me 15 minutes. Now I was trying to learn this stuff (including the hacks) so it was worth it to me to try, but if I were consulting for a client I couldn’t in good conscience tell them to take 3 days trying CSS and testing for cross browser compatibility, for what can be done in less then 30 minutes using tables.
Now if I didn’t have to worry about losing IE 6 and 7 customers here is the correct way to do my page topping
1: <div class="menutop">
2: <ul>
3: <li>Home</li>
4: <li>Contact</li>
5: <li>Sign In</li>
6: </ul>
7: </div>
8: <div class="header">
9: <div class="headerleft">
10: <img alt="Logo" src="LongCloudLogo.jpg" />
11: </div>
12: <div class="headerright">
13: <img alt="HeaderGraphic" src="mainpic_new.jpg" />
14: <div class="blogmotto">
15: "... A Yankee in the Land of The Long White Cloud, Aotearoa ..."
16: </div>
17: </div>
18: </div>
and here is the css
1: .menutop { 2: text-align: right;
3: }
4: .menutop LI { 5: list-style-type: none;
6: display: inline;
7: }
8: .header { 9: vertical-align: middle;
10: display: table;
11: width: 100%;
12: }
13: .headerleft { 14: display: table-cell;
15: vertical-align: middle;
16: width: 358px;
17: }
18: .headerright{ 19: float:right;
20: width: 100%; display: table-cell;
21: text-align: center;
22: }
23: .blogmotto { 24: text-align: left;
25: width: 500px;
26: }
Click here to see it in action
Now here is how I ACTUALLY did it to make it look good to everyone.
1: <div class="menutop">
2: <ul>
3: <li>Home</li>
4: <li>Contact</li>
5: <li>Sign In</li>
6: </ul>
7: </div>
8: <div class="header">
9: <table style="width:100%">
10: <tr>
11: <td style="width: 365px">
12: <img alt="Logo" src="LongCloudLogo.jpg" />
13: </td>
14: <td align="center">
15: <img alt="HeaderGraphic" src="mainpic_new.jpg" />
16: <table style="width:950px;">
17: <tr>
18: <td align="left" >
19: "... A Yankee in the Land of The Long White Cloud, Aotearoa ..."
20: </td>
21: </tr>
22: </table>
23: </td>
24: </tr>
25: </table>
26: </div>
and here is the simplified CSS
1: .menutop { 2: text-align: right;
3: }
4: .menutop LI { 5: list-style-type: none;
6: display: inline;
7: }
8: .header { 9: vertical-align: middle;
10: display: table;
11: width: 100%;
12: }
So here is my blog page topper working the same way for everyone else (and in fact it does one thing in IE 6 and 7 that I STILL haven’t determined how to do in a standards compliant browser)
