From Newsgroup: alt.html



I just added some design to my Website.

https://www.dalekelly.org/


Put another link in the map of the main image on my HOME page.

"VIDEOS ?"


Once again, in Chrome on Windows 10, the icon doesn't show up.

But once again, in Chrome, the location of the icon will still allow the
link to work.

I updated Chrome and had no solution.


Works okay with: Edge, Firefox, and Wave.

Chrome works fine with this on my iPhone6.

This works on FireTV Silk Browser too.

Last time this happened I had to make sure the link had a full address.
I did this now.

Also deleted the browsing history again.
--
Mystery? -> https://www.dalekelly.org/

--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/10/2025 2:56 AM, Dale wrote:

I just added some design to my Website.

https://www.dalekelly.org/

Apologies ...

It just started working after I made this post.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/10/2025 2:56 AM, Dale wrote:

I just added some design to my Website.

https://www.dalekelly.org/

Put another link in the map of the main image on my HOME page.

"VIDEOS ?"

Once again, in Chrome on Windows 10, the icon doesn't show up.

But once again, in Chrome, the location of the icon will still allow the link to work.

I updated Chrome and had no solution.

Works okay with: Edge, Firefox, and Wave.

Chrome works fine with this on my iPhone6.

This works on FireTV Silk Browser too.

Last time this happened I had to make sure the link had a full address.
I did this now.

Also deleted the browsing history again.

the links in the map of the main image aren't linking on iPhone Chrome ?

https://www.dalekelly.org/
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/10/2025 1:28 PM, Dale wrote:

On 9/10/2025 2:56 AM, Dale wrote:

I just added some design to my Website.

https://www.dalekelly.org/


Put another link in the map of the main image on my HOME page.

"VIDEOS ?"


Once again, in Chrome on Windows 10, the icon doesn't show up.

But once again, in Chrome, the location of the icon will still allow
the link to work.

I updated Chrome and had no solution.


Works okay with: Edge, Firefox, and Wave.

Chrome works fine with this on my iPhone6.

This works on FireTV Silk Browser too.

Last time this happened I had to make sure the link had a full
address. I did this now.

Also deleted the browsing history again.

the links in the map of the main image aren't linking on iPhone Chrome ?

https://www.dalekelly.org/

I have thought of something.

My Cascading Style Sheet (CSS) may need adjusted.

The two main things it does are:

1) arranges the main menu according to three monitor sizes of Computer,
Pad, SmartPhone

2) adjusts the size of images based on monitor size

https://www.dalekelly.org/mystyle.css

This is the site:

https://www.dalekelly.org/

Can't type well enough on the iPhone to see whether it functions on Safari.

Do you know if my site works on an iPhone's Safari ?
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/10/2025 4:19 PM, Dale wrote:

On 9/10/2025 1:28 PM, Dale wrote:

On 9/10/2025 2:56 AM, Dale wrote:

I just added some design to my Website.

https://www.dalekelly.org/


Put another link in the map of the main image on my HOME page.

"VIDEOS ?"


Once again, in Chrome on Windows 10, the icon doesn't show up.

But once again, in Chrome, the location of the icon will still allow
the link to work.

I updated Chrome and had no solution.


Works okay with: Edge, Firefox, and Wave.

Chrome works fine with this on my iPhone6.

This works on FireTV Silk Browser too.

Last time this happened I had to make sure the link had a full
address. I did this now.

Also deleted the browsing history again.

the links in the map of the main image aren't linking on iPhone Chrome ?

https://www.dalekelly.org/

I have thought of something.

My Cascading Style Sheet (CSS) may need adjusted.

The two main things it does are:

1) arranges the main menu according to three monitor sizes of Computer,
Pad, SmartPhone

2) adjusts the size of images based on monitor size

https://www.dalekelly.org/mystyle.css

This is the site:

https://www.dalekelly.org/

Can't type well enough on the iPhone to see whether it functions on Safari.

Do you know if my site works on an iPhone's Safari ?

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.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

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
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/12/2025 12:52 PM, Jonathan N. Little wrote:

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 -->

Thank You !

Will have a look at this !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work fine.

Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart
phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work fine.

Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone
size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!

