Elements appearing distorted in Firefox and Internet Explorer

I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages.

While it displays perfectly on Chrome, it appears distorted on both Firefox and Internet Explorer, with images attached as proof.

Check out the code on Codepen here

This is the corresponding HTML:

<html lang="en">   
     <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
     integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
     crossorigin="anonymous">

     <!-- Custom CSS -->
     <link rel="stylesheet" href="resources/css/style.css">

     <!-- Custom FONTS -->
     <link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet">

      <!-- Favicon -->
     <link rel="icon" href="resources/images/logo.jpg" width:"100px">

      <!-- Title of Page-->
     <title>PC Handyman</title>   </head>

         <!-- Landing page Body-->

   <body id="landing-page">
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top  " id="spec">   
     <a class="navbar-brand" href="#">PC Handyman
 <img class="logopic" src="resources/images/logo.jpg" alt=""></a>  
 <button class="navbar-toggler" type="button" data-toggle="collapse"
 data-target="#navbarNav" aria-controls="navbarNav"
 aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item active">
         <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="services.html">Services</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="about.html">Why PC Handyman?</a>
             </li>
             <li class="nav-item">
               <a class="nav-link disabled" href="contact.html">Contact Us</a>
             </li>
           </ul>
         </div>
       </nav>

       <div class="pop">
         <p>Welcome to PC Handyman, East Auckland's friendliest PC repair service. Lorem ipsum dolor sit amet, consectetur adipisicing
 elit. Assumenda, fugiat.</p>
       </div>

     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
     crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
     integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
     crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
     integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
     crossorigin="anonymous"></script>   </body> </html>

If anyone could lend a hand in identifying the cause of my "redbox" distortion on other browsers, it would be greatly appreciated.

I'm almost certain that the issue lies within my "pop" class.

Current unexpected display

Intended display

htmlcssresponsive-designcross-browsercss-position

Answer №1

Your CSS needs some adjustments. You should replace the current code with the .pop class and add it to your .css file. Here is the updated code:

  div.pop {
     position: relative;
     z-index: 9999;
     margin: 0;
     top: 0;
     left: 0;
}
 div.pop p {
     background: red;
     border: 2px solid orange;
     position: absolute;
     right: 0;
     width: 30%;
     top: 20rem;
     color: #fff;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

htmlcss

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

The solution provided in this answer on Stack Overflow addresses jQuery and not Angular or TypeScript. My inquiry bears resemblance to this question raised on a forum, but I am specifically looking for a resolution within the context of Angular. Is there ...

htmlangulartypescriptdomdom-manipulation

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss

unable to locate public folder in express.js

I recently created a basic server using Node.js with Express, and configured the public folder to serve static files. Within my main index.js file, I included the following code: const express = require('express'); const app = express(); const h ...

javascriptcssnode.jsexpressfile

I am struggling to extract data from the webpage using xpath

I'm currently delving into the realm of web scraping by working on various projects. One project involves creating a database of items from an online shoe store. However, I seem to be facing issues with extracting the data in text form. Here's w ...

pythonhtmlseleniumweb-scraping

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

javascripthtmlcss

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

htmlcssanimationhovertranslate

Maximizing the width of an absolute div element inside a container

Looking at this demo, you'll notice that the header remains fixed. However, my issue lies in getting the absolute <div> inside the <th> to occupy 100% of the width of the <th> When I set width: 100% for the <div>, it expands t ...

htmlcssfixed-header-tables

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascripthtmlcsswebkit

Leveraging Ajax for establishing session and displaying outputs

Trying my best to make this work with AJAX, but it's a new concept for me. So bear with me as I figure this out... I've posted a couple of questions about resolving the issue at hand and we've made progress. However, a new challenge has pre ...

javascriptphpjqueryhtmlajax

Include new items in the li tag using JavaScript

Hello, I am looking to dynamically add elements to an LI element when a link is clicked. I have successfully added elements to a DIV using the following code snippet: I came across a similar question on Which "href" value should I use for JavaScript links ...

javascripthtml

Creating a process to automatically generate an input field upon the selection of checkboxes

Is there a way to automatically generate a text field for each checked box in a dynamically changing checkbox list? Below is my code snippet: <div> <label> Products </label> <li ng-repeat="item in INDproducttypes"> ...

javascripthtmlangularjsangularjs-ng-repeat

Python (Selenium) - Guide on extracting and storing data from multiple pages into a single CSV file

I am facing a challenge with scraping data from a web page that contains a table spanning multiple pages. I am using Python with selenium for this task. The website in question is: The issue I am encountering is related to navigating through the pages of ...

pythonhtmlselenium

Incorporate descriptive text to my HTML slider

How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...

htmlcss

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

I am currently customizing a WordPress theme that lacks the option for onclick events on div elements. However, I can assign classes and IDs to them. In my design, I have four spans in a row, and when each span is clicked, I intend for the corresponding p ...

javascripthtmlcsswordpress

Incorporating live text into a tag while arranging items by price in both ascending and descending order

I recently added a button to my online shop that allows users to sort products by price, even though I don't fully understand the underlying JavaScript code. I want to enhance this button by updating the text to indicate whether the sorting order is ...

javascripthtmljquerysorting

Generating alternate list items

I'm attempting to design a list style that resembles the one depicted in the image linked below: https://i.stack.imgur.com/U7vMw.jpg My issue is that when I try to add borders, they end up applying to the entire structure. .styled-list { list-st ...

htmlcsslist

Unable to conduct this search with Python using Selenium on a website

I have written a script to search for books on a webpage using Selenium: from selenium import webdriver from selenium.webdriver.common.keys import Keys import time PATH = "C:\Program Files (x86)\chromedriver.exe" driver = webdriver.Chrome(PATH) ...

pythonhtmlseleniumweb-scrapingscrape

Preventing PCs from accessing a specific webpage: A step-by-step guide

I am currently using the code below to block phones: if { /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i .test(navigator.userAgent)) { window.location = "www.zentriamc.com/teachers/error ...

javascripthtmlcss