How can I vertical-align input top?

I've got a form with a multi-select dropdown in a line with other labels and text inputs.
Due to the dropdown's height the text after the dropdown and all the inputs but not the labels are aligned bottom.

How can I make *everything* on the line vertical aligned top?
https://codepen.io/SLSCoder/pen/ExdrGVz?editors=1100

<style>
.lblField {   
   display:inline-block;
  vertical-align:top;
}
.formTextBoxSm
{
   display: inline-block;
   height: 17px;
   font-size: 9pt;   
   background-color: white;
   border:.5px solid var(--Clr1Light);
   margin:0;
}
</style>
<div style='vertical-align:top;'><label class='lblField'>Month:&nbsp;</label>
<select name='TskSchIntervalDay4a' multiple='1' class='formListBoxSm' style='height:50px;'>
   <option selected value='1'>January</option>
   <option value='2'>February</option>
   <option value='3'>March</option>
   <option selected value='4'>April</option>
   <option value='5'>May</option>
   <option value='6'>June</option>
   <option selected value='7'>July</option>
   <option value='8'>August</option>
   <option value='9'>September</option>
   <option selected value='10'>October</option>
   <option value='11'>November</option>
   <option value='12'>December</option>
</select> select 4 months&nbsp;
<label class='lblField'>Day:&nbsp;</label><input name='TskSchIntervalDay4b' value='1' style='width:50px;' maxlength:'2' class='formTextboxSm'>&nbsp;&nbsp;
<label for='TskSchStopDate' class='lblField'>Stop Date:&nbsp;</label>
<input id='TskSchStopDate' class='formTextboxSm'style='width:50px;'>
</div>

Code (markup):

 

1) STOP using DIV to do FIELDSET's job.

2) STOP slopping style="" into the markup.

3) STOP designing in PX telling users with accessibility needs to go F*** themselves.

4) STOP setting heights on things that don't need it.

5) stop throwing classes at everything.

6) where's your for/id relationship and/or wrapping labels?

7) vertical-align when dealing with inline-level elements goes on those elements (your input), NOT the parent container.

8) STOP using non-breaking spaces to do margin, padding, or gap's job.

There is no reason for your markup to be much more than:

<fieldset class="task">
	<label>
		Select 4 Months
		<select name="TskSchIntervalDay4a" multiple>
			<option selected value="1">January</option>
			<option value="2">February</option>
			<option value="3">March</option>
			<option selected value="4">April</option>
			<option value="5">May</option>
			<option value="6">June</option>
			<option selected value="7">July</option>
			<option value="8">August</option>
			<option value="9">September</option>
			<option selected value="10">October</option>
			<option value="11">November</option>
			<option value="12">December</option>
		</select>
	</label><label>
		Day:
		<input name="TskSchIntervalDay4b" value="1" maxlength="2">
	</label><label>
		Stop Date:
		<input type="date" name="TskSchStopDate">
	</label>
</fieldset>

Code (markup):

... and really in this case, FLEX is your new best friend.

body, fieldset {
  margin:0;
  padding:0;
}

.task,
.task label {
  display:flex;
}

.task {
  flex-wrap:wrap;
  border:none;
  padding:1em;
  gap:1.5em;
}

.task label {
  white-space:nowrap;
  align-items:start;
  gap:0.4em;
}

.task input {
  flex-grow:0;
}

.task input[name="TskSchIntervalDay4b"] {
  width:1.5rem;
}

Code (markup):

https://codepen.io/jason-knight/pen/BaqeXjN?editors=1100

Note I added flex-wrap for when the display is too small to show them as a single row.

 

Jason thanks for your response.
I tried your solution. It worked great. Thanks.
I hate flex and had seen it as a solution but wouldn't try it.
I've got questions if you'd school me a bit:

"STOP using DIV to do FIELDSET's job":

why? I'm guessing by now you know I'm developing an app.
My 'fieldsets' generally take up a whole page and are often in multiple columns.
Does a fieldset give me the same/better functionality as a div? I'm thinking not.
What is the *advantage* of using a fieldset instead of a div?​

"STOP designing in PX ...":

