CSS frustrations

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

User avatar
ucim
Posts: 5643
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

CSS frustrations

Postby ucim » Sat Feb 04, 2017 4:42 am UTC

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
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

Tub
Posts: 326
Joined: Wed Jul 27, 2011 3:13 pm UTC

Re: CSS frustrations

Postby Tub » Sun Feb 05, 2017 11:05 am UTC

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.

User avatar
ucim
Posts: 5643
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: CSS frustrations

Postby ucim » Sun Feb 05, 2017 7:44 pm UTC

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
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

Tub
Posts: 326
Joined: Wed Jul 27, 2011 3:13 pm UTC

Re: CSS frustrations

Postby Tub » Sun Feb 05, 2017 8:45 pm UTC

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.

User avatar
ucim
Posts: 5643
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: CSS frustrations

Postby ucim » Sun Feb 05, 2017 10:16 pm UTC

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
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

User avatar
Flumble
Yes Man
Posts: 1951
Joined: Sun Aug 05, 2012 9:35 pm UTC

Re: CSS frustrations

Postby Flumble » Sun Feb 05, 2017 10:50 pm UTC

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

User avatar
ucim
Posts: 5643
Joined: Fri Sep 28, 2012 3:23 pm UTC
Location: The One True Thread

Re: CSS frustrations

Postby ucim » Sun Feb 05, 2017 10:58 pm UTC

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
Order of the Sillies, Honoris Causam - bestowed by charlie_grumbles on NP 859 * OTTscar winner: Wordsmith - bestowed by yappobiscuts and the OTT on NP 1832 * Ecclesiastical Calendar of the Order of the Holy Contradiction * Please help addams if you can. She needs all of us.

Drumheller769
Posts: 729
Joined: Mon May 11, 2009 7:46 pm UTC
Location: ♞♞♞

Re: CSS frustrations

Postby Drumheller769 » Mon Feb 06, 2017 3:05 pm UTC

For help debugging stuff like this, use something like https://codepen.io/ or jsfiddle.
The Great Hippo wrote:Arguing with the internet is a lot like arguing with a bullet. The internet's chief exports are cute kittens, porn, and Reasons Why You Are Completely Fucking Wrong.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 7 guests