Pictures are not aligning correctly within a div element on Safari

When viewing the images in the images div on Chrome, Firefox, and IE, they appear to be vertically aligned and centered properly. However, there seems to be an issue with Safari as the pictures are being pushed below or out of the images div, causing them to bleed into the description div like this:

Here is a jsfiddle link showcasing the slideshow with the first image aligned in the center. Although the JS code may not work due to how the images are referenced in an array, the slideshow functions correctly for me. My main concern is ensuring the images align properly vertically, which is currently only an issue in Safari:

http://jsfiddle.net/bytyrurh/

javascripthtmlcss

Answer №1

#pictures {
    height: 750px;
    width: 1200px;
    border: 2px solid #333333;
    text-align: center;
}

#pictures img {
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

Feel free to use this code for your project.

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

Modify the custom attribute value assigned to an image

I am facing an issue with a document containing two thumbnail images (front and rear, like a bank check). I have successfully implemented zoom functionality on the front image by displaying a square part of the original large image. However, when I click o ...

javascriptjquery

A guide on customizing column names in MUI Datatables through object keys

I'm currently facing an issue where I need to set the name of a column in MUI Datatables using an object key. Specifically, I want to set one of the column names with the first element of children.childName so that it displays a list of child names, b ...

javascriptjsonreactjsmui-datatable

the `req.body` method fetches an object with a property named `json

Having an issue with accessing data from req.body in my form created with JS { 'object Object': '' } //when using JSON.stringify: { '{"A":"a","B":"b","C":"c"}': &apo ...

javascriptjsonexpress

Arranging data in an HTML table by dynamically populating it with information retrieved from a server

UPDATE 4/16/2012: All issues have been resolved, and the sorting functions are now functioning correctly. Timezones have been converted to their corresponding one-letter UTC codes (A-Z). The only remaining task is implementing Daylight Savings Time checks ...

javascripthtmlsortingknockout.js

Using JQuery to Load Text Content from Textarea into an IFrame

Seeking a solution to transfer HTML textarea content into an IFrame upon button click. Any suggestions on achieving this functionality? Thank you in advance. Illustratively, when a user types Hello World in the textarea and clicks the submit button, the t ...

phpjqueryhtmliframe

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

javascriptcsshtml

How to incorporate click and drag feature for rotating a 3D object using vue.js

Whenever I click a button, the rotation function is activated and allows me to rotate an object by hovering over it with my mouse. Now, I want to modify this behavior so that the object rotates only when I click on it and move the mouse (while holding dow ...

javascriptvue.js

Struggling with transferring information from JavaScript to PHP through the use of Ajax

Currently, I am working on creating a string using a JavaScript function and then passing it to PHP. This is the block of code in my JavaScript file: <script> function passVal(){ var strUrl = buildStringUrl(lat1, lng1, lat2, ...

javascriptphpajax

What is the javascript syntax for retrieving an array from a JSON object?

Hey there, I was wondering how to access an array in Javascript from a JSON object structured like this: Object {results: "success", message: "Your message has been sent successfully", error_id_array: Array[1]} error_id_array: Array[1] 0: "2" le ...

javascriptjson

Has the querystring hack become outdated?

For a long time, I have been adding a query string to my CSS link whenever I made changes that needed to be reflected on client machines: <link href="/Resources/styles/styles.css?v=1" rel="stylesheet" /> Lately, I've noticed that Chrome seems ...

htmlcssgoogle-chromebrowser

Deleting data with a Django button using HTML and POST request

I'm facing a challenge with managing email addresses in a table and deleting them efficiently. The goal is to have delete buttons positioned next to each email address for easy removal. When the page initially loads, the view sends the email addresse ...

htmldjangoformspostbutton

Unable to resize images in Firefox

Why is it that resizing doesn't seem to work in Firefox but functions fine in Internet Explorer? I'm struggling to find a way to make it consistent across all browsers. My goal is to resize the width to 800 and height to 475, disable maximizing t ...

javascriptjqueryhtmlfirefox

Center text within a div container

I am facing an issue with a nested div element: <div id="footer"> <div id="footer_text"> <p>My foooo text</p> </div> </div> The CSS code for the nested div is as ...

htmlcss

Endless loop of jquery textbox focus event

Currently, I am employing jQuery for validating textbox values. I have two textboxes - txt1 and txt2. For this purpose, I have created a jQuery function: $("#txt1").blur(function () { if ($("#txt1").val() == "") { $("#scarrie ...

javascriptjqueryhtml

Optimized route on Bing Maps

While digging into Bing Maps for route optimization, I discovered that each route with 10 stops can be optimized according to the suggestions provided by Bing Maps. I am working on reordering the waypoints using JavaScript code. directionsManager = new M ...

javascriptbing-maps

Ensure that all content stays on a single line regardless of the phone's screen size

I have successfully implemented a hamburger mobile menu, but I encountered issues when trying to include contact information within the menu. After experimenting with two different approaches, I found that the first method worked on all devices except iPh ...

jqueryhtmlcssmenuresponsive

What is the maximum amount of information that can be stored in a data attribute within the DOM?

Occasionally, I find myself wanting to include a substantial amount of data on the webpage in order to minimize additional AJAX calls for dynamic content. However, I am concerned about potential performance implications. Is there a penalty I should be aw ...

javascripthtmldombrowser

Switching between jQuery toggleclass and a button action to a Checkbox action

Hey there! I am currently working with code in Wordpress using the DIVI theme builder. I am still new to JS and jQuery, so bear with me. I recently found a cool Night Mode feature that activates when a button is clicked. I stumbled upon a custom toggle swi ...

jqueryhtmlwordpresscheckbox

Is there a way to create a singular asynchronous function that can retrieve data from multiple sources and provide

I'm currently working on an async function that fetches data from multiple sources, waits for all requests to complete, and then returns the JSON results as an array. Here is what I have so far: file1.js const searchResults = await Api.search(search ...

javascriptjsonpromiseasync-awaitfetch

Is it possible to use WHILE loops twice in PHP?

Just starting out with PHP and hoping for some assistance. I have a MySQL database table with columns for "id", "img", "link", and "desc". My goal is to echo all of this data in the following format: <div id="featured"> <a target='_b ...

phphtmlloops