Page 1 of 1

CSS frustrations

Posted: Sat Feb 04, 2017 4:42 am UTC
by ucim
Ok, so I have this web page... and it has a bunch <ul> of buttons that when you click on them, they "do things". Most of them <li> are <a href> links, but some of them are <form> forms, because I need to use the POST method for them.

They are all CSS floated so that they will wrap as needed for narrow screen widths. To do this gracefully, they need to be the same height. When I make them look like buttons with CSS text decorations, they look fine and work fine.

But people don't like to read; they want pictures. So I made up a bunch of icons and put them on (most of) the buttons. I shrunk the text labels, wrapped them to three lines put them under the icons, and now they look like the buttons on an old-time cassette recorder. This is ok, they also take up less horizontal space that way.

I still need them to float and wrap, and they still need to be the same height. But they are not, because some are links and some are forms (and in both cases, most (or all) of the button needs to be clickable).

In the case of the links, I wrap the <a href...>label text</a> by replacing whitespace with <br> tags (based on line length) and ensure that each one is three lines tall (using extra <br> tags if needed. It works well. In the case of the forms, I set the CSS white-space property to normal (as opposed to nowrap). So the labels wrap naturally, though I can't make blank lines to push the button down to full size. I've given the <li> list elements (that enclose the form or link) a CSS width so they have something to wrap against.

However, the heights vary, because the way the browser handles a form is different from the way it handles a link. If I give the <li> elements a height I can get them to wrap, but for the buttons that have no icon I end up with ugly empty space on the button. I'd prefer them to be squat (one em high) so they stack elegantly.

I can give the <form> form a height in ems, but it doesn't use the same number as what the <a href> link uses, since forms and links are different. So, the wrapping gets hung up even though the buttons look the same size.

I suppose I could put logic in the php that generates the list of links that adds a height to each <li> element based on whether or not it has an icon, but that seems inelegant.

Am I overlooking something?

Jose

Re: CSS frustrations

Posted: Sun Feb 05, 2017 11:05 am UTC
by Tub
Don't rely on flowing text to determine an element's height, unless you set line-height, font-size and nowrap and are very sure about what you're doing. It's usually safer to start with a fixed box height, overflow: hidden, then fit the contents inside, instead of the other way around. This way, if something goes wrong, you'll have one ugly button instead of a broken page layout.

Otherwise, use your browser's DOM inspector (F12) to take a good look at all the elements inside your LIs. Chances are, you have some elements with a nonzero margin or padding in there.


Also, links to small example pages with the proper css/html generally make it easier for people to help you.

Re: CSS frustrations

Posted: Sun Feb 05, 2017 7:44 pm UTC
by ucim
Thanks - I ended up giving the box a height, which solved the problem. I put icons on the "thin" boxes, so they are now the same as the others. I could (in the php) set a different height (or better, a different style) for the thin boxes as they are generated so they'll stack, and that will be my ultimate solution.

I'm going to also check to see if I'm fighting myself. I suspect I set white-space: nowrap for links, and that's what made me write a function to insert <br> elements to manually wrap what should have wrapped automatically. It won't be the first time I've done something like that. :)

Edit: Yep, that's just what I did! Nothing like doing extra work to make the computer do extra work. :)

Good thoughts on the DOM. F-12 doesn't work for seamonkey, but it probably works on firefox (and if not, I'll find it somehow).

Tub wrote:Also, links to small example pages with the proper css/html generally make it easier for people to help you.
Alas, it's on my dev server, which is not online.

Jose

Re: CSS frustrations

Posted: Sun Feb 05, 2017 8:45 pm UTC
by Tub
If your boxes have a height, you can probably remove nowrap and the br's again. Font engines differ, and the browser can make better decisions about it.
ucim wrote:
Tub wrote:Also, links to small example pages with the proper css/html generally make it easier for people to help you.
Alas, it's on my dev server, which is not online.

You can copy the relevant snippets to something like jsfiddle.net. Simplified testcases are always good to figure out what's going on. Nobody wants to read through pages of unrelated html/css before finding the button code, anyway.

Re: CSS frustrations

Posted: Sun Feb 05, 2017 10:16 pm UTC
by ucim
Tub wrote:If your boxes have a height, you can probably remove nowrap and the br's again.
Yup. That's what I did. I'd been fighting myself.

I also discovered that if you have multiple classes:
<div class="featured sports">, the CSS for .sports will not happen if you have not defined CSS for .featured, even if it is empty.

.featured {}
is necessary and sufficient so that
.sports {color: red;}
will take effect.

Anyway, problem solved.

Jose

Re: CSS frustrations

Posted: Sun Feb 05, 2017 10:50 pm UTC
by Flumble
...but it does:

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        font-weight: bold;
      }

      .class2 {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="class1 class2">text</div>
  </body>
</html>

The text is both bold and with a red background, despite not having a class1 defined. (and just red if you remove the div rule)

Re: CSS frustrations

Posted: Sun Feb 05, 2017 10:58 pm UTC
by ucim
Flumble wrote:...but it does:

Ok, problem solved for now. Clearly I have to pull more hair out before I get to the bottom of why it's not working the way I thought it should have been working even though it's working now.

Alas, there are a lot of layers.

ETA: Found the problem. I was using a class called ICON, and I had another class called icon that did something else. So, when I renamed the classes so that they were (case-insensitive) unique, the problem went away. It would seem that the existence of an empty descriptor for the other class (buttons) disambiguated it, but absent that, it was happy eating from the other icon class description. But that theory doesn't hold up under simple testing either.

ETAA: So... I made test versions of the pages in question, and whittled it down as far as I could. I finally got to the point where removing a comment fixed the problem. Geez!

Closer inspection showed a stray } outside the comment where it should have been inside it, and it was just before the
.buttons {}
comment that seemed to be required.

So, all is as it should be.

Nonetheless, CSS is frustrating.

Thanks for the hints. :)


Jose

Re: CSS frustrations

Posted: Mon Feb 06, 2017 3:05 pm UTC
by Drumheller769
For help debugging stuff like this, use something like https://codepen.io/ or jsfiddle.