You never did tell me why px chokes accessibility.
I noticed that you use em and rem for widths, margins, padding, ...
Those are font sizes. Why do you use that unit for widths & heights?
I'd like to find ways to make my css more flexible/relative, excepting printable reports.
I mostly use percentages for it now.
I'm interested in learning why you use em and generally how you determine units in css.​

"STOP setting heights on things":

Ah, you're referring to my input css. That code's at least 15 years old. It's evolved. Yea I probably don't need the height anymore.​

"stop throwing classes at everything"

Sometimes I'm leary of this: .task label because the children may need to be different based on circumstances.
Why is your way better? What's the advantage of not or the penalty for using another class?
​

"STOP using non-breaking spaces . . . ":

yea​

".task input[name="TskSchIntervalDay4b"]":

why this instead of just classing the input?
I like it I'm just wondering what the advantage is.
​

Your code is beautiful and it solved my problem.
Again, thanks.

​

 

Excellent questions all-around. See folks, this is what smart people do, they ask questions instead of screaming "wah wah, is not"

Flex is a LOT simpler, as can be grid. Especially with GAP greatly simplifying putting space between the elements, and flex-wrap giving us "auto-responsive" design.

Fieldsets are landings for non-visual navgiation, such as on a braille reader. They should group elements that have a common semantic relationship, such as a single row of items related to a single entity such as a database row.

If you're applying them to an entire massive page-sized form and everything in it, you're not getting why fieldset exists.

EM/REM is based on the user or device preference. That default 1rem could be anywhere from 12px to infinity on desktop, typically 14px to 24px on mobile, the 4k ten foot interface on the media center I'm goofing off on right now it's 32px, and for print it's commonly 12pt (aka 1/6th of an inch) though it could be larger or smaller depending on the device. Such as daisy wheel print where 10pt isn't uncommon. NOT that you see a lot of daisy wheels anymore!

The whole idea is that 1REM (and by extension EM) is based on that user preference be it set in the browser, in the OS, or on the specific device. PX doesn't do that. PT doesn't do that, and % is basically just "EM * 100". It not only brings you accessibility for working with a plethora of screen sizes, it also means you can stop worrying about specific layout and sizes across all media, not just "screen"

To that end PX is inaccessible trash, and PT kind of is as well now. Used to be we'd use PT because Firefox's zoom was trash and EM on FF didn't obey the OS setting whilst PT did... but that was fixed around 2005. Same as how REM always defaulted to 16px in FF making it useless for what EM/REM are even supposed to do. That was fixed around 2012, broken again in 2013, fixed in 2016, broken again in 2017, fixed again in late 2020. Thankfully they haven't re-broken it since.

Under the WCAG the only time PX passes accessibility is if you have full control over the user-agent (a browser is a UA but a UA isn't always a browser). That means in-house crapplets, data kiosks, and so forth... If it's web facing you don't have that type of control as you have no idea what browser it'll be running in or the user preference at the OS and hardware level... so just use 'em!

Also with in-house crapplets be careful, as accessibility violations against employees are even more strictly punished. You think some ambulance chaser is bad, try dealing with OSHA and state labor departments.

I have an entire Medium article about this. (where I bitch about FF and REM too)

https://levelup.gitconnected.com/accessible-fonts-please-stop-using-px-for-screen-f0df20efcf8c

Anything you can get out of the markup and into the stylesheet should be.. well, removed from the markup and into the stylesheet.

This is because larger markup is more work for the server, more work to zip and gzip, a violation of the separation of concerns, but worst of all? It pisses on caching models for revisits, pre-caching for subpages (especially if they share the same styles), and delays HTTP parallelism.

That last part can be really important. Servers and User-agents can handle multiple simultaneous HTTP/HTTPS connections This allows for multiple files to be downloaded in parallel on a page load burying "handshaking" of each file under the transfer time of others and better leveraging the packetized nature of TCP/IP or other transport protocols. (not that we see PPPOE a hell of a lot anymore)

And sadly, NONE of that parallelism starts until AFTER the markup is loaded. Nor does HTTP 2 Push (aka the artist formerly known as Google SPDY) or HTML oreliad fix that!

This smaller markup is always better so long as you don't compromise usability and accessibility along the way. And if you're using the correct semantics why would you need to move that name or class to something else?

As I'm always saying, the CORRECT approach to using front-end web tech is to let content dictate markup, content + markup + user/device limitations dictate layout, and accessibility dictate any further styling.

And that's why the people dicking around drawing pictures in Photoshop or Figma are NOT designers, no matter how much they use the word. They're artists under the DELUSION they know what design is. They don't!

Got an article about that too.

https://medium.com/codex/http-paral...nd-why-markup-bloat-is-the-enemy-ec043ed0733e

I'm actually working on a follow-up where the title is "Death to HTTP push, long live HTML preload!"

Thanks, small, clear, effective, and reliable code is something I strive for in every task. It usually keeps it simple enough for others to understand, rely upon, re-use, and most importantly learn from.

Though that's often hard when the techniques I use and advocate are often the opposite of the latest trendy, lazy, sleazy, disreputable "hot and wet dumpster fire" frauds created by people not qualified to flap their yap on the topic.

 

I read the 2 articles you cited. You do know you're an a***ole? lol
I thought they were both excellent. Your arguments to support your techniques are rock solid.
Generally, I'm sold (and that's not easy to do :-/).

