Something I hate about Chrome

Zenith

I don't even know what to search to find a solution for this. Chrome apparently cannot figure out that middle column width if it's set to 100% even if the table itself has a fixed width and the other columns have fixed widths and colgroup tags are set up. I tried searching 20 different combinations of Chrome, table, colspan, width, bug on Google and found nothing.

Then, by accident, I found people complaining that "colspan=0" was removed. People had been using it as shorthand for spanning all columns. Really great idea so of course it was removed. Somebody suggested using "colspan=100%" as a fix. Which is technically wrong because the "%" is ignored. Which led me to try setting my colspan to 4. Which suddenly worked.

Chrome can't operate right with specific instructions but telling it to account for phantom columns that are never defined anywhere somehow works. And worse, this dopey browser is the new IE6, with so much marketshare it doesn't have to fix anything ever (I have a list of basic stuff that shouldn't still be broken in 2019). Except IE6 at least did what I expected in terms of layout. I want to strangle the Cult of DIV because DIVs have never been fixed to act like the tables they were supposed to replace.

kazitor

@Zenith said in Something I hate about Chrome:

I want to strangle the Cult of DIV because DIVs have never been fixed to act like the tables they were supposed to replace.

You might be interested in flexbox? There's a lot of capability there.

Benjamin Hall

@kazitor said in Something I hate about Chrome:

@Zenith said in Something I hate about Chrome:

I want to strangle the Cult of DIV because DIVs have never been fixed to act like the tables they were supposed to replace.

You might be interested in flexbox? There's a lot of capability there.

Or css grid? It's like tables, but better.

Applied Mediocrity

Upboat for Google "short bus". I hadn't heard this term before and I am looking forward to using it in casual conversations as soon as such opportunity presents itself.

Tsaukpaetra

@Zenith said in Something I hate about Chrome:

I want to strangle the Cult of DIV because DIVs have never been fixed to act like the tables they were supposed to replace

I've never heard it said that divs were meant to replace tables. In fact, to my knowledge, they literally mean nothing, until you give the meaning via classes or other styles.

Zenith

@Tsaukpaetra You haven't read any of the million hipster screeds frothing about how using tables for layout (because DIVs are so broken) is literally Hitler? They're even more numerous than "use jQuery" answers to how to do something without jQuery.

Benjamin Hall

@Zenith said in Something I hate about Chrome:

@Tsaukpaetra You haven't read any of the million hipster screeds frothing about how using tables for layout (because DIVs are so broken) is literally Hitler? They're even more numerous than "use jQuery" answers to how to do something without jQuery.

If you're using HTML for layout (directly), you're . That's what CSS is for. Even my high school, beginning students know that much.

And CSS doesn't really care which tag it is.

Tsaukpaetra

@Zenith said in Something I hate about Chrome:

You haven't read any of the million hipster screeds

No, I tend to not be that bored.

kazitor

@Benjamin-Hall Yeah, people who say that you shouldn't use tables for layout (like, everyone for the past decade at least?) aren't actually wrong. Don't do that.

divs aren't broken; they specify a division of the page and it ends there.

Benjamin Hall

@kazitor said in Something I hate about Chrome:

@Benjamin-Hall Yeah, people who say that you shouldn't use tables for layout (like, everyone for the past decade at least?) aren't actually wrong. Don't do that.

divs aren't broken; they specify a division of the page and it ends there.

Agreed. I use an application that's all nested tables. Like 6-7 layers of single-element tables. Ugh.

divs are your basic box. No behavior, no semantics at all. You can emulate tables with display: table, but why? Use the right CSS to begin with.

Zenith

@kazitor Then why do things like fixed footers and same-length columns and "fill remaining space" areas require so many hacks if they work at all?

And it still doesn't excuse Chrome from doing what it does in the picture. There's no reason fixed width columns should bloat because of a merged row that includes a fill column. It's sloppy, like drawing the background a few pixels too small because you ignored the border-collapse setting.

Benjamin Hall

@Zenith said in Something I hate about Chrome:

@kazitor Then why do things like fixed footers and same-length columns and "fill remaining space" areas require so many hacks if they work at all?

And it still doesn't excuse Chrome from doing what it does in the picture. There's no reason fixed width columns should bloat because of a merged row that includes a fill column. It's sloppy, like drawing the background a few pixels too small because you ignored the border-collapse setting.

None of those require hacks if you use CSS grid. DON'T USE TABLES FOR LAYOUT

Zenith

@Benjamin-Hall The reason people nest tables is because of stupid behaviors of colspan/rowspan and padding/margins. They're present in WinForms tables but nowhere near to the same extent as non-IE browser tables.

Pages that use tables for layout are often done by people who've asked how to do it with DIVs, been told they don't need the layout they want , and went back to tables instead of capitulating.

Benjamin Hall

@Zenith said in Something I hate about Chrome:

@Benjamin-Hall The reason people nest tables is because of stupid behaviors of colspan and rowspan. They're present in WinForms tables but nowhere near to the same extent as non-IE browser tables.

Pages that use tables for layout are often done by people who've asked how to do it with DIVs, been told they don't need the layout they want , and went back to tables instead of capitulating.

You're not understanding. Anything you can do with tables can be done better, with less work, and less hackery with CSS grid. My beginning HTML students learn grid. It works on anything that isn't ancient (ie IE). And if you're stuck on those browsers, use flexbox or display: table instead.

Then you don't need things like colspan and rowspan. Your layout looks like

HTML:

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <main ></main>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 100px auto 100px; /*or whatever your fixed lengths are */
  /* other styles */
}

