CSS issue (2) [well... HTML, really!]


#1

Ok, let’s play spot the difference! ; )

And if you need “help”, the cue is in the HTML (<br>)! More seriously, which do you prefer? I appreciate that to some perhaps it’s an extremely minor detail, but I very much think that the second option looks better. In other words the option with a line-break after “app”.

Any thoughts/comments anyone?


#2

Agreed. Minor semantic detail but it does make the lines read a little easier…


#3

You can put ‘‘or’’ inbetween them, wouldn’t that be better? That is how I picture it.

2


#4

Have you tested it in multiple browsers. From experience I thought IE rendered BR different to FF and Chrome.

I would usually try to avoid BR, I actually thought it was a deprecated tag, but I’ve just read it is not depreciated. That’s html bigotry for you.

Personally I would always go the CSS route and avoid BR where possible.

Long story short, as both versions are so similar, I’d suggest you test multiple browsers instead (including recent older versions if you can be bothered) and use the style or tag that give most similar output across all tested browsers.

Also, it looks like you are using inline style instead of seperate external CSS stylesheet file.

Consider learning external stylesheet (CSS) which you can use globally across pages and/or elements which will also cut CSS redundancy and duplication and make page load times marginally faster and more efficient.


#5

I also like the ‘or’ option above, but capitalise:
Scan with App
or
Click to Pay

Just looks better balance of caps and lower case, highlighting and capitalising more important words.


#6

Yes, it can be emphasized in different ways, I just wanted to give an idea.


#7
  • Yes, good old <br> is still around ; )
  • Agree with you re: CSS and use of external stylesheets, etc.—indeed obviously the way to go, however: the code above is “built” via the etn.vendor-widget-X.X.X.js, so I feel like saying: “It wasn’t me!” :wink:

// Create the label button
let labelButton = document.createElement(“div”);
labelButton.innerHTML = text;
labelButton.style.marginTop = “15px”;

  • Naturally, looked at this in different browsers, however, since the styling is ever-so-specific/rigid—for the obvious reason, I guess, of consistency—that’s extremely likely to make any difference (I haven’t checked all browsers)

#8

Oh, and there’s the issue of the line-height ; )

I’d say this is even better (+inc. @Jo_Boo’s capitalisation suggestion above)

image


#9

Whatever you think it’s better for the purpose you’ve got to accomplish. :slight_smile:
But imo, they are a bit overcrowded. And on three separate lines, the normal user can observe the two options given in a better maner.
You can squeeze the three lines a bit, so that there wouldn’t be that much of a space between them.
But for that, CSS is best ofc.


#10

Right, but the issue here is that this should really be decided and adjusted/modified by the team. It’s not right/good practice to be making your own adjustments as an “end-user”, as any updates will always overwrite those. Also, the QR code presented should be basically the same everywhere as “part of the brand”.


#11

But this is ETN’s or you just want to create one of your own?


#12

This is about the “official one”, as will be used by most.


#13

Ok so they haven’t finished it yet or they want to change it?
I am not fully sure why this is necessary.


#14

how DARE you put styling in the HTML !!! :smiley: :smiley: :smiley: :smiley:


#15

It is already as stylish as one can get. :smiley: