Question

Hello I am building a website and text becomes unselectable in certain areas on a couple of my pages and i can’t figure out why. One is after a form and the other is after an image. I thought maybe i hadn’t closed a tag or something but i didn’t find any… Still semi new at coding so be gentle 🙂

<div id="content_container"><div id="about1"><h1 id="About Us">About Us...</h1><p>We promote good business practices, balanced healthy lifestyles, mental and physical fitness. Originating in the Pacific Northwest and transitioning to the East Coast, our styles are rooted in the mountains and expanding to the ocean shorelines.</p><h1 id="Ordering">Ordering...</h1><p>We do our best to get your orders out as quickly as possible. Almost all of our products are hand made and stitched in America. Our usual lead time is 3 business days from the date of your order. We accept major credit cards: VISA, MasterCard, AMEX. We also accept Paypal payments. Our site is secured with a 256-bit SSL encryption to keep your information safe and secure.</p><h1 id="Shipping">Shipping...</h1><p><img src="images/Free-Shipping.png" alt="Free Shipping"/>We use USPS Priority Mail for standard ground shipments. Transit time takes 5-7 business days for shipments to the contiguous US and 7-14 business days internationally. Limited tracking is provided with this service however, it is not step-by-step tracking information. If step-by-step tracking is important to you or if expedited shipping is required, FedEx shipping is available.</p><h1 id="Returns">Returns...</h1><p>We want you to be happy with your purchase. If you have a problem with your order, please contact us immediately to resolve the issue. If needed, we will issue a Returned Merchandise Authorization (RMA). We accept returns within 15 days of purchase (including weekends and holidays). Products must be unused, unwashed, as well as not modified in order to be eligible for return. Any products that are returned without a RMA, risks getting lost and may not be refunded. Due to this, we encourage using a traceable courier with a tracking number for any returns. Refunds will be issued upon receipt of the parcel, minus the cost of shipping.</p><h1 id="Privacy">Privacy Policy</h1><p>We only collect information you elect to offer us on this site. Any information you provide us is ONLY used to benefit you and our other customers. One goal in collecting personal information from you is to provide an efficient, meaningful, and customized experience. For example, we can use your personal information to: Help make the Site easier for you to use by not having to enter information more than once. Help you quickly find information, products, and services. Help us create content that is most relevant to you. Alert you to new information, products, and services that we offer.</p>

                            </div>
</div>

<div id="footer_container"><div class="footer1"><h3>Store</h3><ul><li>Jiu Jitsu Kimonos</li><li>T-Shirts</li><li>Hoodies</li><li>Bags</li><li>Accessories</li></div>
                           <div class="footer1"><h3>Terms & Conditions</h3><ul><li>FAQ</li><li>Shipping Policy</li><li>Return Policy</li><li>Privacy Policy</li><li>Payment Methods</li></div>
                           <div class="footer1"><h3>About Us</h3><ul><li><a href="about.html#About Us">Company Bio</a></li><li>Tesla Athletes</li><li><a href="about.html#Ordering">How to Order</a></li><li><a href="about.html#Returns">Return Policy</a></li><li><a href="about.html#Privacy">Privacy Policy</a></li></div>
                           <div class="footer1"><h3><img src="images/Payment-Methods.jpg"></h3><ul><li>Tesla Apparel<br>12345 W Broad St<br>Richmond, VA 23220<br><br></li></div>
</div>

and the css:

#about1 {
position: absolute;
left: 25.4%;
top: 25%;
width: 50%;
height:50%;
}

#about1 h1 {
font-family: 'Dancing Script', cursive;
font-weight: bold;
font-size: 36px;
text-shadow: 1px 1px 1px gray;
border-bottom: 1px gray solid;
width:300px;

}

#about1 p {
font-family: 'bonvenocflight';
font-weight: 500;
font-size: 15px;

}

.brand {
   font-family:'Sansation';
   font-variant:small-caps;
   font-size:18px;
   font-weight:bold;
   text-shadow: 1px 1px 1px gray;

}

Answer 1

One common problem is that you may have an element overlaid—perhaps an image with a transparent region—that is higher in the z-order than your text. You can see the text, but clicking and dragging is actually performing that action on the image itself.

Selecting everything on the page may show you via highlights if this is the case. Or else: right-click where you want to start selecting text and choose “Inspect Element” from the context menu. If the element that highlights is not the element containing your text, that is the problem.

_{In the future, please include test code or URLs in your question so that we can do more than guess in the dark at helping you.}