13 ms·

> To this day it is the only way to vertically center elements. Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to jus

> To this day it is the only way to vertically center elements. Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars. Also does anyone remember the fade of the overline style on :hover links? It must has been around the IE4 or IE6 era. Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells...

thrdbndndn 3y ago
Nowadays I just ask ChatGPT to write the CSS for me for that, and amusingly, it seems to be able to produce at least a dozen of solutions (often came with redundant rules, too: like having 5+ rules when 2 or 3 of them are enough). It's hilariously stupid.
- rekoil 3y ago
  > It's hilariously stupid. No no, it's going to take our jobs! /s
  - zelphirkalt 3y ago
    You joke, but I am pretty sure, that in some heads that idea is already spinning. When can they hire fewer people and make those fewer people simply use ChatGPT or some other model. We might see an even further decline in web quality as a result, as we get even more copy&paste devs.
    - rekoil 3y ago
      Great for me, I work in IT security, and that's gonna tank even harder if people start seriously using ChatGPT in the manner you describe!
    - mleo 3y ago
      Increased productivity and doing certain tasks in less time or with less people has been going on forever and certainly last 30 years in web development. The growing businesses use the extra capacity to expand in other directions whether new products or new features. The stagnant companies continue to struggle with less.
  - digging 3y ago
    No, but the next breakthrough might... Why do so many hackers have so much difficulty seeing that the current state of public LLMs is not the pinnacle of AI technology? Nobody ever even claimed that they were.
  - hombre_fatal 3y ago
    Meh, anyone who hasn’t been able to multiply their productivity with chatgpt is either is too stubborn to try it or, well, i’m not sure how you can mess this up. From writing sql boilerplate to copy-pasting my entire pico8 game and going “add repulsion force to enemies so they don’t clump up on one tile” to using it to provide examples instead of synthesizing them from a manpage, it’s insanely good.
    - captaincaveman 3y ago
      oh it helps, it doesn't multiply my productivity, I wish it did! It marginally increases my productivity and reduces some friction, honestly I'm more than happy for it to write as much code as it can on my behalf, it just can't. I suspect those for whom it is a big game changer, were likely engaged in lots of activity which is cookie cutter.
- Sharlin 3y ago
  That's not stupid, it's just redundancy to make sure it works on all browsers!
  - zelphirkalt 3y ago
    Oh wait, we better make it work in IE6! How much we were held back by backward compatibility before useful standards for things came ... But nowadays I just ignore non-standard styling. Just use the standard, because support is sufficient and browsers not supporting the standard sufficiently to make the website unusable are rare. By using the standard one also gives their developers a set target to get implemented.
    - emayljames 3y ago
      iOS Safari has so many odd bugs in layout and CSS that trips up its touch based scrolling, it is so much like the IE days where other browsers worked and the site looked good, then you load in IE (Safari now) and something is broken.
      - Sharlin 3y ago
        I once (~10 years ago, wow the time flies) found and reported a bug in iOS Safari where when you enabled touch scrolling on an element inside <body>, it would scroll vertically when you swiped horizontally and vice versa. But only when the page also contained an invisible <iframe> that we happened to need because reasons (GWT stuff). Apple fixed it eventually, but I'd love to know exactly what the root cause of the bug was…
  - curtisblaine 3y ago
    Not sure of sarcastic or not, but prefixed rules (per-browser prefixes) are a thing of the past in modern evergreen browsers.
    - Sharlin 3y ago
      Ironic. But I was not really talking per-browser prefixes, those are newfangled 2010s stuff. I'm talking way back in the day, when different browsers (well, mostly IE) sometimes had completely different ways of achieving something, in some cases requiring ~~unthinkable hacks~~clever and elegant solutions to avoid interference.
- layer8 3y ago
  It’s just applying proper separation of concerns. ;)
- jeffkeen 3y ago
  Bless its heart for being so dang confident about every wrong answer it has.
eps 3y ago
[flagged]
rzzzt 3y ago
Macromedia Fireworks will slice it for you.
arlcode 3y ago
(2014) so while "technically" flex was available at the time it wasn't really widespread yet.
- conradfr 3y ago
  I missed the (2014), not sure it was there initially (but it was in the article anyway).
- spacecadet 3y ago
  The place I was at in 2014 started replacing code with flex around 2014 and it was welcomed!
cqqxo4zV46cp 3y ago
I think I saw something about being able to directly center block elements just come down the pike.
- rezonant 3y ago
  Yeah, it turns out vertical align works differently in tables, so you can just make a one cell table and vertical center all day. I think there was a Chrome developers blog post about it recently.
  - tracker1 3y ago
    Until you had a few hundred tables in a complex page and IE6 just renders a blank screen. Don't miss those days.
davedx 3y ago
It's still a huge PITA and requires all sorts of subtle understandings. Even in tailwindcss it's not simple, you need to think about what kind of element is it (block or not), is it text or not, what layout is on the parent, yada yada yada.
- plagiarist 3y ago
  Here's a puzzle I had from the olden days: how do you do webpages with header and footer such that the footer is always at least as far down as the window height, but if the content is less than enough to push the footer below the fold it should be centered. I remember that being far harder than it needed to be. I was a child though so maybe I just didn't get CSS well enough.
  - tracker1 3y ago
    Really wasnt a great experience... You could do similar with tables, everything was tables. But you had to keep your open and close in check across the page. Templating frameworks were less flexible earlier on. Sucked when say a large corporate team did headers and footers separate from your app team. Flexbox today is better IMO.
  - logicprog 3y ago
    In modern CSS I'd try this: make a super element around the header and content, set the min-height of that to 100vh, and the display to flexbox, with flex-flow: column nowrap; and then align-items: center;
    - MalcolmDwyer 3y ago
      But watch out for 100vh on mobile. It doesn't account for the sometimes there, sometimes not there address bar. To solve that, there's svh (small), lvh (large), and dvh (dynamic). If you want to make a div stretch to the height of the window, so that something can appear exactly at the bottom before scrolling, { height: 100vh; height: 100svh; } works best... the first line is there as a fallback for the few browsers that don't yet support svh... and if svh is supported it will replace the first line.
flir 3y ago
> The agony of designing and splicing them in Photoshop and putting them in table cells... Wasn't there a Photoshop-adjacent tool that did the slicing for you? I remember a print designer on my first job feeding what was, essentially, a full-bleed leaflet design through it, and producing a "landing page" with hundreds of table cells.
- function_seven 3y ago
  Macromedia Fireworks? I think that’s what you’re remembering. https://en.m.wikipedia.org/wiki/Adobe_Fireworks https://en.m.wikipedia.org/wiki/Adobe_Fireworks
  - deleted 3y ago
    [deleted]
    - thegeomaster 3y ago
      Photoshop itself did have a "slice tool" which allowed you to draw slices. There was a special export mode which exported all these slices for you, and IIRC, could even generate a tabletastic HTML for you. Maybe this is what you remember?
- whizzter 3y ago
  Adobe Imageready , was capable of visually making image-maps (you added links to sections of an image) and also had tools to create Gif animations (later embedded into Photoshop proper). A page I have for one community project still uses those Imageready generated maps :)
  - flir 3y ago
    That's the puppy! Thanks!
- jon-wood 3y ago
  Photoshop itself would let you slice an image into sections and then export them as separate images.
spacecadet 3y ago
oooh god please no photoshop splices. PTSD.
- neonnoodle 3y ago
  .ptsd files
  - emayljames 3y ago
    .cptsd ?
consp 3y ago
> Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells... Wasn't an image with a click <map> easier? I wasn't old enough to write very complicated html pages so my experience is lacking here.
- zelphirkalt 3y ago
  But a single image does not stretch the correct way, when you have a bigger button to make. Like: left-top corner: no stretch left: stretch vertically top: stretch horizontally ... and so on. I still remember learning to make the layout of a whole page as a table layout in school, with images in table cells for drawing nice borders around sections of the website. And we did that with GIMP!