Apparently you are committed to the inflexibility of the map element. My example did away with it.

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/12/2025 6:45 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work fine. >>
Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart
phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone
size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!

Apparently you are committed to the inflexibility of the map element. My example did away with it.

I am still going to be studying your previous reply!

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.

Here is my CSS ...

https://www.dalekelly.org/mystyle.css

Here is my Website ...

https://www.dalekelly.org/


Using Safari on my iPhone6 the image pixel map for links works in
landscape mode. But my CSS on the menu is arranging for "pads" not
"smart phones" in landscape mode.

Using Chrome on my iPhone6 the pixel map still doesn't work in landscape
mode. Even though my CSS of my menu is arranging for "pads" not "smart phones".

Doesn't work in portrait mode as before. Neither Safari or Chrome.

Again, it works on my computer with Windows 10. With a variety of
browsers. Even when my CSS on the menu is arranging for "smart phones"
in portrait mode.

My CSS file organizes the main menu and adjusts image sizes based on
browser window size.

The image pixel map on Chrome/iPhone6 in landscape mode doesn't work
while Safari/iPhone6 in landscape mode does?
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

On 9/12/2025 6:45 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave
browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work
fine.

Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart
phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone
size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!

Apparently you are committed to the inflexibility of the map element. My
example did away with it.

I am still going to be studying your previous reply!

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.

Here is my CSS ...

https://www.dalekelly.org/mystyle.css

Here is my Website ...

https://www.dalekelly.org/

Using Safari on my iPhone6 the image pixel map for links works in
landscape mode. But my CSS on the menu is arranging for "pads" not
"smart phones" in landscape mode.

Using Chrome on my iPhone6 the pixel map still doesn't work in landscape mode. Even though my CSS of my menu is arranging for "pads" not "smart phones".

Doesn't work in portrait mode as before. Neither Safari or Chrome.

Again, it works on my computer with Windows 10. With a variety of
browsers. Even when my CSS on the menu is arranging for "smart phones"
in portrait mode.

My CSS file organizes the main menu and adjusts image sizes based on
browser window size.

The image pixel map on Chrome/iPhone6 in landscape mode doesn't work
while Safari/iPhone6 in landscape mode does?

Did you paste my code into a file and test it? If you had you would see
that my approach works, both landscape and portrait.

Your method with map requires that your "links" be added to your image
and then define pixel-perfect locations in your area definitions to line
up with those in the image. If the image resizes with responsive sizing
in mobile then the image "link" is not inline with area "link".

My method abandons the whole map-area brittle relationship, and just
places actual links as overlays to your image. That way the link "image"
is always aligned with the link because it IS A LINK.

You can adjust their locations over the image by changing the top and
left CSS attributes for the .pin# classes. As I commented in the CSS,
use percents and not pixels for these values and then the links will
always be in the same relative location in revelation to your longbeard
image even if the size changes with responsive scaling on different
devices or orientations.

In fact you can just cut and paste the CSS and HTML parts as commented
in the demo to your CSS and HTML file and it would just work as is.
Although you would need your original longbeard image before your put
the link numbers in it. Here, I uploaded the demo so you can test it
with your phone and discover that it just works, landscape or portrait.

<https://www.littleworksstudio.com/temp/usenet/dalekelly>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/12/2025 6:45 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size
of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work fine. >>
Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart
phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone
size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with
the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!

Apparently you are committed to the inflexibility of the map element. My example did away with it.

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.

THANK YOU !

Got it mostly fixed with your suggestions. With Windows 10 Chrome, Edge, Firefox, and Wave browsers. With Safari and Chrome browsers on iPhone6.

Sometime I have to press on the links associated with the image more
than one time. Only on iPhone.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

Couldn't get some headers and lines centered. They were partially under
the main menu too. Just removed those for now.

The horizontal list of social media icons was partially below the main
menu too. Will have to learn how to center these. Just removed those for
now.

For the rest of the pages I could use the old CSS file ...

https://www.dalekelly.org/mystyle.css

Here is a backup of my old index file ...

https://www.dalekelly.org/indexbackup.html



Will be going with this for now !



THANK YOU AGAIN !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 1:15 AM, Jonathan N. Little wrote:

Dale wrote:

On 9/12/2025 6:45 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/12/2025 2:45 PM, Jonathan N. Little wrote:

Dale wrote:

Thank You !

Will have a look at this !

I can confirm it will work in Chrome on Windows 10

Thank You once again for your reply!

The index.html page with CSS I currently have, works on all browser
window size on Windows 10. With Chrome, Edge, Firefox, and Wave
browsers.

https://www.dalekelly.org/

Included when a Windows 10 browser window is getting close to the size >>>> of my smart phone window.

On Windows 10 both main CSS aspects, menu design and image size, work
fine.

Pixel map of main image, for links works fine, with all of the above
Windows 10 considerations.

I was able to try Safari on my smart phone. As with Chrome on the smart >>>> phone, the pixel map isn't working.

CSS menu factor works on smart phone.

There are three menu factors. Computer size. Pad size. And smart phone >>>> size.

This leaves me to figure out why the pixel map, with the CSS image
sizing, isn't working on smart phone. When it works on Windows 10 with >>>> the window size close to the CSS "smart phone" size.

Thank You once again for your reply!

I will consider all your feedback to figure this out!

Apparently you are committed to the inflexibility of the map element. My >>> example did away with it.

I am still going to be studying your previous reply!

BTW Videos does not work in portrait orientation on my Samsung Galaxy
S23. Does work in landscape mode.

Here is my CSS ...

https://www.dalekelly.org/mystyle.css

Here is my Website ...

https://www.dalekelly.org/


Using Safari on my iPhone6 the image pixel map for links works in
landscape mode. But my CSS on the menu is arranging for "pads" not
"smart phones" in landscape mode.

Using Chrome on my iPhone6 the pixel map still doesn't work in landscape
mode. Even though my CSS of my menu is arranging for "pads" not "smart
phones".

Doesn't work in portrait mode as before. Neither Safari or Chrome.

Again, it works on my computer with Windows 10. With a variety of
browsers. Even when my CSS on the menu is arranging for "smart phones"
in portrait mode.

My CSS file organizes the main menu and adjusts image sizes based on
browser window size.

The image pixel map on Chrome/iPhone6 in landscape mode doesn't work
while Safari/iPhone6 in landscape mode does?

Did you paste my code into a file and test it? If you had you would see
that my approach works, both landscape and portrait.

Your method with map requires that your "links" be added to your image
and then define pixel-perfect locations in your area definitions to line
up with those in the image. If the image resizes with responsive sizing
in mobile then the image "link" is not inline with area "link".

My method abandons the whole map-area brittle relationship, and just
places actual links as overlays to your image. That way the link "image"
is always aligned with the link because it IS A LINK.

You can adjust their locations over the image by changing the top and
left CSS attributes for the .pin# classes. As I commented in the CSS,
use percents and not pixels for these values and then the links will
always be in the same relative location in revelation to your longbeard
image even if the size changes with responsive scaling on different
devices or orientations.

In fact you can just cut and paste the CSS and HTML parts as commented
in the demo to your CSS and HTML file and it would just work as is.
Although you would need your original longbeard image before your put
the link numbers in it. Here, I uploaded the demo so you can test it
with your phone and discover that it just works, landscape or portrait.

<https://www.littleworksstudio.com/temp/usenet/dalekelly>

THANK YOU !

Got it mostly fixed with your suggestions. With Windows 10 Chrome, Edge, Firefox, and Wave browsers. With Safari and Chrome browsers on iPhone6.

Sometime I have to press on the links associated with the image more
than one time. Only on iPhone.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

Couldn't get some headers and lines centered. They were partially under
the main menu too. Just removed those for now.

The horizontal list of social media icons was partially below the main
menu too. Will have to learn how to center these. Just removed those for
now.

For the rest of the pages I could use the old CSS file ...

https://www.dalekelly.org/mystyle.css

Here is a backup of my old index file ...

https://www.dalekelly.org/indexbackup.html



Will be going with this for now !



THANK YOU AGAIN !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

Couldn't get some headers and lines centered.

If you are talking about the H3 headers then just add CSS rule:

h3 { text-align: center; }

They were partially under the main menu too. Just removed those for
now.

BTW I would put all that stuff withing MAIN

Not sure to which you are referring to.