For screen media:
No font-size on the body tag.
use em or occasionally rem units for fonts, widths, heights, padding, margins, etc.
px OK for border widths, icon sizes . . .
Keep markup file as small as possible to expedite download of subordinate files.
Use HTML 5 preload links to dictate priority of subordinate file downloads - 6 files max - the fewer the better.
Most importantly, watch out for the peanut butter fudge packers.

It shouldn't take too long to modify my app. It's only got 500 presentation files and the css is only 5000 lines.
I ought to be done before we make it to MARS!
Seriously, I think it's great advise and actually worth implementing. Thanks.

My app doesn't really fit your norm. My clients will use the same pages (interfaces) over and over.
If their first connection to it is a little slow it's not the end of the world. Everything will be cached after that.

So, I vaguely recall that your music preference is metal/gore - something like that?
I don't think you told me what instrument you play.

 

I'm just a regular Joe with a regular job.
I'm your average white suburbanite slob.
I like football, and porno, and books about war.
I got an average house, with a nice hardwood floor.
My wife and my job, my kids and my car.
My feet on my table, and a Cuban cigar.

Probably doing the job of around 2000 lines of CSS and at least half the HTML.

Actually that sounds exactly like it would fit my norm, since optimizing for caching models is a great deal of my reasoning. It's also why a lot of what people make "apps" out of shouldn't even be apps! They dive for SPA technology to make badly coded static sites "speedy and usable" where -- sadly -- that's sweeping problems under the rug instead of actually fixing things.

Not that I'm saying there aren't reasons to build apps, but a LOT of what people are making apps out of flat out shouldn't be. They get all hooked on stuff like react or vue, then blanket apply it to problems where it's a total task complexity mismatch. Then they throw more tools, tricks, and goofball nonsense at it instead of fixing the actual underlying problems.

Because they never learned enough HTML, CSS, or JS to recognize where they really goofed.

Actually I listen to damned near everything except commercial pop and country-western. Even then there are exceptions in every genre. Like I love Dolly and Tennessee Ernie Ford... Whilst FGL can sod right off.

I was a metalhead in high school who also had a huge Robert Cray and Albert Collins collection. Much less my having opened once for Michael Brecker at JVC '88.

Sax and EWI USB. I also do builds, lessons, and repairs for the school kids. I specialize in taking cheap as dirt Chinese horns, stripping them down to parts, re-padding them, matching up a better mouthpiece (usually a Yamaha 5C), turning a $300 amazon el-cheapo (mendini / cecilio) into the equivalent of a $1500 student model from a big name. $300 horn, $80 in parts, $120 in labor, save parents a grand on something that's just going to get broken and beat anyways.

My tenor:



And my Alto:



Green fights purple. Purple fights green. There is no other way.

Though a friend of mine joked they look like Borderlands loot drops.

A lifetime ago I had a pretty tight group "Frayed Edges", we did a number of Brecker Brothers and Richard Reiter covers.
https://cutcodedown.com/music/FrayedEdges_NewportJazzFest_1991_Song4.mp3
Excuse the hiss and occasional dropouts, that's off a handheld cassette recorder

Sadly it's hard for me to play now since Covid totally screwed up my lungs. I keep having coughing fits every 8 to 12 bars. The EWI helps with that though a it takes less air.