- madaxe_again 3y ago
  You could make a fantastic looking website with use of imagemaps and judicious use of hover image replacement. Glowing buttons, drop shadows, you name it.
- tracker1 3y ago
  Depends. I'm the dialup days,. Cutting up an image and having it in a table could let you optimize each fragment as a gif with more limited pallet. So it would look better and be smaller. Especially with rollover image replacement. I kind of wish that attention to detail for payload size was more common today.
- smoe 3y ago
  From vague memory, images of buttons were indeed used, but tables or other tricks were necessary to dynamically adjust container size to its contents, e.g., for internationalization.
- anentropic 3y ago
  > Wasn't an image with a click <map> easier it's solving a different problem it's referring to using a 9-cell table to make an element where the corner sizes stay static, while the middle column and middle row stretch horizontally and vertically respectively to match the size of the central cell (which e.g. has variable length text) then with background image tiling in the left/right and top/bottom middle cells you can get an effect like a drop-shadowed panel that sizes responsively you'd probably set the flexible cells to width=100% and then have a 1-pixel gif in the edge cells to enforce the desired min-width I was sad the article didn't mention anything about the 216-colour "web safe" palette, but perhaps the author wasn't old enough to remember having to support users with < 24-bit colour displays... or when 1024x768 took over from 640x480 as the min screen size, allowing use of fixed-width layouts >600 pixels (the max possible: 640, minus browser default page margin, minus scroll bar)...
Izkata 3y ago
> > To this day it is the only way to vertically center elements. > Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars. Even back then (possibly even back in the 90s? I know this existed in the 2000s) we had "VALIGN=MIDDLE" inside table cells.
- deaddodo 3y ago
  Right, people seem to forget that table-based designs ruled the roost in the 90s and early 00s. All of the vertical align, layering, etc hacks came from people not wanting to use tables anymore and divs (and other block elements) finally becoming more usable. Those hacks were the growing pains of an entire shift in paradigm.
  - Cthulhu_ 3y ago
    Honestly it often feels like HTML and CSS evolutions were two steps forward, one step back. Like, cool that we can now do rounded corners in CSS but why can't I vertically align in a div yet? (this was before flexbox)
  - arethuza 3y ago
    "table-based designs ruled the roost in the 90s and early 00s" Have you checked how HN does layout?
    - deaddodo 3y ago
      No longer being preeminent doesn't mean non-existent.
  - ssharp 3y ago
    Tables made much more intuitive sense than something like flexbox now but that came at the expense of being a nightmare to maintain. Trying to hack a table layout together often led to frequent edits and initial attempts to maintain clean layout comments ended. You're left with never ending <tr><td><tr><td><tr><td> that you hopefully at least indented to maintain sanity. But god help you if your stumbled into another person's table layout code... Spending time just entering "here", saving the file, and seeing where the "here" shows up. By the time 5pm rolled around "here" often turned into something like "ass" or "fuck", or if it's really bad "fuck you". IYKYK
chasd00 3y ago
> Tables were also used to make divs and buttons with rounded corners, i remember when that was all the rage. So much time spent on freaking corners...
- sroussey 3y ago
  On *rounded* corners. :)
- bdcravens 3y ago
  Only to find a browser that somehow didn't render cell spacing and padding correctly and now your corners looked like wandering tiles
- fidelramos 3y ago
  And when it finally became easy to round corners, designers moved to square corners...
Andrex 3y ago
> not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars. One of my favorite CSS hacks, it doesn't always work in every single situation though... div { display: table-cell; vertical-align: middle; } Feels dirty at first but separation of concerns is still enforced, and I can't see any other downsides.
aimor 3y ago
This week I ran into a problem with vertical centering I couldn't figure out: Text in a flex item with overflow ellipses and vertical centering. Other people online have shared solutions that did not work for me, but I've since convinced myself it looks better as-is. Billions of dollar is not an exaggeration.