main {
   grid-column 1 /span 3;
   /* other styles */
}

Or heck, if all you want to do is center the header, you don't even need 2 of the divs. Just add a class (say header) and

.header {
grid.column = 2;
}

and you're done. Spacing maintained, forever, no issues. Auto fills the screen, adapts to new layouts, 1% of the work and none of the hacks.

jimbo1qaz 0

if you have n columns and n+1 dividers, css grid indexes dividers from 1 to n+1. why not 0 to n?

Mentioned at https://news.ycombinator.com/item?id=14041367

PJH

@Benjamin-Hall said in Something I hate about Chrome:

And CSS doesn't really care which tag it is.

div {
	display:inline;
}
span {
	display:block;
}

topspin

@Applied-Mediocrity said in Something I hate about Chrome:

Upboat for Google "short bus".

Don't google the correspondingly named movie, though. It's definitely NSFW and may well not be to your taste.

Tsaukpaetra

@topspin said in Something I hate about Chrome:

@Applied-Mediocrity said in Something I hate about Chrome:

Upboat for Google "short bus".

Don't google the correspondingly named movie, though. It's definitely NSFW and may well not be to your taste.

Googled. Watched the trailer. Holy fuck is that flip phone? How old is this... Oh.

Seems pretty boring to me. Trailer sucked balls. Maybe the actual movie might be slightly better, but I doubt it.

Shoreline

@Zenith said in Something I hate about Chrome:

Cult of DIV

It really is a cult, isn't it? I remember being criticised for using tables for layout when in the very same job I'm having to layout HTML emails with - you guessed it - tables.

If there's more than one way to do the same thing, maybe the problem is with the language.

If different renderers render differently, maybe the problem is with the renderers.

This is why people who get snobby about frontend developers (often backend) can frankly suck my tiny, unsatisfying hermaphrodite genitals.

The memories though... I've never been able to layout tables to pixel-perfection across browsers. I remember trying to do this to IE7/FF compatibility back in '08. I didn't have access to the HTML. I say I didn't have access, I didn't have time to fiddle with the guts of the home-grown CMS.

ixvedeusi

@kazitor said in Something I hate about Chrome:

people who say that you shouldn't use tables for layout (like, everyone for the past decade at least?) aren't actually wrong.

Hahahahahah ha ha ... ha ...

I concede that now that one may be able to reasonably expect browsers to support css grid (which according to stackoverflow happened no more than 2 years ago), the situation has gotten a bit better. But before that, any reasonably complex layout that is trivial to achieve with tables was enormously frustrating and difficult to do with divs and css. And the "just use display: table" folks seem to all ignore that, in order to do that you have to lay out your html exactly as if it was a table, except you don't actually use table tags so you'll have to manually recreate the style of tables. So your choice was doing things Right and spend endless hours suffering through the twisted maze of horrors that is CSS, or and having a nice, functional and clean layout using a table within a few minutes.