Late '90's I also had a side gig doing some studio work, arranging and transcribing to MIDI as well as doing some producing for some Boston area bands. Was one of the first things I did after losing the comfy fat office job at a major insurance company for having a conscience.

 

"regular Joe": I like it. Where in the world did you find that?

"Probably doing the job of around 2000 lines": Yep - I hope. It's still pre-beta so I've got a lot of clean up when I get it written.

"optimizing for caching models": You got an article on that? This is definitely an app.

"EWI-USB": That's pretty cool. I've got a synth for my axe. I've actually got 3 synths, 2 rack mounts & 1 w/ controller by Roland.
Your saxes are beautiful.

I'd say sax is my second/third favorite instrument, piano being the other.
I played trumpet throughout junior & high school, wish I'd played sax.
My sister plays sax.
​

You just do whatever you want for a living don't you? Yer just too smart man.

Then again, I held a journeyman electrical contractors license for 8 years; was a commercial construction electrician.
I quit and started teaching guitar full time.

I had 2 12 year old boys who played lead. They were fun. They practiced.
I had a 10 yr old beginning bass player who learned all of his triads in every key, major and minor - in 2 weeks!
I had a 15 year old bass player who I taught the triads and basic theory to. He learned quickly.
The rest (of 30) - I basically baby sat.
I hated the job. I quit.​

I opened a business with my x. We did graphic design & technical writing. My first tech writing job was for Disney World. They loved it.
Most of it was software help systems. I'm an author in a book:

https://www.amazon.com/Using-Visual-Foxpro-Que/dp/078970885X/ref=sr_1_2?crid=3IK0IHUH4BYQG&keywords=foxpro+5&qid=1685967481&s=books&sprefix=foxpro+5,stripbooks,126&sr=1-2​

I had to learn how to make 'help' for the active part of an interface appear on F1 click.
That's when I decided I liked writing software more than writing *about* software.
I got certified by Microsoft in VB 5.0 right after it came out and started working as a custom software consultant.
I hold a BA in Christian Theology and I believe though I'm not an *evangelical* Christian.

I'm 63 now and still learning every day.
So that's my story.
​

"no other way.": Yea, I can see that - green on purple = riot - she asked for it.

Jazz: I watched a bit of Mike Brecker. The chord progressions I heard didn't move much but the sax was beautiful.
"Frayed Edges": All the players were real good players. The bassist sounds like he could slip into funk. The sax is beautiful.
I'd love to see a chord chart of that piece. Maybe I could record a guitar improv over it.

So you're actually a pretty complex individual.
Originally I pictured a 22 year old, too smart, punk metal rocker with a general bad attitude and a bit of a puzzle.
Now I see why the puzzle. Yer a whole nuther animal.

 

Dennis Leary song from like 20 to 25 years ago. Late '90's.

My article on push / preload mostly covers it. More you move into external files, the more you can cache across pages that share the same style, and the sooner parallel downloads of sub-files can start. It's part of why CSS was created, and an equal measure of why idiocy like Bootcrap, Failwind, BEM, and so forth piss all over that.

Open up any site, open the document inspector, go to the "network" tab, disable cache (usually an option in the bar), hit ctrl-F5, and look at the waterfall of your files loading. No matter what you set -- push, preload, whatever -- NOTHING else can start until the HTML is complete. That's why things like "render blocking scripts" are equally bad. Why <style> should be avoided. Half of why style="" should be reserved for corner cases. And why slopping classes onto things that don't need them is pretty dumbass.

Growing up I had a chronic problem: Whenever I proved to myself I could do something, I lost interest and tried something else.

I actually think it's why programming has been one of the few constants. The big thing about writing code -- ESPECIALLY for the web -- is there's always something new to learn. It truly makes it special compared to other fields.

Must suck having to constantly suck up to an imaginary friend.

That's only half joking. It's meant as humor. I kind of have a zero tolerance policy around fairy tales that spew hatred and ignorance, but constantly try to CLAIM a moral high ground. As I often joke everything I need to know about the "flood of stupid" that sprang forth from the wellhead of Abraham is that the character (or three separate characters oft treated as one and the same) who gave us knowledge and punishes the wicked is the villain of the tale, but we're supposed to be on our knees constantly begging forgiveness from a cruel, vain, fickle, capricious genocidal rapist sky wizard? What a crock. For do not think that I came to bring peace on earth; but a sword.

