CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Logo misplacement in forums header using chromium  (Read 3526 times)

mmerlinn

  • Jr. Member
  • **
  • Posts: 77
  • Karma: +9/-0
  • Nutcake
Re: Logo misplacement in forums header using chromium
« Reply #15 on: 21 Jun 2020, 10:33:52 pm »
As far as I know IE5.2 never existed for the Mac.  IE5.1 does exist and I have it on my Mac next to this Windoz machine. And IE5.1 still works for SOME sites - I just checked it for the first time in two years.  Have always detested IE5, but for some sites it was my only choice.
The soul purr pus of a spell cheque cur is two valley date hour ignore ants.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #16 on: 22 Jun 2020, 01:05:24 am »
As far as I know IE5.2 never existed for the Mac.
It was the last one ever made... and the one that's most common and held on the longest. I believe the most recent version for Mac was 5.2.3, and it even had an OSX specific build... though 5.1.7 is likely the last one for old-school MacOS.

A version most web developers stopped supporting some time around 2005, same time we stopped caring about Netscape 4.x
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

fgm

  • Jr. Member
  • **
  • Posts: 60
  • Karma: +5/-0
Re: Logo misplacement in forums header using chromium
« Reply #17 on: 22 Jun 2020, 05:36:13 am »
I confirm the problem is fixed :). Thank you!

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: Logo misplacement in forums header using chromium
« Reply #18 on: 22 Jun 2020, 11:57:29 am »
I was curious so decided to have a go...


https://this-is-a-test-to-see-if-it-works.tk/cutcodedown/logo-misplacement/index-003.php

Code: [Select]
<?php declare(strict_types=1);
$forum  'Logo misplacement in forums header using chromium';
$fLink  'https://forums.cutcodedown.com/index.php?topic=271';
$src    '<dl><dt> Source </dt><dd>'
        
.   highlight_file__file__TRUE)
        . 
'</dd></dl>'
        
;

?>
<!DOCTYPE html><html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>CUTCODEDOWN</title>

