Atom inconsistent color coding

Kirby 3 Solved ✅
1

Hi, Sorry if I’m in the wrong forum - but I don’t know where to go.
I’m using Atom as my editor for Kirby 3 .
Can someone please explain the color coding for this snippet and if there’s an error

color-code
color-code.JPG1558×851 100 KB

Thanks for any help

2

Your closing center tag doesn’t have a corresponding opening tag. But honestly, the colors are there to figure this out yourself… Also, if you click on a tag, you should be able to see if there is a counterpart.

The center tag is obsolete, btw.

3

Thanks Sonja,

Yes you’re 100% right - it was just one of those starring at it for hours without seeing - and knowing you’re there!

4

I’m still stumped - I’ve removed the center tag, but the problem is that the tag on line 2 is red - and there’s no offending tags before that.

5

Tip: If you make sure that your indentation is correct and consistent, it will be a lot easier to spot such issues.

6

The please post your code as code, not as image.

7 
<?php snippet('header') ?>
<body>
  <div class="HolyGrail-body">
  <main class="HolyGrail-content">
       <div style="margin: 0 auto; width: 55%;">
          <?php if($image = $page->image()): ?>
            <img src="<?= $image->url() ?>"
            style="margin-top: <?= $image->mTop() ?>; margin-left: <?= $image->mLeft() ?>; width: <?= $image->Wsize() ?>" alt="">
              <?php endif ?>
      </div>
  </main>
    <!-- HolyGrail-nav  -->

    <nav class="HolyGrail-nav" style="background: #DBD5CD; position: absolute; left: 1vw; top: 3vh;">
      <a class="logo" href="<?= $site->url() ?>">
        <h2>
          <?= $site->title() ?>
        </h2>
       </a>
  <?php foreach ($site->children()->listed() as $subpage): ?>
     <a style="font-size: 1.5em" href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a><br>
    <?php endforeach ?>
    <div>
    <button style="width: 12vw; position: absolute; left: 10px; top: 610px; font-size: 1em;"" type="button">
      Inquire about buying <br> this painting </button>
  </div>
  </nav>
<!--  end side bar -->
<aside class="HolyGrail-ads">
  <?= $page->text() ?>
  <h2 style="position: absolute; right: 4vw; top: 3vh">
      Oil Paintings
  </h2>
    <?php if ($page->hasPrevListed()): ?>
  <a href="<?= $page->prevListed()->url() ?>"><p id="triangle-left"></p></a>
  <?php endif ?>
  <?php if ($page->hasNextListed()): ?>
  <a href="<?= $page->nextListed()->url() ?>"><p id="triangle-right"> </p></a>
  <?php endif ?>
<div style="font-size: 1.5em; width: 12vw; min-height: 8vh; background: white; color: grey; position: absolute; right: 1vw; bottom: 5vh; padding-top: 10px; padding-left: 10px; box-shadow: 10px 10px 7px -3px rgba(150,147,150,1);">
  <?= $image->Title() ?><br>
  <span style="font-size: 0.75em">
  <?= $image->WxH() ?>
  </span>
</div>
</aside>
</div>
<?php snippet('footer') ?>
</body>
8

I think the problem may be my Atom settings - I’m checking

9

There are two closing quotes after the style attribute in this line:

<button style="width: 12vw; position: absolute; left: 10px; top: 610px; font-size: 1em;"" type=" button">
                    Inquire about buying <br> this painting </button>

BTW: Do not use inline styles, unless really needed (e.g. if you have to insert a background image). Everything else should go into your stylesheet. This will also make your code much more readable and easier to spot issues.