This may be counter-intuitive (like most of the XHTML spec and how it’s implemented), but everything, even the element is treated like an element, and therefore makes it a pain in the arse to make anything height: 100%.
Long story short, if you have a div on your page, and you want it to fill the full vertical height of the screen, the portable way to do that is to do the following:
HTML:
<html>
<head>
<title>Full height</title>
</head>
<body>
<div id=’pageWrapper’>
Those-who-can, do; those-who-can’t write a standard then don’t support it so that those-who-can have to waste their time hacking around these mistakes. This way, those-who-can’t don’t look as bad next to those-who-can’s now more mundane accomplishments.
</div>
</body>
</html>
CSS:
html{
height:100%; /* means 100% of the client window */
}
body{
height: 100%; /* means 100% of the ‘html’ element */
}
#pageWrapper{
height: 100%; /* means 100% of the ‘body’ element… fuckssake*/
display:table;
}
There you have it. You might want to remove my vulgar op-ed comment before putting that in production code. Enjoi.
December 9th, 2007
Last night during a long coding-session, I stumbled upon an old site of mine. It was beautiful. Everything looked exactly how it should to be the most usable, useful, beautiful application possible. This was before I got suckered into divs and validation by the standards-gustapo. I was never given a direct or logical answer from the masses as to why I should be using standards-compliant code when the browsers aren’t standards compliant, and a great deal of things can only be done well in a non-standard way, and a great many more will take hours to be standard and mere seconds to just work. “But everyone is doing it!” I figured that this meant that maybe the people I talked to just didn’t have the low-down, but that there really were advantages and maybe some sort of advantage would come out of all of this wasted time making sure I complied to standards and used the horribly-implemented DIVs with as-poorly-observed CSS instead of the beloved tables of old.
It’s been over a year now, and I still haven’t once said to myself “wow, I’m really glad I made that site valid” for any of my projects. Then it occured to me… there is no payoff coming! Making your code standards-compliant and crossbrowser now isn’t going to help you port to new browsers (since every page out there that is cross-browser now would have to be re-written for a browser that actually works how it is supposed to). This is just the typical human response of trying to create conformity. This isn’t helping fix the problems with browsers, it’s just giving coders another thing to waste their time on. That beautiful page of mine from before used tables anywhere that made sense given what tables do. Now this may not be “semantically optimal”… but divs just don’t work like they’re supposed to. I’ve been using them for a LONG time now and have gotten to know them quite well inside and out. The truth is, their behavior is just so wildly implemented that the same code will do drastically different things in many browsers. ‘Table’ is not the right word for the content many times, but they are a lot closer to working than divs are. Divs just DO NOT FAIL GRACEFULLY which is a major flaw in any programming system. And I’m not just talking about the borders/floating/wrapping issues that we are all familiar with… divs will make your browser act like a jittery crack-addict.
As an example, I’ll mention two bugs off the top of my head (that will probably get their own articles later): the FireFox heuristic machine and the IE ghost-footer.
- In FireFox (yes even 1.5.0.1, etc.), I have a fully valid page on Projectories with a two-columned UL (they wrap automatically… according to standards anyway) and sometimes it will render with randomly-different wrapping. You heard me right… the EXACT SAME HTML will randomly render different ways. So this two-column list will have maybe one item in the first row, 2 in the second, 2 in the third, 1 in the fourth, etc.. There is no reasoning with FireFox on this matter. Another coder and I have revisited this bug many times and have been unable to convince Fox to listen. Thanks Fox, I didn’t need a “computer” anyway… I probably only needed a heuristic machine anyway. Oh I forgot… FireFox is OpenSource so it’s probably my own fault since I haven’t fixed their bug myself, right? My bad.
- In Internet Explorer, there is a page (on an as-yet-unreleased-site) with a simple footer like you’d see on many pages. The main layout of the page is done with divs in a completely-valid cross-browser way. IE 6 and IE 7 however, there is one of the most insane and unacceptable bugs I have ever seen a browser pull. It seriously writes a random sub-string of the footer…. again. Allow me to clarify: the last item in the footer is “Privacy” and the page will sometimes display an extra “y” on a seperate line (also properly linked as if it was the same link as before) and it will sometimes display “vacy”, or “Privacy”, etc.. Now the most obvious thought when seeing this would be “wow, I must have really messed up outputting that footer”. I check though, then I double checked. I rubbed my eyes and triple-checked. I had my co-worker check it, then we stared confused and checked it again. We looked at the source in 2 different browsers (because possibly the “view source” command could be messed up?) and we could come to only one conclusion. IE was written by handicapable children who don’t speak english and have bad eyesight. The source-code NEVER showed these ghost-messages. The source code is very simple at that footer, so it’s not hard to verify. I know this sounds unbelievable, so this will get its own entry sometime with the server and client code, an example page to reproduce it, and screenshots of what was rendered.
It all just got to be too much. I realized that making some standards-crusaders and maybe Tim Berners Lee (whom I now hate) happy, just is not worth the expense of additional features, portability, and design that I could be giving to my users (whom I love). So that’s it. No more mister nice-tool. I’m gonna go make a table. 
December 15th, 2006
I always tended to think that Google was the only site with a page rank of 10. I have a plugin-bar that tells me the PageRank of everypage I go to, and I never noticed another site with the PageRank of 10 other than Google itself. Today, much to my dismay, I was validating a page I was writing, then clicked the logo-link from the W3C to see how atrocious the homepage must be of a group of people who are so clearly out of touch with the needs of anyone who has ever written a legitimate webpage.
Whilst basking in some much-needed and rather satisfactory scoffing at their rediculously ugly page, my joy was abruptly cut short by my plugin informing me that the W3C site did, in fact, have a PageRank of 10. This wounded me deep.
I’m going to go hang myself and 1,000 random people who witnessed the W3C site.
December 15th, 2006
i know i haven’t written about CSS in a while… we’ll get to that (chill, i’m currently fighting with Sean from this site over some medical problemz he’s blamed on me…
anyway…. I’M IN A MOVIE!!!11! Snakes on a Plane is my first big roll in a while… oh wait, didn’t i mean role?
nope. B-)
check me out, i’m sexy.
- Dew
August 19th, 2006
I have several blogs, all with different topics. One of the reasons I haven\’t been updating them enough to meet my satisfaction is that there is some overlap in the subject-matter, and I am often confused on where to post to.
I decided recently that I should start burning through my list of articles to write, and to help this along, I wrote a cross-blog posting system. It\’s pretty nifty because it posts to a WordPress v1.5, WordPress v2.0.3, and my own custom blogging system that I wrote for Codeaholics.
My personal site will generally serve as the aggregator and (probably) get every article, along with links out to each of the blogs where the article was posted.
Here is a breakdown of the different blogs and what they cover:
- SeanColombo.com - the aggregate of all posts. This is my life as a whole, so it will have every article, and will have little icons indicating which blogs the article was posted to.
- Motive Blog - productivity and the glory of man! Basically this blog will exhalt all the things that Motive Force LLC stands for, and pretty much ignore the rest.
- iHateCSS.org - general griping about numerous, poorly implemented web-languages/standards and tips on how to survive them. Since it’s made partially as an emotional outlet for the frustrations of coders who have been portability-hacking their code for hours, the tone is fairly informal.
- Codeaholics Code blog- programming / hacking / general caffeination.
- Codeaholics News - where the code-blog is less-pinnacle code-related stuff, the News blog is just for announcements (eg: when coding projects get started/released, etc.).
June 14th, 2006
Leave it ugly.
I just released another site today. Much like ChuckNorirsIsGod.com, but instead of Chuck Norris Facts, these are Jack Bauer Facts!
Check out JackBauerIsGod.com for the facts. The reason I’m writing about it here, is that it’s valid XHTML 1.0 Strict and CSS. Yay, what an accomplishment! Aren’t I supposed to get something for that? A medal? Better page rank?? Probably not.
Anywho, although I make things valid on my sites these days just to be a good citizen, it can be seen that the easiest way to make a valid site is to make one where the layout is really basic and off-by-one pixel errors don’t matter. Jack Bauer is God is such a basic layout that validation was little more than adding that extra / on the end of br and img tags.
Despite all of the evangelism for these darn standards, since they’re not _actually implemented_ correctly by any browser, or consistently across all of them… I really feel guilty for bashing invalid sites (unless they are competitors ;)).
- Sean
April 12th, 2006
alright people, i just spent 3 hours centering a solitary div… granted there were some mixed form elements and images causing it to be completely retarded, really how hard is it to center one fucking thing. fox and opera complied pretty quickly, but then theirs the beast of ie… let me tell you one thing w3c float: center, horizontal-align: center, center: center throw me a frickin bone… now i usually use either margin-left: auto, margin-right: auto and/or text-align: center to do my dirty business in centering, but for whatever reason ie decided it didn’t want to play nice at 5am and wanted me to stay up until 8, thanks mr. bill, i appreciate that, i dont’ have class tomorrow, anyway if anyone has any other ideas on centering you can post up a comment, i’m too embarrassed to post my solution here, but lets just say at one point my css read “right: left”, and for some reason the validators didn’t like it… go figure!
Dew
Total Hours Wasted: 3
March 23rd, 2006
We have created this site as a tribute (sic) and guide to the web styling language CSS. This is the place where people can come together and help each other with the pain that is coding for multiple web browsers in a language that is not fully or correctly supported in any of them. We will provide helpful tips we learn, and tools we create throughout our web-coding endeavors. We are planning on going into great detail regarding AJAX and javascript in addition and conjunction with CSS as well. Join us as we strive to make web-coding a little less painful for everyone and make this site a great resource for anyone who codes webpages Thanks for reading!
Geoff
March 23rd, 2006