Though a lot of that comes from my hyperactive ventromedial pre-frontal cortex. People with low function or outright dysfunction of that area are over-represented amongst religious extremists and terrorists. Those like myself with over-function are overskeptical, typically atheist or agnostic, and burdened with an overactive bullshit alarm. It also causes an over-empathy for victims and a complete disgust for scams and scam artists.

Sadly it also is the root cause of my non-24 sleep-wake disorder, and crippling headaches which is why I pop sumatriptan like they were pez.

Brecker actually inspired a number of rock/metal musicians, strange as it sounds. IF you listen to the Brecker Brothers album "Heavy Metal Bebop" -- which was made BEFORE the term heavy metal was commonplace used to describe metal music -- you'll find a lot of runs and patterns more common to guitar than sax or flute.

Like "Funky Sea, Funky Dew" (Where we laugh at the bassist)


He's also the first person I ever saw play a EWI. I was at this festival on the "amateur" facing stage.

https://www.youtube.com/watch?v=Raj3uW3u9ng

Brecker was always great when paired with Mike Stern (the guitarist), more so when Mike Manieri was involved. I actually took lessons in High School from Manieri one afternoon a month at BCM as part of the advanced track program. Sadly thanks to a bad home situation I took a different path.

https://www.youtube.com/watch?v=6HQa5so4Fow

Tim was an amazing bassist. He actually put the group together and did the arranging. Passed away back in '98 in his mid 40's. He actually played a lot of Funk. Was the one who introduced me to George Clinton a lifetime ago.

We got a real type of thing, going down, getting down. There's a whole lot of rhythm going round.

Wish I had it. It's a cover piece of one of Richard Reiter's numbers from his band "Crossing Point" off the album "Point of no return". First heard the song when Tim and I went to a concert in the middle of nowhere in Jersey, bought the album as concert swag. We named the band after that song.

Oh like these zoomers with their tone deaf auto-tuned computer mixed Kanye and Beyonce listen to metal.

Actually that's not entirely fair, some Mils and Z's get it -- see Liliac, Greta Van Fleet, and Ren.

Also don't let age and preconceptions shoehorn all metal as equal in your head. I'm also big into symphonic metal... Ever heard of Nightwish? Prepare for to have to pick your jaw off the floor when the singer -- Floor Jansen -- comes in.

https://www.youtube.com/watch?v=JYjIlHWBAVo

There's a reason I say Eilish's Grammy was a crime against music. Where's Floor or Simone's freaking Grammies? When is Sabaton going to get some recognition.

It's almost like music awards have nothing to do with music or talent, and instead is just whoever the record labels can spend the most money on promoting. FFS Poppy is more talented than Billie Eilish. Speaking of artists who'll continue to struggle to get out from under the BS schtick a "manager / producer" shoehorned her into because he was trying to replicate his ex girlfriend.

Queue some pedant screaming "off topic" when it's your thread and we're just talking. How dare there be actual forum activity... let's face it, it's pretty dead 'round most forums these days.

You can probably also tell I'm an X-er, given the amount of "pop culture tourettes" in this post. So... like... whatever.

 

I don't remember that Leary tune. It's cool though. Somebody needed to run him over lol.

I really like the waterfall. I use the Chrome inspector all day every day and I've never really spent time to study it.
I use the console & element inspector mostly and depend on it to disable cache.

The key part of my app is sometimes initiated from javascript using cross-site ajax.
That is, my client's webpage calls my server via javascript ajax which then downloads all the files necessary to run my app on their server.
In this case the original html page is loaded and my javascript on the client's webpage executes immediately.
I'm interested in looking at your waterfall while that's happening.

I've got that chronic problem too and my dad was a lot worse - jack of all trades.
With software design you're right. You can never stop learning because it keeps changing.
I don't even know how many ways I've learned to connect to a database. My first was dbase.

*****
So my imaginary friend ... Yea, that's a nasty subject primarily due to lack of understanding in all of us.
The biggest concept in my theology is "I don't know but I don't think you do either".
Exodus 21:17
"Now go, attack the Amalekites and totally destroy all that belongs to them. Do not spare them; put to death men and women, children and infants, cattle and sheep, camels and donkeys.’" Yea, that's genocide. That was after God said "You shall not murder.".