<style>
h1 a      {text-decoration: none;}
h1 small  {font-size: 0.50em;}
h1        {
  font: bold italic 250%/110% tahoma,arial,helvetica,sans-serif;
  width: 9.6em;
  padding: 0.21em 0 0.1em ;
  line-height: 0.60em;
  text-align: left;
  background: #fafafa url(h1LogoLegacy.png);
  background-position: top right; /* Center the image */
  background-repeat: no-repeat;
  background-size: 102px 68px; /* Ration 1.5 = ORIGINAL SIZE */
  background-size: 105px  70px;
  outline: solid 1px red;
}
dl {border: solid 1px #888; padding: 1em; width:88%; margin: 2em auto;}
</style>

</head>
<body class="bd1 hasExtraFirst hasExtraSecond elementals">

<p>
  <a href="<?= $fLink ?>"> Forum: <?= $forum ?> </a>
</p>

<div class="heightWrapper" id="top">
  <div id="pageHeader">
    <div class="widthWrapper">

      <h1>
        <a href="https://cutcodedown.com/">
          Cut<span>Code</span>Down
          <small>Minimalist Semantic Markup</small>
        </a>
      </h1>
 
    <>
  <>
<>

  <?= $src ?>

</body>
</html>

-- edited by Jason Knight, reason: fixed code formatting. There is no SIZE, or COLOR bbCode support on this site. I disabled it for being annoying crap that just pisses me off. Likewise SMF has no "source", just "code".
« Last Edit: 23 Jun 2020, 01:26:18 am by Jason Knight »
Retired in the City of Angels where the weather suits my clothes

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #19 on: 22 Jun 2020, 10:11:54 pm »
I was curious so decided to have a go...
It's often fun to try and re-do someone else's concept.

Your's is utterly banjaxed here, you mixed PX with dynamic fonts... so it's about half the size it should be. Works great on a "regular/16px" system. On my 20px workstation and 32px media center, not so much.

Said scaling being why it's a 2x resolution image.

-- edit --

Just to show you what I mean, I hopped on the media center where the effect is most extreme. There is no "zoom" applied here, just the dynamic scaling %/em are there to provide for.



Remember, PX is for morons and fools who want to get sued now that Domino's legal and web development incompetence has painted a target on every business owner's back.
« Last Edit: 23 Jun 2020, 01:22:06 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: Logo misplacement in forums header using chromium
« Reply #20 on: 23 Jun 2020, 11:28:35 pm »
Quote
from Jason Knight
It's often fun to try and re-do someone else's concept.

Your's is utterly banjaxed here, you mixed PX with dynamic fonts... so it's about half the size it should be. Works great on a "regular/16px" system. On my 20px workstation and 32px media center, not so much.

Said scaling being why it's a 2x resolution image.


This moron successfully tested the responsiveness on umpteen browsers and all zoomed as expected?

If it is possible I would be grateful if you could supply relevant instructions on how to emulate your system.

I look forward to correcting the errors.
« Last Edit: 23 Jun 2020, 11:33:21 pm by John_Betong »
Retired in the City of Angels where the weather suits my clothes

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #21 on: 24 Jun 2020, 09:56:33 am »
This moron successfully tested the responsiveness on umpteen browsers and all zoomed as expected?
You used one word that gives away why you're not grasping this. It isn't zoom.

Go into any browser and manually set the default font-size to 32px, or do it at the OS level. Under windows 10 you need to enable legacy scaling since they try to shove their new "broken" scaling down your throat, resulting in blurry fonts and broken layouts when you try to go past 120%.

There is a new scaling tech -- and *nix is starting to do this too -- that is actually just zoom, and it's broken crap for users with accessibility needs.

Hence the folks who made XPExplorer -- a great utllity that makes task manager look like a toy -- created this:

http://windows10-dpi-fix.xpexplorer.com/

Which forces Windows 10 to revert to the Windows 8.1/earlier behavior so users with accessibility needs aren't bent over the table by Microshaft's unnecessary changes to the UI.

Though firefuxxors continues its longstanding tradition of being accessibility crap. It's like their dev's are intentionally anti-user.

Correcting the errors is easy. Don't use PX for anything more than the occasional border or shadow. Don't use it for padding, don't use it for margin, don't use it for widths or heights. It's called EM, use 'em.

Just to remove confusion across my codebases I also stopped using % for font-size and line-height the past couple years. They're functionally identical to EM just *100, so just use 'em.

If you set background-size:3em 2em; instead of the px measurements it works fine.

Remember, the whole point of EM is to dynamically scale to the system or browser default font-size, while NOT scaling PX level elements since they could become blurry if they are native resolution instead of over-sampled / 2x / or vector. Thus I used a 2x scale image to allow up to double the scale needed without it getting blocky or blurry, and why you declare it in EM. If it were an image the size actually used on the page at normal fonts, I wouldn't even be trying to scale it.

NOTE, in the live copy I hid it behind a "@media(min-width:1px) {" media query so IE8 and earlier don't get the image at all, since they don't support background-size. I should probably do similar for FF8/earlier since apparently I have a user who's still using MacOS 9 like it's still 2002. :D
« Last Edit: 24 Jun 2020, 10:39:53 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: Logo misplacement in forums header using chromium
« Reply #22 on: 27 Jun 2020, 11:20:38 pm »
Here we go, PX replaced with EMs and a few other minor adjustments:

https://this-is-a-test-to-see-if-it-works.tk/cutcodedown/logo-misplacement/index-0033.php
Retired in the City of Angels where the weather suits my clothes

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #23 on: 28 Jun 2020, 02:50:39 pm »
Here we go, PX replaced with EMs and a few other minor adjustments:
You've got the image at the wrong aspect ratio, 2:1 instead of 3:2. The fixed width also not just introduces the problem my original had, but on most systems creates too big a gap.

Your use of line-height is also confusing... you set a 21.5em line-height, then override it with 0.6em which is SMALLER than the font-size. Hence the text is even blowing out of your pink container. It's also a really bad idea to go metricless on font-size. Line-height there is a reason to go metricless, but it can be buggy so one might as well spend the extra two characters.

Removal of the BR doesn't give the semantic break in flow and impacts non-CSS meaning of the tagline. Remember, SMALL might mean de-emphasis grammatically, but it's not block-level semantic.

.. and it's not likely to work with float which is an essential part of the markup since everything after the logo is aligned right without float. That's why float + padding was part of it.

And you're using the painfully low-res version of the image that I'm actually getting rid of moving forward.



Hence in my current rewrite (which will be done when it's done, I've got paying work ahead of it) the markup ends up:
Code: [Select]
<header id="top">
<div class="widthWrapper">
<h1>
<a href="#">
CUT<span>CODE</span>DOWN<br>
<small>Minimalist Semantic Markup</small>
</a>
</h1>
<p>
Remember, there's stuff that goes on this side.
</p>
<!-- .widthWrapper --></div>
</header>

With this CSS:

Code: [Select]
#top {
text-align:right;
background:#036;
color:#FFF;
}