In general, if you go the "use only CSS for layout" route, you can immediately abandon any hope of the size of elements automatically adapting to the size of the contents, any kind of automatic alignment, automatic adaptation to viewport size etc.

That's been my experience on the subject, anyway (disclaimer: I don't do web stuff for work, only as a hobby). As far as I can tell, the whole "separate structure and layout" mantra is mostly bullshit. I've rarely ever been able to do any significant changes to the layout of a web page by only modifying the CSS, it always requires modifications to both HTML and CSS (and most of the time some horrible, non-intuitive and kludgy CSS hacks), because you'll need to reorder the parts, add another invisible div here, remove that span, add another class which is strictly only relevant for layout, etc.

Zenith

@Shoreline What's hilarious is people that say the left is The Way and the right is an affront to God:

<div>                  <table>
  <div>                  <tr>
    <div></div>            <td></td>
    <div></div>            <td></td>
    <div></div>            <td></td>
  </div>                 </tr>
</div>                 </table>

Flexbox and grid don't support the browsers I want to support (like IE) and display:table is full of weird corner cases where it doesn't actually act like a table. I don't like how the Firefox and Chrome people basically throw up their hands and create new tags/styles instead of just making what they have work as expected, especially when Google throws away projects three times a day. All it does is make it difficult to support other browsers that aren't Chrome as if people thought Embrace-Extend-Extinguish and monoculture were only bad when Microsoft did it.

Benjamin Hall

@Zenith said in Something I hate about Chrome:

@Shoreline What's hilarious is people that say the left is The Way and the right is an affront to God:
<div>                  <table>
  <div>                <tr>
    <div></div>          <td></td>
    <div></div>          <td></td>
    <div></div>          <td></td>
  </div>               </tr>
</div>                 </table>
Flexbox and grid don't support the browsers I want to support (like IE) and display:table is full of weird corner cases where it doesn't actually act like a table. I don't like how the Firefox and Chrome people basically throw up their hands and create new tags/styles instead of just making what they have work as expected, especially when Google throws away projects three times a day. All it does is make it difficult to support other browsers that aren't Chrome as if people thought Embrace-Extend-Extinguish and monoculture were only bad when Microsoft did it..

IE is deprecated and unmaintained. Don't use it where possible, use a polyfill if necessary. DON'T inflict the unmaintainable, fundamentally broken model of nested tables on the rest of us who actually use software from this decade.

Tables are for tabular data. I can create a complex layout that responds to changes or various screen sizes easily (without needing extra javascript). It's also smaller, more easily modified and updated, less prone to random breakage (because it's not relying on what's essentially a private API), and takes much less time to do. Oh, and is more accessible to SEO (which will barf hard on nested tables), mobile friendly (if needed), and in general has all the upsides with none of the downsides.

The_Quiet_One

@Zenith said in Something I hate about Chrome:

@Tsaukpaetra You haven't read any of the million hipster screeds frothing about how using tables for layout (because DIVs are so broken) is literally Hitler? They're even more numerous than "use jQuery" answers to how to do something without jQuery.

I would assume you do not have a responsive website, then?

Zenith

@Benjamin-Hall said in Something I hate about Chrome:

IE is deprecated and unmaintained. Don't use it where possible, use a polyfill if necessary.

You know what's funny is that I used to quickly design sites that were perfectly readable and efficient in IE and then spend days hacking CSS and JavaScript (and occasionally VBscript/C# when something stupid propagated to server side) to get equivalent functionality out of Firefox, Opera, and Chrome. It was always easier to make IE do what I wanted than to fight the "standards compliant" browsers that picked and chose what standards to obey every bit as much as IE plus what they did for no other reason than "IE does X so we'll do Y instead." I was so far ahead of the curve in supporting these upstart browsers that casting me as a dinosaur for still supporting browsers over a month old is really unfair.

@The_Quiet_One said in Something I hate about Chrome:

I would assume you do not have a responsive website, then?

It's possible to design layouts that fit multiple screen sizes without resorting to a JavaScript DOM full of DIVs.

gleemonk

@Zenith said in Something I hate about Chrome:

It's possible to design layouts that fit multiple screen sizes

Yep, by using modern CSS instead of tables

dcon

@Benjamin-Hall said in Something I hate about Chrome:

None of those require hacks if you use CSS grid. DON'T USE TABLES FOR LAYOUT

