Re: Chrome on Windows 10 error ?

From	"Jonathan N. Little" <lws4art@gmail.com>
Newsgroups	alt.html, comp.infosystems.www.authoring.html, comp.infosystems.www.authoring.stylesheets
Subject	Re: Chrome on Windows 10 error ?
Date	2025-09-12 12:52 -0400
Organization	LITTLE WORKS STUDIO
Message-ID	<10a1j3s$3m3pr$1@dont-email.me> (permalink)
References	<109r7fd$1fe72$1@dont-email.me> <109scft$1uehc$1@dont-email.me> <109smfv$21t9u$1@dont-email.me> <109t7dn$27ba9$1@dont-email.me>

Cross-posted to 3 groups.

Show all headers | View raw

Dale wrote:
> 
> Got iPhone Safari Browser to load my site.
> 
> https://www.dalekelly.org/
> 
> Same error happening as with iPhone Chrome Browser.
> 
> Problems with the pixel map of the main image on my HOME page.
> 
> Once again, on the computer it works, even when I size the browser to
> the smallest size.
> 

I have been watching you struggle with this for some time now. May I
suggest simpler, more flexible way that would do what you wish but work
in more browsers and device. below it a mock-up with both HTML and CSS
you could copy and paste in a blank HTML file to demo. I linked to your
your image, but you would want one without the "links" in the image.
This method is more flexible and you can add or remove "map pins"
without needing a new image. Also you could have a larger "map" and it
would still work when responsively scaled on mobile devices. Note
comments in code.

<!-- start copy of code below this line -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Optional Route</title>
  <style>
    /* Mock website css, not important further look below */
    body {
      display: grid;
      grid-template-columns: 1fr 3fr;
    }

    h1,
    aside {
      color: hsl(0, 0%, 100%);
      background-color: hsl(225, 2%, 51%);
    }

    main {
      padding: 1em;
    }

    ul {
      list-style: none;
      margin: initial 0;
      padding: 0;
    }

    li {
      margin: initial 0;
      padding: .5em;
    }

    li:first-child {
      color: hsl(0, 0%, 0%);
      background-color: hsl(0, 0%, 100%);
    }

    /* The Alternative Option css below */
    .imagemap {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: bold;
      font-size: 2rem;
      position: relative;
      width: fit-content;
      margin: 0 auto;
    }	

    /* This will make image responsive for mobile */		
    .imagemap img {
      max-width: 100%;
      height: auto;
      vertical-align: middle;
      background-repeat: no-repeat;
      background-size: cover;
      shape-margin: 1rem;
    }

    .pin {
      position: absolute;
      display: inline-block;
      color: hsl(0, 0%, 0%);
      background-color: hsla(0, 0%, 90%, 570%);
      padding: .25em;
      border-radius: 10px;
      min-width: 1.5em;
      text-align: center;
    }

    .pin:hover,
    .pin:active {
      color: hsl(0, 0%, 100%);
      background-color: hsl(0, 0%, 0%, 50%);
    }

    /* Use % so pins location stable if image is resized by viewport */
    .pin1 {
      top: 1%;
      left: 35%;
    }

    .pin2 {
      top: 5%;
      left: 5%;
    }

    .pin3 {
      top: 5%;
      left: 65%;
    }

    .pin4 {
      top: 60%;
      left: 35%;
    }
  </style>
</head>

<body>

  <aside>
    <ul>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
      <li>NAV LINKS</li>
    </ul>
  </aside>

  <main>
    <h1>Alternative Option</h1>
    <!--Alternative HTML -->
    <div class="imagemap">
      <img src="https://www.dalekelly.org/images/longbeard.jpeg"
alt="Dale Longbeard" width="443" height="785">
      <a href="https://en.wikipedia.org/wiki/Universalism" class="pin
pin1" title="Universalism">1?</a>
      <a href="https://en.wikipedia.org/wiki/Mysticism" class="pin pin2"
title="Mysticism">2?</a>
      <a href="https://en.wikipedia.org/wiki/Mediumship" class="pin
pin3" title="Mediumship">3?</a>
      <a href="https://www.dalekelly.org/weblog.html#video" class="pin
pin4" title="Videos">4?</a>
    </div>
    <!-- End of Alternative HTML -->
  </main>

</body>

</html>
<!-- End copy of code above this line & paste into blank HTML file -->

-- 
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Thread

Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:56 -0400
  Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 02:59 -0400
  Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 13:28 -0400
    Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 16:19 -0400
      Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-10 21:08 -0400
        Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 12:52 -0400
          Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 14:21 -0400
            Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 14:45 -0400
              Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 17:35 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-12 18:45 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-12 20:51 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 01:15 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:07 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 08:37 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 10:54 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 11:14 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 16:08 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 16:45 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 18:41 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-13 21:40 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 22:12 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 18:57 -0400
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-14 19:43 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-14 20:43 -0400
                Re: Chrome on Windows 10 error ? Jolly Roger <jollyroger@pobox.com> - 2025-09-15 16:08 +0000
                Re: Chrome on Windows 10 error ? "Jonathan N. Little" <lws4art@gmail.com> - 2025-09-16 10:06 -0400
                Re: Chrome on Windows 10 error ? Dale <dalekellytoo@gmail.com> - 2025-09-13 06:05 -0400

csiph-web