An effort in futility, CSS vertical alignment
A little over a year ago I would have never considered using CSS for positioning. In my mind it always produced unexpected results when viewed in different browsers. After a bit of pushing and enlightenment from Randy and Steve H., I've been warming up to the idea.
A recent project seemed like a strong candidate for the use of semantic markup and CSS. This was a departure from my world of certainty, where tables were used to create structure. However, just knowing (X)HTML and CSS wasn't enough. Based on someone's recommendation, I bought two books by Dan Cederholm. While a worthy investment and a very informative read it still left me with some questions.
The books served as excellent models for the use of semantic markup and the separation of design and content. The only disconcerting thing was reading this in Web Standards Solutions:
What happen? Somebody sent up us the bomb. In other words, this was the last thing I wanted to read. Where is my knight in shining armor, my holy grail? The CSS can conquer anything, let me show you how attitude. I have to hand it to the guy, he didn't just say that it's better to forego certain formatting for the sake of reserving tables only for tabular data.
This leads to me to the issue of trying to overcome the problem of replicating certain levels of formatting, traditionally only achieved through the use of tables. Foremost, and probably the only unsolved issue is vertical alignment. Yes, I know there is an element for it, but it's not recognized in IE, so STFU K THNX. It's disgusting how many sites promote CSS hacks as a solution for this. How can someone tell me that a situation where a hack has to be used is more acceptable then using equivalent, compliant HTML.
It seems that my options are to:
I can't use option 1, it wouldn't render in 90% of the browsers out there (e.g. IE). Option 2 seems like the way to go, except that it doesn't guarantee anything, and still fowls up (e.g. Mac IE). 3 is appealing, and would produce consistent results in just about every single browser out there, however it defeats the purpose of separating style from markup, and there is always someone out there looking to take you to task for it. 4 isn't acceptable, there is no place for telling a client that they can't have something in the middle of a page or element because CSS won't do it.
My choice, a combination of the above. I'd really love to say screw it and use a table. It does exactly what I want, in arguably a lot less code. With an IE hack and Opera fix, the CSS becomes far more complex, and it still won't work 100% of the time. In the case of putting the main page content dead center in the screen, I'd have to say I'd certainly use a table now. Thankfully I'm not faced with that decision. What I'm working on now calls for a string of text to be vertically aligned in a parent element of known height. The string can occupy one or more lines, which makes it a little more complex. My choice here, fake it. It appears to be the only viable solution aside from breaking down and using tables. It was actually the solution that Randy proposed about a week ago.
It's annoying to use a compromise. I bet secretly a lot of other developers feel the same way and that's why there is so little written about the issue. When I asked google about this, it returned mostly pages describing the vertical-align attribute, a huge number of hacks, and a bunch of noise. What I didn't see was someone rationalizing what the realistic solutions were.
This situation clearly exemplifies that CSS was not designed to completely take over representational attributes. It seems like many people treat positional CSS like a secret waiting to be unlocked, which is the wrong approach when trying to get people to embrace something. In order for mass adoption the standard should focus on a complete set of tools that are easily implemented, the moment hacks and workarounds are involved credibility is lost and confusion arises.
Until CSS is endowed with at least the same level of control that standard HTML provides, we all are going to be stuck in a mix of compromises.
A recent project seemed like a strong candidate for the use of semantic markup and CSS. This was a departure from my world of certainty, where tables were used to create structure. However, just knowing (X)HTML and CSS wasn't enough. Based on someone's recommendation, I bought two books by Dan Cederholm. While a worthy investment and a very informative read it still left me with some questions.
The books served as excellent models for the use of semantic markup and the separation of design and content. The only disconcerting thing was reading this in Web Standards Solutions:
We're not going to argue either side, but instead state that using a table is sometimes the best way to achieve certain form layouts—especially complex forms that involve multiple controls like radio buttons, select boxes, etc. Relying solely on CSS to control the layout of complex forms can be frustrating, and often involve adding extraneous<span>and<div>tags, with more code bloat then that of a table.
What happen? Somebody sent up us the bomb. In other words, this was the last thing I wanted to read. Where is my knight in shining armor, my holy grail? The CSS can conquer anything, let me show you how attitude. I have to hand it to the guy, he didn't just say that it's better to forego certain formatting for the sake of reserving tables only for tabular data.
This leads to me to the issue of trying to overcome the problem of replicating certain levels of formatting, traditionally only achieved through the use of tables. Foremost, and probably the only unsolved issue is vertical alignment. Yes, I know there is an element for it, but it's not recognized in IE, so STFU K THNX. It's disgusting how many sites promote CSS hacks as a solution for this. How can someone tell me that a situation where a hack has to be used is more acceptable then using equivalent, compliant HTML.
It seems that my options are to:
- Use compliant CSS
- Use compliant CSS and a hack
- Use a table
- Not do it at all
I can't use option 1, it wouldn't render in 90% of the browsers out there (e.g. IE). Option 2 seems like the way to go, except that it doesn't guarantee anything, and still fowls up (e.g. Mac IE). 3 is appealing, and would produce consistent results in just about every single browser out there, however it defeats the purpose of separating style from markup, and there is always someone out there looking to take you to task for it. 4 isn't acceptable, there is no place for telling a client that they can't have something in the middle of a page or element because CSS won't do it.
My choice, a combination of the above. I'd really love to say screw it and use a table. It does exactly what I want, in arguably a lot less code. With an IE hack and Opera fix, the CSS becomes far more complex, and it still won't work 100% of the time. In the case of putting the main page content dead center in the screen, I'd have to say I'd certainly use a table now. Thankfully I'm not faced with that decision. What I'm working on now calls for a string of text to be vertically aligned in a parent element of known height. The string can occupy one or more lines, which makes it a little more complex. My choice here, fake it. It appears to be the only viable solution aside from breaking down and using tables. It was actually the solution that Randy proposed about a week ago.
It's annoying to use a compromise. I bet secretly a lot of other developers feel the same way and that's why there is so little written about the issue. When I asked google about this, it returned mostly pages describing the vertical-align attribute, a huge number of hacks, and a bunch of noise. What I didn't see was someone rationalizing what the realistic solutions were.
This situation clearly exemplifies that CSS was not designed to completely take over representational attributes. It seems like many people treat positional CSS like a secret waiting to be unlocked, which is the wrong approach when trying to get people to embrace something. In order for mass adoption the standard should focus on a complete set of tools that are easily implemented, the moment hacks and workarounds are involved credibility is lost and confusion arises.
Until CSS is endowed with at least the same level of control that standard HTML provides, we all are going to be stuck in a mix of compromises.
posted by Scott at
5:45 PM
7 Comments:
CSS3 looks promising and should clear up most of the issues with CSS2, however don't expect it to walk in the door any time soon. Even when it does, countless browsers are going to mess it all up. Everyone seems to have their own interpretation on how things work and refuse to adopt any sort of consistancy.
You mention standards and the internet community gives you a look like you just suggested that we switch the government over to communism.
It's that difference in interpretation that really messes things up. Like the IE box model vs. the W3C's. It also doesn't help that the W3C can be very vague.
Oh well. Maybe Microsoft will do something strange one day and force some standardization, though IE would have to be re-written again. More likely it would be google.
"This situation clearly exemplifies that CSS was not designed to completely take over representational attributes."
No exaclty. CSS was designed to do just this. Recommendations were made and brower manufacturers ignored them.
Nice article but :)
I don't believe the CSS2 standard provides a definition for a vertical center on a block level element. Their are plenty of browsers that conform to the standard, such as Safari and Firefox.
An excellent example of the half-assed toolset is the means for horizontal alignment. Oh boy, set left and right margins to 0 and it will magically center. That's not intuitive at all.
The simple fact is none of the layout capabilities are intuitive. Good luck trying to create a moderately complex page using only a text editor without previewing your work as you go. Just try it and you'll get pissed at it too.
I'm with you brother... just looking to solve the same problem and got smacked in the face with all the css hacks. If css can't solve this simple layout technique in an obvious straightforward way then, I'm sorry, but it's not ready for primetime.
Let's face it... CSS2 is a failure in the layout game. Why should a developer spend 3 days trying to implement some complex layout with CSS when it can be done with tables in 3 hours? The simple answer: they don't. We have deadlines to meet and our bosses don't really give one crap about having no-table layouts.
My approach... I try to use CSS for simple layout tasks. If it even gives me a hint of trouble, I fall back on tables because I've been down this road too many times. You inevitably google yourself to some css-hack page which provides you with some intolerably mangled CSS tricks. STOP... BREATH... USE TABLES INSTEAD.
Brett Green
Senior Engineer and Web Developer since 1997.
That's the realism I like to see.
CSS2 can be used to achieve the same layouts you get though tables but sometimes at the cost of hours, hacks, and even more complex markup. I don't want people to give up on CSS, or use it less. Want I do want is for people to realize it has significant shortcomings that limit it's usability, and that we need to improve the standard in a way that will make it more versatile and accessible.
I have just had a read through the blog and I have to say I am in full agreement of what is being said here. I have recently spent weeks learning the new CSS/XHTML markup, but have always found a frustrating end to my long hard work of endless div-ing and site development to find things working fine in the 'good guy' browsers, but always some screw up in the 'bad boy' internet explorer. It is a shame that at this time, while there has been a massive drop in IE users (from 97% of internet users to 73% in a year), as web designers, we can't avoid the fact that the majority user is on a browser that is incompatible with your website.
I have learned to mix it up, using tables with divs and CSS, and as was mentioned above, your client doesn't care, doesn't know and doesn't want to! As long as the site looks the way it's meant to and is delivered ON TIME, we are all happy.
Let me chime and with the rest of you and say, really, what on earth is the point of toiling for hours over hacks and online blogs to get something fixed when you can just wrap it in a table and hey presto! it's done?
Post a Comment
Links to this post:
Create a Link
<< Home