thrdbndndn 3y ago

Nowadays I just ask ChatGPT to write the CSS for me for that, and amusingly, it seems to be able to produce at least a dozen of solutions (often came with redundant rules, too: like having 5+ rules when 2 or 3 of them are enough). It's hilariously stupid.

rekoil 3y ago
> It's hilariously stupid. No no, it's going to take our jobs! /s
- zelphirkalt 3y ago
  You joke, but I am pretty sure, that in some heads that idea is already spinning. When can they hire fewer people and make those fewer people simply use ChatGPT or some other model. We might see an even further decline in web quality as a result, as we get even more copy&paste devs.
  - rekoil 3y ago
    Great for me, I work in IT security, and that's gonna tank even harder if people start seriously using ChatGPT in the manner you describe!
  - mleo 3y ago
    Increased productivity and doing certain tasks in less time or with less people has been going on forever and certainly last 30 years in web development. The growing businesses use the extra capacity to expand in other directions whether new products or new features. The stagnant companies continue to struggle with less.
- digging 3y ago
  No, but the next breakthrough might... Why do so many hackers have so much difficulty seeing that the current state of public LLMs is not the pinnacle of AI technology? Nobody ever even claimed that they were.
- hombre_fatal 3y ago
  Meh, anyone who hasn’t been able to multiply their productivity with chatgpt is either is too stubborn to try it or, well, i’m not sure how you can mess this up. From writing sql boilerplate to copy-pasting my entire pico8 game and going “add repulsion force to enemies so they don’t clump up on one tile” to using it to provide examples instead of synthesizing them from a manpage, it’s insanely good.
  - captaincaveman 3y ago
    oh it helps, it doesn't multiply my productivity, I wish it did! It marginally increases my productivity and reduces some friction, honestly I'm more than happy for it to write as much code as it can on my behalf, it just can't. I suspect those for whom it is a big game changer, were likely engaged in lots of activity which is cookie cutter.
Sharlin 3y ago
That's not stupid, it's just redundancy to make sure it works on all browsers!
- zelphirkalt 3y ago
  Oh wait, we better make it work in IE6! How much we were held back by backward compatibility before useful standards for things came ... But nowadays I just ignore non-standard styling. Just use the standard, because support is sufficient and browsers not supporting the standard sufficiently to make the website unusable are rare. By using the standard one also gives their developers a set target to get implemented.
  - emayljames 3y ago
    iOS Safari has so many odd bugs in layout and CSS that trips up its touch based scrolling, it is so much like the IE days where other browsers worked and the site looked good, then you load in IE (Safari now) and something is broken.
    - Sharlin 3y ago
      I once (~10 years ago, wow the time flies) found and reported a bug in iOS Safari where when you enabled touch scrolling on an element inside <body>, it would scroll vertically when you swiped horizontally and vice versa. But only when the page also contained an invisible <iframe> that we happened to need because reasons (GWT stuff). Apple fixed it eventually, but I'd love to know exactly what the root cause of the bug was…
- curtisblaine 3y ago
  Not sure of sarcastic or not, but prefixed rules (per-browser prefixes) are a thing of the past in modern evergreen browsers.
  - Sharlin 3y ago
    Ironic. But I was not really talking per-browser prefixes, those are newfangled 2010s stuff. I'm talking way back in the day, when different browsers (well, mostly IE) sometimes had completely different ways of achieving something, in some cases requiring ~~unthinkable hacks~~clever and elegant solutions to avoid interference.
layer8 3y ago
It’s just applying proper separation of concerns. ;)
jeffkeen 3y ago
Bless its heart for being so dang confident about every wrong answer it has.

eps 3y ago

[flagged]

rzzzt 3y ago

Macromedia Fireworks will slice it for you.

arlcode 3y ago

(2014) so while "technically" flex was available at the time it wasn't really widespread yet.

