7 ms·

> It's annoying to have to wrap something inside of a > <table><tr><td> just to vertically center something And you dont have to. Because your container does

> It's annoying to have to wrap something inside of a > <table><tr><td> just to vertically center something And you dont have to. Because your container does not have to be a table, and you don't need cells and rows. Just use display: (table|table-cell). See for an example: http://css-tricks.com/centering-in-the-unknown/ http://css-tricks.com/centering-in-the-unknown/ It is not OK to use table and friends in you HTML just for styling purposes. It's totally OK to use display: table* in your CSS, because CSS has no semantics, its purpose is styling.

deleted 13y ago
[deleted]
binarymax 13y ago
Thanks for that link, it is very enlightening. So much of CSS just feels like a total hack. putting something in the middle of an element should not be so hard! negative margins? ...absurd! Why doesnt CSS just have a property like 'placement: center middle' or something.
- lbenes 13y ago
  CSS is the epitome of design by committee, only worse. It’s worse because some members had a vested interest for the standard to fail. As a result, we get threads like this from designers, and programmers; they're in a worse bind. It’s just not possible to efficiently hardware accelerate CSS. Of JS/DOM/CSS in HTML5, CSS is the worst standard. Depreciation is the best we can hope for. I’m sure MS and Mozilla will fight it tooth and nail, but maybe Google will pull a Dart/Go here and give us something decent to work with.
  - emn13 13y ago
    I've got exactly the opposite opinion: of JS/HTML/CSS, CSS is y far the best standard. People complain because it doesn't address their specific needs explicitly (e.g. vertical centering) - but that way lies madness; a huge spec that caters for every case explictly, and probably has lots of corner cases and interactions meaning that cross-browser support would be even harder than now. CSS is limited - and that's a good thing. Would you want to implement complex layout in JS, say? And how that would look when window size changes, or the page is zoomed, or some font isn't available? The declarative nature of CSS is what makes it work; and the key aspect of declarative here is that it represents a state, not an algorithm - it's not turing complete. You'll never be able to do everything in CSS; and that's by design.
    - slacka 13y ago
      It's not an issue of turning completeness. CSS was never designed to be hardware accelerated. So many implementations run faster in software. Here's a good example: http://stackoverflow.com/questions/10014461/why-does-enabling-hardware-acceleration-in-css3-slow-down-performance http://stackoverflow.com/questions/10014461/why-does-enablin...
- saraid216 13y ago
  People complaining about CSS usually complain about the illogic of cascading, which I don't understand. This, however, captures the weaknesses of CSS a lot better. CSS is strong when it comes to styling text, but weak when it comes to doing layout. It would be nice to see a complete overhaul of how presentation is done, with what people have sought to do on today's web in mind.
- ricardobeat 13y ago
  That's what flexbox does, mentioned at the end of the post, it just doesn't have enough support yet.
  - jgon 13y ago
    Does flexbox support the centering of elements like the canvas and a webgl context? Does it offer facilities for resizing either of these elements? If not, is there anything out there that allows for resizing these elements with the rest of the page?
    - ricardobeat 13y ago
      Yes, you can use percentage units.
- sergiosgc 13y ago
  CSS is thought out for it to be possible to implement a fast layout engine. This requires a few concessions. One concession is that it (mostly) requires that layout defined by a partial document is the same when the document is complete (to allow for documents to be laid out on the screen as they come in from the slow network). A placement: middle, without a rigidly defined height, would require the layout engine to know about document information after the element requesting a middle placement.
jakobe 13y ago
Why is it not okay to use tables for styling purposes? Why is it okay to use multiple nested divs, but not the table/tr/td tags? Are there any practical reasons, besides the goal of making the markup more 'semantic'? Are there any screen readers that can't handle table tags? Or do some crawlers choke on tables? I keep hearing this dogma, don't use tables for layout, but nobody has ever explained to me why it is a problem in practice.
- mattvot 13y ago
  see http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html http://stackoverflow.com/questions/83073/why-not-use-tables-...
  - rhizome 13y ago
    Thanks for this, but of course the question got closed.
    - taejo 13y ago
      I don't see the problem: there's a question, there's a good answer, so it's closed. Not everything has to be an on-going debate.
      - desas 13y ago
        That's not what happened. There's a question, it isn't the sort of question the stack overflow wants to have, so it's closed. For a change it's actually a close decision that was a good one.
- sopooneo 13y ago
  I used to hear that dogma too. And then all of a sudden I'm reading everywhere that I should check out bootstrap.css, which flies straight in the face of semantic markup by requiring you to use class names that are descriptive of their layout effect. I don't know if there is overlap between the evangalizers of semantic markup and bootstrap.css, but if so, it would seem contradictory.
deleted 13y ago
[deleted]
grey-area 13y ago
While I agree it's better to avoid tables for styling, I see why people resort to it as it is much simpler. I love how your example uses 'something-semantic' as the class of the nested divs, as if labelling them semantic makes it so - this is an ugly hack around a deficiency of CSS and not far removed from using tables. It is possible to centre things vertically (with nested divs) or have several columns of freely defined height, but people have to go to extreme lengths to do so and mangle their markup in the process, because CSS is sorely lacking in some fundamental aspects of design. Things which should be simple are hard, and it's impossible to truly divorce the meaning from the form because of bugs and deficiencies in CSS, which leaves us adding nested divs all over the place to get the correct layout. CSS should have had vertical and horizontal centring for blocks from the start, it should also have had some system of grids and columns and a concept of baselines. It's painfully clear in the design of CSS and the huge gaps in the coverage that it was an ad-hoc reaction to browser developers' problems, not to the problems of designers styling HTML. It could be radically simpler and have far more power if they went back and rethought the foundations of the box model and considered other techniques like grids which have been used for hundreds of years to present information.
- PavlovsCat 13y ago
  http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/