Christian theologians make theology up and then insist that it's God's gospel truth. All the other Christians just follow them.
You can't debate with a Christian. Logic, reason, facts are irrelevant. Some of the best people I've ever known are Christians though.

I studied the 'synoptic' Gospels in Greek in my sophomore year and learned that the Bible is *not* the 'infallible Word of God' though my PhD professors, all but one, insisted that it was. My philosophy prof (PhD Theology & PhD Philosophy) admitted there was a problem.
So I went to God at about 1:00 AM in my sophomore year. I thought I knew a 'person' who was God; God's spirit they say.
I said "I'm praying to the God of Abraham, Isaac and Jacob and not to some figment of my imagination."
I said "I don't know how you can convince me that you are the person I think is you are or that you are even real at all but I'm just a human and if you really are God you do know how.".
I told him he could show me a 90 foot tall angel of light and it wouldn't help because I knew my mind could make it up.

I waited for an answer and didn't get one. I cussed at God and spun around and started back up the hill toward the girl's dorm.
Half way up that hill I felt God's presence on me real strong (I know, it's insane but it feels better than morphine).
SHE told me in English "Marl I love you". It was the 'person' I thought was God but feared was my insanity.
I screamed (1:00 AM right between 2 dorms) "NO!" because I was scared she wasn't real.
She said it again, clear as a bell "Marl I love you."

It wasn't enough. I spent the rest of my life an agnostic until March of 2013.
In March, 2012 I was diagnosed with cirrhosis of the liver, stage IV and hepatitis C.
They gave me 2 years max and told my wife I'd probably bleed out before that.
The liver can't pass the blood, it goes through alternate veins (varicose veins) which explode and you die.
In March 2013 it happened again except this time it was really profuse.
I *filled* the toilet with rich red blood 5 times in 1/2 hour.
Ask a hepatologist what the outcome is - "he's a dead man".
I was a confirmed agnostic. I had concluded that I didn't know if God was real or not and I never would.
I didn't pray. I told myself I'm going to die now and it's OK. I really was fine with it.
I wasn't worried about Hell because I had done everything possible to believe in that insane God.
Out of the blue I felt God's spirit come on me stronger than ever before.
It was like he was saying "now tell me this isn't real" but that's not what he said.
HE simply said "it stopped" and his spirit was gone.
For the first time in my life I 'believed' in the God of Moses, instantly. I knew he was real and I knew that the bleeding had stopped.
I never bled again, I went to ER and spent a week in ICU and I was completely calm the whole time.
My incurable hepatitis was cured by a new drug called Harvoni - 3 months, a pill a day and it was gone.
I went through a very successful liver transplant in 2017 and I'm perfectly healthy now.

You will never convince me that the God of Moses isn't real and that eventually we will *all* answer to him.
If you read Leviticus you're reading the law of Moses which was, as the story goes, written by the finger of God in stone.
Read it sometime and ask yourself if it looks fair, just, ethical. If you're pro Pride Month you will at least find fault in him on that.
He doesn't think like us. He doesn't view death the way we do. I'm convinced that nobody is ever going to cease to exist. I think we grow forever.
I could go on and on and on . . .
***

That Brecker piece was a lot more comprehensive than the first one I heard on YouTube. It's not hardcore jazz. It largely uses natural pentatonic & diatonic scales.
I like it. I prefer music with natural harmony. It'd take a bit to learn that piece by ear.

I'll have to check out Crossing Point or another one of Brecker's tunes and see if I can put some guitar to it.
I've never heard of Symphonic Metal or NightWish. I loved it. The girl was really pretty and her voice is beautiful.
I did hear metallic overtones but I couldn't really call that metal; too complex; very cool.

"Eilish's Grammy" ya sound like a WWW wrestler :-/

Off topic? Really? We're on topic - we just switched topics.

You're an interesting character and you've been a lot of help to my app
Thanks

 

deathshadow: WAY off topic

It finally hit me who Michael Brecker is.
Joni Mitchell, Pat Metheny, Jaco Pastorius and - Michael Brecker


Yea, he's a great player.
Still hoping to see a vid of you playing.