Displaying images in various positions across different browsers

I am currently working on rendering images on a website. The images display perfectly in Firefox and Chrome, but I am encountering issues with Safari (version 7.0.3). Specifically, the image shifts to the bottom right in Safari, whereas I would like it to be positioned at the bottom center.

Below is my CSS code:

.circular {
  /*margin: 10px 30px 0px 30px;*/
  display: block;
  margin: 0 auto;
  position: relative;
  bottom:-400px;
  left:93%;
  transform:translateX(-50%);
}

Here is the HTML structure:

<section class="module parallax parallax-1">
            <div class="container">
              <div class="circular" style="vertical-align:middle; text-align:center;"><img src="images/index/yoyo.png" width=120px height=120px></div>
              <div class="social_tags" style="vertical-align:middle;">
                <a href="https://github.com/yoyo"><img src="images/index/github.png" width=40px height=40px></a>
                <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width=40px height=40px></a>
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="225b4d5b4d62454f434b4e0c414d4f">[email protected]</a>?Subject=Hello" ><img src="images/index/gmail.png" width=40px  height=40px></a>
                <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width=40px height=40px></a>
              </div>
            </div>
 </section>
htmlcss

Answer №1

Some HTML errors were identified in your code. I have made the necessary corrections and tested it successfully on both Chrome and Safari: https://jsfiddle.net/msq0eqch/3/

Here is the updated HTML code provided:
(Ensure to include style="" within your style attribute)

<section class="module parallax parallax-1">
            <div class="container">
              <div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div>
              <div class="social_tags" style="vertical-align:middle;" >
                <a href="https://github.com/yoyo"><img src="images/index/github.png" width="40px" height="40px"></a>
                <a href="https://www.facebook.com/yoyo"><img src="images/index/facebook.png" width="40px" height="40px"></a>
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e59c8a9c8aa58288848c89cb868a88">[email protected]</a>?Subject=Hello" ><img src="images/index/gmail" width="40px" height="40px"></a>
                <a href="https://in.linkedin.com/in/yoyo"><img src="images/index/linkedin.png" width="40px" height="40px"></a>
              </div>
            </div>
 </section>

Additionally, remember to add 

-webkit-transform:translateX(-50%);
to your CSS.

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

You cannot use css() in conjunction with appendTo()

$('#item').click(function() { $.ajax({ url: 'server.php', type: 'POST', data : {temp : 'aValue'}, success: function(data) { $(data).css('color&apo ...

jquerycssappendto

Unable to resolve the problem related to <ul> and <li>

I am currently working on integrating a chat snippet into an angular project. The challenge I am facing is that I cannot use jquery components, so I only need the HTML and CSS parts. You can find the original snippet here: After copying it to Codepen, I n ...

htmltwitter-bootstrapcssbootstrap-4

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

javascripthtmlcss

The peculiar behavior of dynamically loading CSS with jQuery

In the development of my app, I am faced with the challenge of dynamically loading CSS and JS. Currently, the solution looks like this: myapp.loadCss = function(css){ $("head").append("<link>"); cssDom = $("head").children(":last"); ...

jquerycssdynamicjavascript

What is the method for accessing an image in JavaScript?

Currently, I am developing a currency converter for a gaming marketplace and I would like the users to be able to generate images using JavaScript. While most of the work is completed, I am facing an issue where the images are not displaying properly and i ...

javascripthtmlbootstrap-4

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...

javascripthtmlangulartypescriptweb-component

Tips on narrowing the left margin of a div when the size of the contained element becomes too large

I am facing a challenge in formatting text on the web that contains equations embedded as SVG images. To address this issue, I have replaced the SVG elements with fixed-sized div in the example provided below. The SVG element is nested within a div specifi ...

htmlcss

The text is not accepting the React ClassName

Lately, I've been diving into the world of coding with React. Today, as I was working on a new project, I encountered an issue when trying to apply a styling className. The <span> element appeared without any style. Here's a snippet from my ...

javascripthtmlnode.jsreactjsjsx

Reveal the concealed button with a jQuery click event

I have a simple question that has been elusive to find an answer for on the internet. Can anyone please help? <input hidden="true" class="btnsubmit" id="myaddslide2" onClick="UPCURSLIDE()" type="button" value="UPDATE"> <script> function ...

javascriptjqueryhtmlcss

How can I trigger the second animation for an object that is constantly moving within a specific range in the first animation?

I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, an ...

javascriptcssanimation

After submitting the comment, you will be redirected to a different page

I am currently working on implementing a comment section for my website. I have created the comment box and successfully set up posting comments and updating them in the database. However, I am facing an issue where upon submitting a comment, the page auto ...

phphtmlmysqldatabasephpmyadmin

The Bootstrap model popup darkens the screen, but there are a few areas that remain at the same level of brightness and do not get dim

https://i.sstatic.net/09QtK.png Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as ...

cssangularbootstrap-4

Obtaining the API for a website's functionalities

I’m in need of downloading the API file that facilitates the connection between the website and database. How can I achieve this? I've attempted to use Httrack, wget, and open explorer, but they only seem to download the website itself. While I get ...

phphtmlweb-scraping

Box with negative z-index cannot be clicked

I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effective ...

cssz-index

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

javascripthtmlcssbootstrap-4html-table

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

javascripthtmlvue.js

Is it possible to align the last item in a MUI stack to the bottom?

https://i.stack.imgur.com/IsutM.png Currently, I am working on a modal component using MUI's Grid. My goal is to position the Button at the bottom of the modal. const styles = { modalBox: { position: 'absolute', top: &ap ...

cssreactjsmaterial-ui

What is the best way to include a collapsible submenu in a dropdown menu

Is there a way to incorporate a collapse menu into a dropdown menu? The desired functionality is for the dropdown menu to close when clicking on a menu item with collapse, and then have the collapse feature work again when reopening the dropdown menu. & ...

javascripthtmlbootstrap-4dropdown

Is it possible to print a document without it ever showing on the screen

I am developing a feature on my page that allows users to print. The challenge I am facing is that when the user clicks print, I want to generate a new page in the background called "Printable.aspx" and only display the print dialog for it without disrupti ...

c#asp.nethtmlprinting