deleted 13y ago

[deleted]

binarymax 13y ago

Thanks for that link, it is very enlightening. So much of CSS just feels like a total hack. putting something in the middle of an element should not be so hard! negative margins? ...absurd! Why doesnt CSS just have a property like 'placement: center middle' or something.

lbenes 13y ago
CSS is the epitome of design by committee, only worse. It’s worse because some members had a vested interest for the standard to fail. As a result, we get threads like this from designers, and programmers; they're in a worse bind. It’s just not possible to efficiently hardware accelerate CSS. Of JS/DOM/CSS in HTML5, CSS is the worst standard. Depreciation is the best we can hope for. I’m sure MS and Mozilla will fight it tooth and nail, but maybe Google will pull a Dart/Go here and give us something decent to work with.
- emn13 13y ago
  I've got exactly the opposite opinion: of JS/HTML/CSS, CSS is y far the best standard. People complain because it doesn't address their specific needs explicitly (e.g. vertical centering) - but that way lies madness; a huge spec that caters for every case explictly, and probably has lots of corner cases and interactions meaning that cross-browser support would be even harder than now. CSS is limited - and that's a good thing. Would you want to implement complex layout in JS, say? And how that would look when window size changes, or the page is zoomed, or some font isn't available? The declarative nature of CSS is what makes it work; and the key aspect of declarative here is that it represents a state, not an algorithm - it's not turing complete. You'll never be able to do everything in CSS; and that's by design.
  - slacka 13y ago
    It's not an issue of turning completeness. CSS was never designed to be hardware accelerated. So many implementations run faster in software. Here's a good example: http://stackoverflow.com/questions/10014461/why-does-enabling-hardware-acceleration-in-css3-slow-down-performance http://stackoverflow.com/questions/10014461/why-does-enablin...
saraid216 13y ago
People complaining about CSS usually complain about the illogic of cascading, which I don't understand. This, however, captures the weaknesses of CSS a lot better. CSS is strong when it comes to styling text, but weak when it comes to doing layout. It would be nice to see a complete overhaul of how presentation is done, with what people have sought to do on today's web in mind.
ricardobeat 13y ago
That's what flexbox does, mentioned at the end of the post, it just doesn't have enough support yet.
- jgon 13y ago
  Does flexbox support the centering of elements like the canvas and a webgl context? Does it offer facilities for resizing either of these elements? If not, is there anything out there that allows for resizing these elements with the rest of the page?
  - ricardobeat 13y ago
    Yes, you can use percentage units.
sergiosgc 13y ago
CSS is thought out for it to be possible to implement a fast layout engine. This requires a few concessions. One concession is that it (mostly) requires that layout defined by a partial document is the same when the document is complete (to allow for documents to be laid out on the screen as they come in from the slow network). A placement: middle, without a rigidly defined height, would require the layout engine to know about document information after the element requesting a middle placement.

jakobe 13y ago

Why is it not okay to use tables for styling purposes? Why is it okay to use multiple nested divs, but not the table/tr/td tags? Are there any practical reasons, besides the goal of making the markup more 'semantic'? Are there any screen readers that can't handle table tags? Or do some crawlers choke on tables? I keep hearing this dogma, don't use tables for layout, but nobody has ever explained to me why it is a problem in practice.

mattvot 13y ago
see http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html http://stackoverflow.com/questions/83073/why-not-use-tables-...
- rhizome 13y ago
  Thanks for this, but of course the question got closed.
  - taejo 13y ago
    I don't see the problem: there's a question, there's a good answer, so it's closed. Not everything has to be an on-going debate.
    - desas 13y ago
      That's not what happened. There's a question, it isn't the sort of question the stack overflow wants to have, so it's closed. For a change it's actually a close decision that was a good one.
sopooneo 13y ago
I used to hear that dogma too. And then all of a sudden I'm reading everywhere that I should check out bootstrap.css, which flies straight in the face of semantic markup by requiring you to use class names that are descriptive of their layout effect. I don't know if there is overlap between the evangalizers of semantic markup and bootstrap.css, but if so, it would seem contradictory.

deleted 13y ago

[deleted]

grey-area 13y ago

While I agree it's better to avoid tables for styling, I see why people resort to it as it is much simpler. I love how your example uses 'something-semantic' as the class of the nested divs, as if labelling them semantic makes it so - this is an ugly hack around a deficiency of CSS and not far removed from using tables. It is possible to centre things vertically (with nested divs) or have several columns of freely defined height, but people have to go to extreme lengths to do so and mangle their markup in the process, because CSS is sorely lacking in some fundamental aspects of design. Things which should be simple are hard, and it's impossible to truly divorce the meaning from the form because of bugs and deficiencies in CSS, which leaves us adding nested divs all over the place to get the correct layout. CSS should have had vertical and horizontal centring for blocks from the start, it should also have had some system of grids and columns and a concept of baselines. It's painfully clear in the design of CSS and the huge gaps in the coverage that it was an ad-hoc reaction to browser developers' problems, not to the problems of designers styling HTML. It could be radically simpler and have far more power if they went back and rethought the foundations of the box model and considered other techniques like grids which have been used for hundreds of years to present information.

PavlovsCat 13y ago
http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/