There seems to be a problem in Safari with the use of `:after` and `:before` when applying

I've been facing an issue with Safari not properly box-sizing after the "load" function. It functions perfectly on Chrome, Firefox, and IE, but not on Safari.

You can view the specific page with the problem here: goo.gl/HKJy4g

The problem lies with the 3 divs, "feat1, feat2, feat3," located on the right-hand side of the web design content in the header. I can't seem to figure out where I'm going wrong for it to not work correctly on Safari.

I apologize if my explanation is a bit unclear, I struggle with articulating my thoughts through typing =(

Answer №1

While browsing through your site, I noticed an issue with the .feat3 element. The use of left: 500px; is causing the div to be displaced and resulting in the overflow of the .overlay div.

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

Performing calculations for given IndexedFaceSet of coordIndex in X3D

I am looking to design an X3D arch using HTML, similar to this example: I have tried using a cylinder shape to create the arch, but I found it insufficient as I couldn't define the thickness by setting its solid value to 'false'. I have see ...

Modify HTML text using conditional CSS without JavaScript

Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail. Here's my query: I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific B ...

Is there a way to create a div that resembles a box similar to the one shown in the

Hello, I am attempting to achieve a specific effect on my webpage. When the page loads, I would like a popup to appear at the center of the screen. To accomplish this, I have created a div element and initially set its display property to 'none'. ...

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

Error message encountered while attempting to search on Wikipedia: "Unable to connect to *ngFor" (Angular2 / HTML / Javascript)

I am currently working on developing a search bar that will search through data and display the results based on the input in the search box after clicking a button. The data can be sourced from Wikipedia or local fake data, it doesn't make a differen ...

Tips for Omitting Children <li> from CSS Design

I'm currently working in SharePoint Designer and facing an issue with custom bullets in my list. My goal is to apply a custom bullet on the parent li elements (Desc 1 and Desc 2), but unfortunately, it's also being applied to all the children li ...

How to Delete an Added Image from a Dialog Title in jQuery

I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...

Seamless Shift: Effortless Transition

I'm attempting to develop a unique hover effect for a button. Initially, the button only displays an outline and its name inside. However, upon hovering over the button, I want it to smoothly transition to my gradient background. Despite trying multip ...

Keeping information saved locally until an internet connection is established

I have a vision to develop a Web app focused on receiving feedback, but the challenge lies in the fact that it will be utilized on a device without an internet connection. The plan is for it to save any user input offline until connectivity is restored. Th ...

How to position tspan x coordinate in Internet Explorer 11 with d3.js

Having a tough time with this issue. I've experimented with various solutions to properly display labels on my force directed d3 graph. Check out this stackBlitz Everything looks good in all browsers except IE11. https://i.sstatic.net/Cl61L.png In ...

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

Setting the z-index for Bootstrap dropdown menus on containers that are generated dynamically

When using the Bootstrap 3 dropdown-menu within a dynamically generated container, I am encountering an issue where the dropdown-menu appears behind the newly created elements. Please refer to the image for visual clarification. The container item has pos ...

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

Ways to remove the highlighting from a selected list item using CSS/Javascript

I have a problem with a list of images and keywords that act as selections for users. When a user clicks on a selection, it highlights the corresponding image using CSS shadow. However, I am trying to figure out how to deactivate this highlight later on, e ...

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

Using data binding in VueJS to construct a dynamic URL

Exploring VueJS for the first time and it's been a great experience so far. However, I'm facing a couple of challenges with data binding. The requirement is for the customer to input an image URL, and no image should be displayed until a valid ...

Obtaining the HTML content of a div element that has been retrieved through an AJAX request to a PHP script

My challenge is to fetch a dropdown menu from a server and then manipulate it using jQuery after loading. Although everything loads correctly, I am unable to interact with the dropdown items because they were dynamically added post AJAX response instead of ...

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

Switch Image on Hover in Panel Group

After delving into Bootstrap, I encountered an issue. I have a Panel-Group with an image and some text. The challenge is switching the image on hover, but it should change when hovering over the panel, not just the image itself. I've found solutio ...

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it. If you'd like to see the problem in actio ...