The horizontal list of social media icons was partially below the main
menu too. Will have to learn how to center these. Just removed those for
now.

I would suggest just using a list and giving it a class "social". Also
you don't need to tell people to click on social media icons, Everyone
knows to do that now ;-)

<!-- Start of Social Icons -->
<ul class="social">
<li>
<a href="https://www.facebook.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/facebook_icon32.jpg" alt="facebook" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.instagram.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/Instagram_Icon32.png" alt="instagram" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.twitter.com/@dalekellytoo/">
<img src="https://www.dalekelly.org/images/twitter_icon32.jpg" alt="twitter" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.pinterest.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/pinterest.png"
alt="pinterest" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.youtube.com/@dalekellytoo">
<img src="https://www.dalekelly.org/images/youtube_icon32.png" alt="youtube" width="32" height="32">
</a>
</li>
<li>
<a href="https://linkedin.com/in/dalekellytoo">
<img src="https://www.dalekelly.org/images/linkedin_icon32.jpg" alt="linkedin" width="32" height="32">
</a>
</li>
<li>
<a href="https://github.com/dalekellytoo">
<img src="https://www.dalekelly.org/images/github_icon32.jpg" alt="github" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.tiktok.com/@dalekellytoo">
<img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
width="32" height="32">
</a>
</li>
<li>
<a href="https://www.reddit.com/user/dalekellytoo/">
<img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
width="32" height="32"></a>
</li>
<li>
<a href="mailto:dale@dalekelly.org">
<img src="https://www.dalekelly.org/images/email_icon_32.jpg"
alt="email" width="32" height="32">
</a>
</li>
</ul>
<!-- End Social Icons -->


Then just had this one rule into your CSS:

.social {
list-style: none;
display: flex;
gap: 5px;
}

For the rest of the pages I could use the old CSS file ...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 8:37 AM, Jonathan N. Little wrote:

Dale wrote:

Couldn't get some headers and lines centered.

If you are talking about the H3 headers then just add CSS rule:

h3 { text-align: center; }

They were partially under the main menu too. Just removed those for
now.

BTW I would put all that stuff withing MAIN

Not sure to which you are referring to.

The horizontal list of social media icons was partially below the main
menu too. Will have to learn how to center these. Just removed those for
now.

I would suggest just using a list and giving it a class "social". Also
you don't need to tell people to click on social media icons, Everyone
knows to do that now ;-)

<!-- Start of Social Icons -->
<ul class="social">
<li>
<a href="https://www.facebook.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/facebook_icon32.jpg" alt="facebook" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.instagram.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/Instagram_Icon32.png" alt="instagram" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.twitter.com/@dalekellytoo/">
<img src="https://www.dalekelly.org/images/twitter_icon32.jpg" alt="twitter" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.pinterest.com/dalekellytoo/">
<img src="https://www.dalekelly.org/images/pinterest.png" alt="pinterest" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.youtube.com/@dalekellytoo">
<img src="https://www.dalekelly.org/images/youtube_icon32.png" alt="youtube" width="32" height="32">
</a>
</li>
<li>
<a href="https://linkedin.com/in/dalekellytoo">
<img src="https://www.dalekelly.org/images/linkedin_icon32.jpg" alt="linkedin" width="32" height="32">
</a>
</li>
<li>
<a href="https://github.com/dalekellytoo">
<img src="https://www.dalekelly.org/images/github_icon32.jpg" alt="github" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.tiktok.com/@dalekellytoo">
<img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok" width="32" height="32">
</a>
</li>
<li>
<a href="https://www.reddit.com/user/dalekellytoo/">
<img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit" width="32" height="32"></a>
</li>
<li>
<a href="mailto:dale@dalekelly.org">
<img src="https://www.dalekelly.org/images/email_icon_32.jpg" alt="email" width="32" height="32">
</a>
</li>
</ul>
<!-- End Social Icons -->

Then just had this one rule into your CSS:

.social {
list-style: none;
display: flex;
gap: 5px;
}

For the rest of the pages I could use the old CSS file ...

WOW ! WOW ! WOW !

Thank You for the detailed suggestion!

I followed it.

The headers are now all centered.

https://www.dalekelly.org/