conradfr 3y ago
I missed the (2014), not sure it was there initially (but it was in the article anyway).
spacecadet 3y ago
The place I was at in 2014 started replacing code with flex around 2014 and it was welcomed!

cqqxo4zV46cp 3y ago

I think I saw something about being able to directly center block elements just come down the pike.

rezonant 3y ago
Yeah, it turns out vertical align works differently in tables, so you can just make a one cell table and vertical center all day. I think there was a Chrome developers blog post about it recently.
- tracker1 3y ago
  Until you had a few hundred tables in a complex page and IE6 just renders a blank screen. Don't miss those days.

davedx 3y ago

It's still a huge PITA and requires all sorts of subtle understandings. Even in tailwindcss it's not simple, you need to think about what kind of element is it (block or not), is it text or not, what layout is on the parent, yada yada yada.

plagiarist 3y ago
Here's a puzzle I had from the olden days: how do you do webpages with header and footer such that the footer is always at least as far down as the window height, but if the content is less than enough to push the footer below the fold it should be centered. I remember that being far harder than it needed to be. I was a child though so maybe I just didn't get CSS well enough.
- tracker1 3y ago
  Really wasnt a great experience... You could do similar with tables, everything was tables. But you had to keep your open and close in check across the page. Templating frameworks were less flexible earlier on. Sucked when say a large corporate team did headers and footers separate from your app team. Flexbox today is better IMO.
- logicprog 3y ago
  In modern CSS I'd try this: make a super element around the header and content, set the min-height of that to 100vh, and the display to flexbox, with flex-flow: column nowrap; and then align-items: center;
  - MalcolmDwyer 3y ago
    But watch out for 100vh on mobile. It doesn't account for the sometimes there, sometimes not there address bar. To solve that, there's svh (small), lvh (large), and dvh (dynamic). If you want to make a div stretch to the height of the window, so that something can appear exactly at the bottom before scrolling, { height: 100vh; height: 100svh; } works best... the first line is there as a fallback for the few browsers that don't yet support svh... and if svh is supported it will replace the first line.

flir 3y ago

> The agony of designing and splicing them in Photoshop and putting them in table cells... Wasn't there a Photoshop-adjacent tool that did the slicing for you? I remember a print designer on my first job feeding what was, essentially, a full-bleed leaflet design through it, and producing a "landing page" with hundreds of table cells.

function_seven 3y ago
Macromedia Fireworks? I think that’s what you’re remembering. https://en.m.wikipedia.org/wiki/Adobe_Fireworks https://en.m.wikipedia.org/wiki/Adobe_Fireworks
- deleted 3y ago
  [deleted]
  - thegeomaster 3y ago
    Photoshop itself did have a "slice tool" which allowed you to draw slices. There was a special export mode which exported all these slices for you, and IIRC, could even generate a tabletastic HTML for you. Maybe this is what you remember?
whizzter 3y ago
Adobe Imageready , was capable of visually making image-maps (you added links to sections of an image) and also had tools to create Gif animations (later embedded into Photoshop proper). A page I have for one community project still uses those Imageready generated maps :)
- flir 3y ago
  That's the puppy! Thanks!
jon-wood 3y ago
Photoshop itself would let you slice an image into sections and then export them as separate images.

spacecadet 3y ago

oooh god please no photoshop splices. PTSD.

neonnoodle 3y ago
.ptsd files
- emayljames 3y ago
  .cptsd ?

consp 3y ago

> Tables were also used to make divs and buttons with rounded corners, but that was true into the 2000s as well. The agony of designing and splicing them in Photoshop and putting them in table cells... Wasn't an image with a click <map> easier? I wasn't old enough to write very complicated html pages so my experience is lacking here.