It works (well enough). I don't have to learn CSS. So there!

Benjamin Hall

@dcon said in Something I hate about Chrome:

@Benjamin-Hall said in Something I hate about Chrome:

None of those require hacks if you use CSS grid. DON'T USE TABLES FOR LAYOUT

It works (well enough). I don't have to learn CSS. So there!

The Programming Confessions thread is . Doing anything user-facing on the web without using CSS is .

dkf

@dcon said in Something I hate about Chrome:

I don't have to learn CSS.

So don't. Hire a minion to do it for you.

da Doctah

@Benjamin-Hall said in Something I hate about Chrome:

None of those require hacks if you use CSS grid. DON'T USE TABLES FOR LAYOUT

Heck with that. Use IFRAME.

dcon

@dkf said in Something I hate about Chrome:

@dcon said in Something I hate about Chrome:

I don't have to learn CSS.

So don't. Hire a minion to do it for you.

For something I do for fun and free - not gonna happen! Besides, the table structure has survived for the last15 years with no change, If someone wants to donate their time, I'm very willing to accept. So far any calls for help have been met with crickets.

Gribnit

@dcon said in Something I hate about Chrome:

@dkf said in Something I hate about Chrome:

@dcon said in Something I hate about Chrome:

I don't have to learn CSS.

So don't. Hire a minion to do it for you.

For something I do for fun and free - not gonna happen! Besides, the table structure has survived for the last15 years with no change, If someone wants to donate their time, I'm very willing to accept. So far any calls for help have been met with crickets.

You could also learn some CSS, maybe. Just the tip.

Gribnit

@Zenith said in Something I hate about Chrome:

casting me as a dinosaur

It's mentioning jQuery these days that'll do that.

Benjamin Hall

@dcon said in Something I hate about Chrome:

@dkf said in Something I hate about Chrome:

@dcon said in Something I hate about Chrome:

I don't have to learn CSS.

So don't. Hire a minion to do it for you.

For something I do for fun and free - not gonna happen! Besides, the table structure has survived for the last15 years with no change, If someone wants to donate their time, I'm very willing to accept. So far any calls for help have been met with crickets.