.widthWrapper {
overflow:hidden; /* wrap the float */
max-width:100em;
padding:0 1em;
margin:0 auto;
}

h1 {
float:left;
display:inline; /* prevent IE margin issues */
  font:bold italic 2.5em/1.1em "segoe ui",arial,helvetica,sans-serif;
  margin:0.5em 0;
}

h1 a {
text-decoration:none;
  color:#FFF;
}

h1 small {
display:block;
font-size:0.5em;
padding-bottom:0.25em;
  font:bold 0.58em/1.1em "segoe ui",arial,helvetica,sans-serif;
}

h1 span,
h1 small {
color:#BDF;
}

@media (min-width:1px) {
/*
pre-CSS3 browsers can't do background-size so use
a media query to not waste time sending it to them.
*/
h1 {
padding-right:3.2em;
background:url(h1Logo.png) center right no-repeat;
background-size:3em 2em;
}
}

Which goes a little something like this:


We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #24 on: 28 Jun 2020, 03:22:10 pm »
Oh, just to give folks a preview, this is the next-gen version of the logo that will likely be implemented shortly after elementals.js 4 drops.



Since Elementals too has a new logo for 4, and the site will also have a day/night toggle.

Day theme:



Night Theme



Amazing part is that's all HTML + CSS generated.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

mmerlinn

  • Jr. Member
  • **
  • Posts: 77
  • Karma: +9/-0
  • Nutcake
Re: Logo misplacement in forums header using chromium
« Reply #25 on: 28 Jun 2020, 05:01:53 pm »
Personally, I do not like the looks of your new logo for CCD.  Elementals logo seems ok to me but I would not be a fanboy of it.
The soul purr pus of a spell cheque cur is two valley date hour ignore ants.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #26 on: 28 Jun 2020, 10:44:07 pm »
Personally, I do not like the looks of your new logo for CCD.
Still playing with the spacing and alignment, much less the outline which I think I'm pulling entirely.

Elementals logo seems ok to me but I would not be a fanboy of it.
It looks better on the page than it does on its own.

Day:
https://cutcodedown.com/images/Elementals4_sitePreview.webp

Night:
https://cutcodedown.com/images/Elementals4_sitePreviewNight.webp

We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Logo misplacement in forums header using chromium
« Reply #27 on: 29 Jun 2020, 03:11:13 pm »
With the CCD logo, tightening up the spacing and the scale of the image to the text, along with increasing the depth of the linear-gradient, and swapping text outline for text-shadow works wonders to make it look better.



Though the forums forcing all images to available column width isn't helping. I'm gonna add that to my laundry list of things to fix around here.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

fgm

  • Jr. Member
  • **
  • Posts: 60
  • Karma: +5/-0
Re: Logo misplacement in forums header using chromium
« Reply #28 on: 30 Jun 2020, 06:55:37 am »
It looks great, congratulations. It's amazing this can be done with just a font and CSS3.

 

SMF spam blocked by CleanTalk

Advertisement