Divs placed side by side are displaying a 1px gap in Safari, however, this issue is

On the website , there is a noticeable 1px gap between adjacent divs in Safari. However, this issue does not occur in other browsers such as Chrome and Firefox.

The menu div is floated left and occupies 34% of the width, while the gallery div is floated right and takes up 66% of the width. When I change the gallery div to float left, the 1px gap appears at the far right of the screen in Safari. Adding a border (1px) fills in the gap in Safari, but it disrupts the positioning of the divs in other browsers. Is this issue specific to Safari?

Any insights or solutions would be greatly appreciated. Thank you.

Answer №1

Safari has a quirk when it comes to rounding pixels, causing a common bug to occur.

Imagine you have a 100px wrapper with three divs each set to 33.33% width. Safari will round this to 33% and make each div 33px wide, resulting in a total of 99px and a noticeable 1px gap.

One common solution is to apply the fix you attempted. By setting box-sizing to border-box, the div should stay in its position without being offset, as border-box includes the border in the div's size rather than adding extra space.

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

Function for calling a CSS callback with jQuery

I am currently working on enhancing my search bar using jQuery, and I am also looking to hide the navigation links. Here is a snippet of the jQuery code I have been using. The code functions properly when focused. $(".searchBox input").focus(function(){ ...

javascript jquery css css-animations

Guide to integrating HTML templates with Vue.js

I am experimenting with using vue.js but encountered some issues when trying to integrate it with a purchased template. I have included all the necessary .css and .js files in my index.html file and then called the components within vue.js itself. index.h ...

javascript html vue.js vue-component vue-router

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

javascript html jquery django django-templates

What are some ways I can optimize my Bootstrap CSS code to enhance responsiveness across different page widths?

After creating this fiddle, I noticed that my webpage layout with two texts stacked on top of each other looks great on wide screens. However, when the screen size is reduced or viewed on a mobile device, the layout gets all messed up. Take a look at this ...

javascript jquery html css twitter-bootstrap

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

javascript jquery html css web

What is the best way to steer a vehicle in the desired direction by utilizing the arrow keys on the keyboard?

Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...

javascript html css

What is the reasoning behind these parameters being utilized?

When I apply the class "container" to a div, it causes an issue with the width of the div. The properties are taken from _grid.cscc. I need the width to be 100%. https://i.sstatic.net/KGgXA.jpg https://i.sstatic.net/6tSgW.png This problem occurs every ...

html css bootstrap-4

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascript jquery html asp.net-mvc

Issue with CSS: Hover effect causing unexpected additional white space

My main goal is to implement a hover effect that covers an entire section, but I'm facing some challenges. When I hover over my products, it doesn't behave as expected and adds extra white space below while not covering the section properly. Thi ...

html css

Troubleshooting: Issues with Form Parameters in JSP

Here is the HTML form I am working with: <form action="supplierportal_home.jsp"> <select id="contract" name="contract"> <option selected="selected">Please Select</option> <option value="open" >Open</ ...

java javascript html jsp servlets

HTML animation effect on subpage with a URL modification [LATEST UPDATE]

Can you smoothly load a new subpage in the background, update the URL, and fade it in while an animation is playing on the previous page? Check out this example (jsFiddle) to see a simple animation: $(document).ready(function() { 'use strict&apo ...

javascript jquery html css

Displaying SQL Records with Line Breaks in C# MVC

In the process of developing a new C# MVC application, I encountered a challenge with displaying data from my table on a webpage. While I can display the data without any errors, I have a column in my table that can contain multiple pieces of information. ...

c#html asp.net asp.net-mvc

The placement of an object on a webpage

Seeking the (x,y) coordinates of an element using JavaScript, utilizing the offset property from jQuery. Here is my code snippet: var offsets = $('#11a').offset(); var top = offsets.top; var left = offsets.left; console.log("Coor ...

javascript jquery html

Tips for creating a website loading screen that allows users to fully immerse themselves in the experience

I am looking to improve the visibility of the loading screen that I have created. Ideally, it should last around 3-5 seconds using JQuery, as it is already in use on the website. Below is the code snippet: Additionally, I am not very familiar with JQuery, ...

javascript html jquery css web

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascript html input show

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

css html

Automatically forward after submitting the form

I am utilizing the Mingle plugin on my Wordpress website to allow users to register and post on a dedicated Mingle Forum. Although the signup process is functioning correctly, I wish to enhance user experience by redirecting them to the forum page after t ...

php html wordpress forms

CSSer Q&A