Hacker News Reader

Comment by conradfr | Hacker News Reader

> 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...

View on HN

> > 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.

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.

"table-based designs ruled the roost in the 90s and early 00s"

Have you checked how HN does layout?

No longer being preeminent doesn't mean non-existent.

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

I didn't say the transition was a bad one. I said that there was a decade or so of warts + growing pains as HTML and CSS grew to accommodate freeform block layouts. It wasn't until HTML5 + CSS3 that it was super usable, and until Flexbox that it became somewhat easy.

Was it any worse than nested div soups?

In some ways. There was at least a logical organization around a table, as long as you could wrap your head around all the markup and maintain it. Nested divs with CSS felt like you sometimes be halfway down a road that will never lead to where you want to go.

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)

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.

> It's hilariously stupid.

No no, it's going to take our jobs!

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.

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!

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.

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.

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.

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.

That's not stupid, it's just redundancy to make sure it works on all browsers!

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.

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.

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…

Not sure of sarcastic or not, but prefixed rules (per-browser prefixes) are a thing of the past in modern evergreen browsers.

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.

OMG the nightmares. I still had to deal with legacy IE CSS until a few years ago. The obscure and endless vendor prefixs to fix something it was never intended for.

It’s just applying proper separation of concerns. ;)

Bless its heart for being so dang confident about every wrong answer it has.

> 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...

On *rounded* corners. :)

Only to find a browser that somehow didn't render cell spacing and padding correctly and now your corners looked like wandering tiles

And when it finally became easy to round corners, designers moved to square corners...

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.

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.

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.

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;

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.

These modern days I'd personally skip over flexbox and use CSS Grid. I find grid-template-areas such a nicer to read map than trying to decipher complex nests of flexbox and I'm finding more every day that I prefer CSS Grid even in places that don't seem to be 2D layouts yet and could just be 1D flexbox.

Assuming body has header, main, and footer...

body {

display: grid;

grid-template-rows: auto 1fr auto;

min-height: 100dvh;

}

main {

display: grid;

align-content: center;

}

> 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.

(2014)

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

I missed the (2014), not sure it was there initially (but it was in the article anyway).

The place I was at in 2014 started replacing code with flex around 2014 and it was welcomed!

> 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.

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!

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.

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.

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.

> 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)...

Some websites did do this. But adding actual text that can be indexed by Ask Jeeves doesn't work with this solution.

Macromedia had this crazy system where you could slice your art up in Fireworks, and then ask it to generate the HTML and Javascript, then you could fine-tune it in Dreamweaver.

It was a mess.

> 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.

Macromedia Fireworks?

I think that’s what you’re remembering.

https://en.m.wikipedia.org/wiki/Adobe_Fireworks

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 :)

That's the puppy! Thanks!

Photoshop itself would let you slice an image into sections and then export them as separate images.

I worked with a PS wizard around 98 that was able to do that... Had to do a complicated rollover trail with a 15x9 grid of category images.

She was great to work with.

Eventually, but not originally. The first designers who knew how to do it manually were basically considered to be wizards.

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.

oooh god please no photoshop splices. PTSD.

.ptsd files

.cptsd ?

Macromedia Fireworks will slice it for you.

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

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.

Until you had a few hundred tables in a complex page and IE6 just renders a blank screen.

Don't miss those days.

Reply on news.ycombinator.com