zelphirkalt 3y ago
But a single image does not stretch the correct way, when you have a bigger button to make. Like: left-top corner: no stretch left: stretch vertically top: stretch horizontally ... and so on. I still remember learning to make the layout of a whole page as a table layout in school, with images in table cells for drawing nice borders around sections of the website. And we did that with GIMP!
madaxe_again 3y ago
You could make a fantastic looking website with use of imagemaps and judicious use of hover image replacement. Glowing buttons, drop shadows, you name it.
tracker1 3y ago
Depends. I'm the dialup days,. Cutting up an image and having it in a table could let you optimize each fragment as a gif with more limited pallet. So it would look better and be smaller. Especially with rollover image replacement. I kind of wish that attention to detail for payload size was more common today.
smoe 3y ago
From vague memory, images of buttons were indeed used, but tables or other tricks were necessary to dynamically adjust container size to its contents, e.g., for internationalization.
anentropic 3y ago
> Wasn't an image with a click <map> easier it's solving a different problem it's referring to using a 9-cell table to make an element where the corner sizes stay static, while the middle column and middle row stretch horizontally and vertically respectively to match the size of the central cell (which e.g. has variable length text) then with background image tiling in the left/right and top/bottom middle cells you can get an effect like a drop-shadowed panel that sizes responsively you'd probably set the flexible cells to width=100% and then have a 1-pixel gif in the edge cells to enforce the desired min-width I was sad the article didn't mention anything about the 216-colour "web safe" palette, but perhaps the author wasn't old enough to remember having to support users with < 24-bit colour displays... or when 1024x768 took over from 640x480 as the min screen size, allowing use of fixed-width layouts >600 pixels (the max possible: 640, minus browser default page margin, minus scroll bar)...

Izkata 3y ago

> > To this day it is the only way to vertically center elements. > Not true anymore (edit: didn't see the 2014) but the productivity cost of not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars. Even back then (possibly even back in the 90s? I know this existed in the 2000s) we had "VALIGN=MIDDLE" inside table cells.

deaddodo 3y ago
Right, people seem to forget that table-based designs ruled the roost in the 90s and early 00s. All of the vertical align, layering, etc hacks came from people not wanting to use tables anymore and divs (and other block elements) finally becoming more usable. Those hacks were the growing pains of an entire shift in paradigm.
- Cthulhu_ 3y ago
  Honestly it often feels like HTML and CSS evolutions were two steps forward, one step back. Like, cool that we can now do rounded corners in CSS but why can't I vertically align in a div yet? (this was before flexbox)
- arethuza 3y ago
  "table-based designs ruled the roost in the 90s and early 00s" Have you checked how HN does layout?
  - deaddodo 3y ago
    No longer being preeminent doesn't mean non-existent.
- ssharp 3y ago
  Tables made much more intuitive sense than something like flexbox now but that came at the expense of being a nightmare to maintain. Trying to hack a table layout together often led to frequent edits and initial attempts to maintain clean layout comments ended. You're left with never ending <tr><td><tr><td><tr><td> that you hopefully at least indented to maintain sanity. But god help you if your stumbled into another person's table layout code... Spending time just entering "here", saving the file, and seeing where the "here" shows up. By the time 5pm rolled around "here" often turned into something like "ass" or "fuck", or if it's really bad "fuck you". IYKYK

chasd00 3y ago

> Tables were also used to make divs and buttons with rounded corners, i remember when that was all the rage. So much time spent on freaking corners...

sroussey 3y ago
On *rounded* corners. :)
bdcravens 3y ago
Only to find a browser that somehow didn't render cell spacing and padding correctly and now your corners looked like wandering tiles
fidelramos 3y ago
And when it finally became easy to round corners, designers moved to square corners...

Andrex 3y ago

> not being able to just "vertical-align: middle;" inside divs for the last 30 years must be billions of dollars. One of my favorite CSS hacks, it doesn't always work in every single situation though... div { display: table-cell; vertical-align: middle; } Feels dirty at first but separation of concerns is still enforced, and I can't see any other downsides.

aimor 3y ago

This week I ran into a problem with vertical centering I couldn't figure out: Text in a flex item with overflow ellipses and vertical centering. Other people online have shared solutions that did not work for me, but I've since convinced myself it looks better as-is. Billions of dollar is not an exaggeration.