But the new social media icon line isn't yet centered.

This is added to CSS:

.social {
list-style: none;
display: flex;
gap: 5px;
}

https://www.dalekelly.org/mystyle2.css

Happening same as with old codes.

https://www.dalekelly.org/indexbackup.html

https://www.dalekelly.org/mystyle.css


THANK YOU AGAIN !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

On 9/13/2025 8:37 AM, Jonathan N. Little wrote:

Dale wrote:

Couldn't get some headers and lines centered.

If you are talking about the H3 headers then just add CSS rule:

h3 { text-align: center; }

They were partially under the main menu too. Just removed those for
now.

BTW I would put all that stuff withing MAIN

Not sure to which you are referring to.

The horizontal list of social media icons was partially below the main
menu too. Will have to learn how to center these. Just removed those for >>> now.

I would suggest just using a list and giving it a class "social". Also
you don't need to tell people to click on social media icons, Everyone
knows to do that now ;-)

<!-- Start of Social Icons -->
<ul class="social">
-a-a <li>
-a-a-a-a <a href="https://www.facebook.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/facebook_icon32.jpg" >> alt="facebook" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.instagram.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
alt="instagram" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.twitter.com/@dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/twitter_icon32.jpg" >> alt="twitter" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.pinterest.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/pinterest.png"
alt="pinterest" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.youtube.com/@dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/youtube_icon32.png" >> alt="youtube" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://linkedin.com/in/dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg" >> alt="linkedin" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://github.com/dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/github_icon32.jpg" >> alt="github" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.tiktok.com/@dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok"
width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.reddit.com/user/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit"
width="32" height="32"></a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="mailto:dale@dalekelly.org">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/email_icon_32.jpg" >> alt="email" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
</ul>
<!-- End Social Icons -->


Then just had this one rule into your CSS:

.social {
-a-a list-style: none;
-a-a display: flex;
-a-a gap: 5px;
}

For the rest of the pages I could use the old CSS file ...

WOW ! WOW ! WOW !

Thank You for the detailed suggestion!

I followed it.

The headers are now all centered.

https://www.dalekelly.org/

But the new social media icon line isn't yet centered.

This is added to CSS:

.social {
-a list-style: none;
-a display: flex;
-a gap: 5px;
}

https://www.dalekelly.org/mystyle2.css

Happening same as with old codes.

https://www.dalekelly.org/indexbackup.html

https://www.dalekelly.org/mystyle.css

THANK YOU AGAIN !

Very simple, just add "justify-content: center;" to the flex container,
i.e.:

.social {
list-style: none;
display: flex;
justify-content: center;
gap: 5px;
}

To learn more see:

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container>

or

<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

With flex you can align left, right or center, or evenly space them
across the width.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 11:14 AM, Jonathan N. Little wrote:

Dale wrote:

On 9/13/2025 8:37 AM, Jonathan N. Little wrote:

Dale wrote:

Couldn't get some headers and lines centered.

If you are talking about the H3 headers then just add CSS rule:

h3 { text-align: center; }

They were partially under the main menu too. Just removed those for
now.

BTW I would put all that stuff withing MAIN

Not sure to which you are referring to.

The horizontal list of social media icons was partially below the main >>>> menu too. Will have to learn how to center these. Just removed those for >>>> now.

I would suggest just using a list and giving it a class "social". Also
you don't need to tell people to click on social media icons, Everyone
knows to do that now ;-)

<!-- Start of Social Icons -->
<ul class="social">
-a-a <li>
-a-a-a-a <a href="https://www.facebook.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/facebook_icon32.jpg"
alt="facebook" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.instagram.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/Instagram_Icon32.png"
alt="instagram" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.twitter.com/@dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/twitter_icon32.jpg"
alt="twitter" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.pinterest.com/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/pinterest.png"
alt="pinterest" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.youtube.com/@dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/youtube_icon32.png"
alt="youtube" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://linkedin.com/in/dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/linkedin_icon32.jpg"
alt="linkedin" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://github.com/dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/github_icon32.jpg" >>> alt="github" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.tiktok.com/@dalekellytoo">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/TikTok.jpg" alt="TikTok" >>> width="32" height="32">
-a-a-a-a </a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="https://www.reddit.com/user/dalekellytoo/">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/Reddit.jpg" alt="Reddit" >>> width="32" height="32"></a>
-a-a </li>
-a-a <li>
-a-a-a-a <a href="mailto:dale@dalekelly.org">
-a-a-a-a-a-a <img src="https://www.dalekelly.org/images/email_icon_32.jpg" >>> alt="email" width="32" height="32">
-a-a-a-a </a>
-a-a </li>
</ul>
<!-- End Social Icons -->