You sound exactly like those old people cursing things for changing their workflow, even when their workflow was asinine and wasteful. Have enough pride in your own work to take a few minutes (seriously, it took me about an hour and I'm entirely self-taught in programming) to pick up something new instead of doing it the way out of laziness.

dkf

@dcon said in Something I hate about Chrome:

Besides, the table structure has survived for the last15 years with no change

So you can expect to amortise the cost of sorting out the CSS over 15 years?

CHUDbert

@Gribnit said in Something I hate about Chrome:

Just the tip.

Zenith

@da-Doctah I already called out the Cult of DIV and you want to summon the Church of NoFrames? WHAT IS WRONG WITH YOU.

Seriously, though, I like frames. It's great not to lose state in your navigation menu and have a constantly accessible toolbar/notifications. Who cares if it breaks precious navigation when 97% of the use cases are to click somewhere on the outer frame and see a short form on the inner frame (that launch dialogs or downloads if anything)?

@dcon said in Something I hate about Chrome:

For something I do for fun and free - not gonna happen! Besides, the table structure has survived for the last15 years with no change, If someone wants to donate their time, I'm very willing to accept. So far any calls for help have been met with crickets.

I was thinking of posting my layout and asking for somebody to do it in DIVs just to see if it could actually be done. But I don't want critiqued on my design ("you don't need...") or support requirements ("you don't need...") when it turns out that, yeah, I guess I did need tables to get that effect afterall.

loopback0

@Zenith TABLES ARE OLD YOU CAN'T USE OLD THINGS.

MrL

@Zenith said in Something I hate about Chrome:

Seriously, though, I like frames. It's great not to lose state in your navigation menu and have a constantly accessible toolbar/notifications.

Not to mention, they securely mediate, by design.

HardwareGeek

@dcon said in Something I hate about Chrome:

Besides, the table structure has survived for the last15 years with no change

This last time I did any major work on my personal site, CSS didn't even exist. Heck, my web "server" hasn't had a power cord plugged in since I moved in 2010.

Also, a fair amount of the stuff on my site is tabular:
Date, location, description
Date, location, description
Etc.

JBert

@Zenith said in Something I hate about Chrome:

Seriously, though, I like frames. It's great not to lose state in your navigation menu and have a constantly accessible toolbar/notifications. Who cares if it breaks precious navigation when 97% of the use cases are to click somewhere on the outer frame and see a short form on the inner frame (that launch dialogs or downloads if anything)?

I guess it depends on the use-case.

If it would be for a long manual I would surely like bookmarks and Back / Forward buttons to be working.

sockpuppet7

...

Tsaukpaetra

@Zenith said in Something I hate about Chrome:

Seriously, though, I like frames. It's great not to lose state in your navigation menu and have a constantly accessible toolbar/notifications. Who cares if it breaks precious navigation when 97% of the use cases are to click somewhere on the outer frame and see a short form on the inner frame (that launch dialogs or downloads if anything)?

FWIW iPads seem to hate frames. Our convention's registration software uses frames, and great fuckery happens literally everywhere...

Zenith

So I was doing this as a project to set up a storefront. I've been trying to set one up for about five years now. My hosting service's package manager (Fantastico, Softaculous, whatever) couldn't seem to install anything in a functional state so I had to roll my own. I had it ready to launch when Google pulled the rug out from under me and scrapped Checkout. I felt Checkout was harder than it had to be due to missing documentation and weird behaviors so I opened an Amazon seller account instead of going through that all again with Wallet. Every several months, there's some disgusting turn of events with the alternatives and I work on this until I fall down some rabbit hole and give up.

On the horizon, PayPal keeping the 3% on forced refunds, eBay demanding access to a bank account, and me having no place to sell online that isn't a ghost town, grabbing upwards of 20%, or both.

So I was looking at how popular shopping carts do payment processing. I was hoping they'd be easy to follow like PHPBB. Nope, every last one of them is MVC spaghetti. I don't know where the industry gets off complaining about nested tables being hard to read when it pumps out stuff like this in its stead.

hungrier

@Zenith said in Something I hate about Chrome:

I was thinking of posting my layout and asking for somebody to do it in DIVs just to see if it could actually be done.

Sure, it's easy. Here's how:

Replace all your <table>, <tr>, <th>, <td>, etc. tags with <div>.
Create a style.css file if you don't already have it, and link it in the <head> section of your page.

3. Add styling properties to the file in order to make it look and behave the way you want.

petercss.gif peter css

PleegWat

@hungrier said in Something I hate about Chrome:

@Zenith said in Something I hate about Chrome:

I was thinking of posting my layout and asking for somebody to do it in DIVs just to see if it could actually be done.

Sure, it's easy. Here's how:

Replace all your <table>, <tr>, <th>, <td>, etc. tags with <div>.

<table> → <div class='table'>
<tr> → <div class='table-row'>
<td> → <div class='table-cell'>

Create a style.css file if you don't already have it, and link it in the <head> section of your page.

div.table { display: table }
div.table-row { display: table-row }
div.table-cell { display: table-cell }

12 years ago I worked with an open source web project where the styling guy actually did this, to tables containing tabular data.

It ended up suffering from weird extra new-rows on slow hosts, probably due to incremental rendering, but I never got to the bottom of that (nor was I particularly incentivised to).

hungrier

@PleegWat said in Something I hate about Chrome:

the styling guy actually did this, to tables containing tabular data.

hungrier

Speaking of style sheet problems

Sometimes the article text on Mobilesyrup articles turns invisible

Shoreline

@Zenith said in Something I hate about Chrome:

Flexbox and grid don't support the browsers I want to support

@Benjamin-Hall said in Something I hate about Chrome:

Tables are for tabular data.

This is basically the problem. We end up creating awful WTFs because browser said so.

@Benjamin-Hall said in Something I hate about Chrome:

IE is deprecated and unmaintained. Don't use it where possible...

Unfortunately my current company process is client-driven development. For healthcare.

dkf

@Tsaukpaetra said in Something I hate about Chrome:

FWIW iPads seem to hate frames.

All the more reason to use them!

gleemonk

Semantic tagging always bringing out the ⋺— in people.

(How can there not be a Unicode codepoint for pitchfork? Oh I know, big corp lobbied against it so we can't usurp their ogliopoly of coerced data extraction. This is also why there is no codepoint for torch. I mean the one with 🔥 on it. Can't stage a revolution with a 🔦.)