Help me with my new website!

[bennyboy]

Well, almost everyone who has Windows XP has it (along with a few better browsers). Most of the Internet forums even today appear to work just fine in it.
Besides, the NetFront browser on my old Samsung SGH-E840 appears to behave just like Internet Explorer 6. When it comes to JavaScript, it appears to support basic DOM manipulation and alerts, yet it fails to even run the Acid3 test or HTML5 test.
I am not trying to make my website look the same in simpler browsers, I am trying to make the text readable in simpler browsers. That is something to be expected, right?

I am trying to do this (but not that it's triggered on click, but on hovering):
https://www.w3schools.com/howto/howto_js_popup.asp
However, the solution they present depends on the container for the pop-up being absolutely positioned. I can't make the container absolutely positioned if it has to be scrolled to in the "main" (which has overflow:auto).

No, I just don't see how it would help exactly.

Unless you have a VERY compelling reason to stick to an old browser or an old OS, then I'd recommend upgrading.  There are SO many new features with modern .css and HTML5 that it really is a joy now to work with them, rather than a struggle.

A popup is an object which is placed in front of other content (either by the order you lay things out or using z-index), but which starts out hidden, perhaps with style "display:none".  In order to place it in front of the other content, obviously you'll need a positioning style that takes it out of the positioning flow, and that's what "position:absolute" or "position:static" do.  Other than that, you can position it however you want to.  There's no particular reason to place your popup inside the control which triggers it, but you can if you like.

What your javascript or jQuery will do is handle an event.  In the event, you'll find your object, and then show (or hide) it.  jQuery in this case just allows a nice shorthand, which makes the code more readable.  If my controlling button is called "PopupShower" and my pop is called "MyPopup," then the jQuery code will look something like this. Important: if I ever come back to this code in the future, it will be super-obvious what it does, and very easy therefore to modify or improve:

https://jsfiddle.net/1u6wzs7q/1/

Code:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#PopupShower").click(function () {
            $("#MyPopup").show();
        });
        $("#MyPopup").click(function () {
            $("#MyPopup").hide();
        });
    });
</script>

<span id="PopupShower" style="cursor:pointer; background-color:darkturquoise">Click on me!</span>
<div id="MyPopup" style="display: none; cursor:pointer; z-index:1; position: fixed; top: 45%; bottom: 45%; left: 40%; right: 40%; background-color:pink">Oh snap!  You went and done did it now! </div>

One word of advice.  In modern Chrome browsers, you can right-click an element and "Inspect."  This will give you a very good and easy way of looking at the live markup of the page.  You can see how properties are changing when you click-- it even auto-highlights what part of the markup is being changed so you can easily find it.  Best web-debugging tool ever, IMO.