Then just had this one rule into your CSS:

.social {
-a-a list-style: none;
-a-a display: flex;
-a-a gap: 5px;
}

For the rest of the pages I could use the old CSS file ...

WOW ! WOW ! WOW !

Thank You for the detailed suggestion!

I followed it.

The headers are now all centered.

https://www.dalekelly.org/

But the new social media icon line isn't yet centered.

This is added to CSS:

.social {
-a list-style: none;
-a display: flex;
-a gap: 5px;
}

https://www.dalekelly.org/mystyle2.css

Happening same as with old codes.

https://www.dalekelly.org/indexbackup.html

https://www.dalekelly.org/mystyle.css


THANK YOU AGAIN !

Very simple, just add "justify-content: center;" to the flex container,
i.e.:

.social {
list-style: none;
display: flex;
justify-content: center;
gap: 5px;
}

To learn more see:

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container>

or

<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

With flex you can align left, right or center, or evenly space them
across the width.

THANK YOU !

Works Great !

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

With such quick responses you seem like an expert !

For now I am going to edit one more thing. I will be comparing my two
CSS files and any styles within the index file.

My CSS has three main menu designs based on browser window size:

1) computer size, a vertical menu on the left
2) pad size, a horizontal menu on the top
3) smart phone size, a vertical menu that is centered

The (1) menu has space above it when I scroll down, leaving the <h1> behind.

Does not happen with previous CSS:

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


THANK YOU AGAIN !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

The (1) menu has space above it when I scroll down, leaving the <h1>
behind.

You have an error, you have h1>Dale's Website</h1> outside of the body
element:

...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
...
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 4:45 PM, Jonathan N. Little wrote:

Dale wrote:

The (1) menu has space above it when I scroll down, leaving the <h1>
behind.

You have an error, you have h1>Dale's Website</h1> outside of the body element:

...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
...

THANK YOU FOR THE RESPONSE !

I put the header in the body section. Same response as before.

The error I have is that when I scroll down, the vertical menu has a rectangular space left above it.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle2.css

It worked before my edits:

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


I used the old CSS as the CSS for all other pages on my site. Works there.

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/indexbackup.html


THANK YOU FOR THE RESPONSE !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

On 9/13/2025 4:45 PM, Jonathan N. Little wrote:

Dale wrote:

The (1) menu has space above it when I scroll down, leaving the <h1>
behind.

You have an error, you have h1>Dale's Website</h1> outside of the body
element:

-a-a ...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
-a-a ...

THANK YOU FOR THE RESPONSE !

I put the header in the body section. Same response as before.

The error I have is that when I scroll down, the vertical menu has a rectangular space left above it.

That is due to where you placed it in the HTML. It's order does matter.
In your original "ul.sidebar" is immediately following the BODY opening
tag. In your new it is preceded by:

<h3><a href="https://www.wikipedia.org/wiki/Meta">Natural?</a> -|-
<a href="https://www.wikipedia.org/wiki/Physics">Super?</a> -|-
<a href="https://www.wikipedia.org/wiki/Metaphysics">Supernatural?</a></h3>

<h1>Dale's Website</h1>

Move the above into the MAIN opening tag.

If you want "Dale's Website" above the "Natural? | Super? |
Supernatural?" line the original too swap their order in the html. If
you refer to my mock-up

<https://www.littleworksstudio.com/temp/usenet/dalekelly>
view the source I kept parts organized:

...
<body>
<aside>
your main sidebar menu here
</aside

<main>
your main content here
</main>

<footer>
your stuff on the bottom here
</footer>
</body>

Also note that CSS rules order in your stylesheet also matter if you have:

.foo {
color: red;
}

but further down the stylesheet you have

.foo {
color: green;
}

then in your HTML

<p class="foo">
I will be color green not red.



HTH
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 9:40 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/13/2025 4:45 PM, Jonathan N. Little wrote:

Dale wrote:

The (1) menu has space above it when I scroll down, leaving the <h1>
behind.

You have an error, you have h1>Dale's Website</h1> outside of the body
element:

-a-a ...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
-a-a ...

THANK YOU FOR THE RESPONSE !

I put the header in the body section. Same response as before.

The error I have is that when I scroll down, the vertical menu has a
rectangular space left above it.

THANK YOU VERY MUCH !

That is due to where you placed it in the HTML. It's order does matter.
In your original "ul.sidebar" is immediately following the BODY opening tag. In your new it is preceded by:

<h3><a href="https://www.wikipedia.org/wiki/Meta">Natural?</a> -|-
<a href="https://www.wikipedia.org/wiki/Physics">Super?</a> -|-
<a href="https://www.wikipedia.org/wiki/Metaphysics">Supernatural?</a></h3>

<h1>Dale's Website</h1>

Move the above into the MAIN opening tag.

With the above it works now !

THANK YOU VERY MUCH !
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/13/2025 10:12 PM, Dale wrote:

On 9/13/2025 9:40 PM, Jonathan N. Little wrote:

Dale wrote:

On 9/13/2025 4:45 PM, Jonathan N. Little wrote:

Dale wrote:

The (1) menu has space above it when I scroll down, leaving the <h1> >>>>> behind.

You have an error, you have h1>Dale's Website</h1> outside of the body >>>> element:

-a-a-a ...
</head>

<h1>Dale's Website</h1> <-This needs to be inside the BODY element.

<body>
-a-a-a ...

THANK YOU FOR THE RESPONSE !

I put the header in the body section. Same response as before.

The error I have is that when I scroll down, the vertical menu has a
rectangular space left above it.

THANK YOU VERY MUCH !

That is due to where you placed it in the HTML. It's order does matter.
-a In your original "ul.sidebar" is immediately following the BODY opening >> tag. In your new it is preceded by:

<h3><a href="https://www.wikipedia.org/wiki/Meta">Natural?</a> -|-
-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a <a href="https://www.wikipedia.org/wiki/
Physics">Super?</a> -|-
-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a-a <a
href="https://www.wikipedia.org/wiki/Metaphysics">Supernatural?</a></h3>

<h1>Dale's Website</h1>

Move the above into the MAIN opening tag.

With the above it works now !

THANK YOU VERY MUCH !

One thing is happening.

I have an iPhone6.

Using the Safari Web browser the icons in my image on the HOME page work
fine.

Using the Chrome Web browser the icons in my image on the HOME page
appear touched but the linking requires a couple touches.

I guess it may be the age of my iPhone6.

https://www.dalekelly.org/
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes.

I do still like the button on the face of the screen.
--
Mystery? -> https://www.dalekelly.org/
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

On 2025-09-15, Dale <dalekellytoo@gmail.com> wrote:

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work
on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes.

I do still like the button on the face of the screen.

The battery can be replaced relatively cheaply while you wait.
--
E-mail sent to this address may be devoured by my ravenous SPAM filter.
I often ignore posts from Google. Use a real news client instead.

JR
--- Synchronet 3.21a-Linux NewsLink 1.2

From Newsgroup: alt.html

Jolly Roger wrote:

On 2025-09-15, Dale <dalekellytoo@gmail.com> wrote:

On 9/14/2025 7:43 PM, Jonathan N. Little wrote:

Dale wrote:

I guess it may be the age of my iPhone6.

Yeah, IPhone 6 EOL was Jan 2023. You will find a lot of stuff won't work >>> on that phone now.

One thing that happens is the battery goes dead after just a couple
minutes off the power cord.

I had a previous iPhone6 and the same thing happened.

Also I mainly use Siri to launch stuff. Text takes a couple tries sometimes. >>
I do still like the button on the face of the screen.

The battery can be replaced relatively cheaply while you wait.

But the OS, security, and apps cannot. Retire and replace the phone and
use it with an app such as DroidCam to re-purpose as a webcam.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
--- Synchronet 3.21a-Linux NewsLink 1.2