Safari browser causing Google Plus icon to disrupt alignment

My share buttons at the bottom of my page look fine in Chrome and Firefox:

https://i.sstatic.net/4mkbv.png

In Safari, not so much:

https://i.sstatic.net/X5WbO.png

And in Opera, they break too:

https://i.sstatic.net/66iXp.png

Here is my HTML code:

<div class="social">
              <div class='custom-tweeter-follow'>
                <a class="twitter-follow-button" href="https://twitter.com/mycompany" data-show-count='false'>Follow @mycompany</a>
              </div>
              <div class="fb-like" data-href="https://www.facebook.com/mycompany" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
              <div class='custom-gplus-follow'>
                <g:plusone size="medium" count="false" href='https://plus.google.com/xxx'></g:plusone>
              </div>
              <div syle='clear:both'></div>
</div>

And here is my CSS:

.copyright {
  float: left
  line-height: 25px
  font-weight: 300
  font-size: 14px
  width: 240px
}

.custom-tweeter-follow {
    float: left
    margin: 5px 10px 0px 0px
}
.custom-gplus-follow {
    float: right
    margin: 5px 0px 0px 0px
}

I'm not sure what I am doing wrong here. How can I prevent issues like this in the future? This should be pretty standard (sorry, I'm not a UI developer). What are other people doing differently?

htmlcsssafariopera

Answer №1

To fix the issue, simply move the custom-gplus-follow element to the top of the social section. This is because elements with a float: right style must be placed before other elements in the HTML code to ensure they stay on the same row.

Answer №2

Instead of relying on the float property like Av Avt suggested, consider using display: inline; for each class in this manner:

.copyright {
  display: inline;
  line-height: 25px;
  font-weight: 300;
  font-size: 14px;
  width: 240px;
}
.custom-tweeter-follow {
  display: inline;
  margin: 5px 10px 0px 0px;
}
.custom-gplus-follow {
  display: inline;
  margin: 5px 0px 0px 0px;
}
.fb-like {
  display: inline;
}

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

Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary. My p ...

htmlcsscustomizationmozillahtml-select

Overflowing is the width of Bootstrap's Grid Row

I managed to create this layout using only Bootstrap 5, without any CSS customization. Below is the HTML code I used: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo ...

cssbootstrap-5

What is the best method for eliminating the empty space below the footer?

I noticed a gap at the bottom of my website Header and CSS# There seems to be some white space at the bottom of my website's header even though I'm using bootstrap The white space issue in the header of my website persists despite using boot ...

htmlcssbootstrap-4footerspace

Currently seeking assistance in replacing an existing Wordpress object with a new one

I'm looking to swap out the current slider image with a new slider. Whenever I try to replace it with the TOP 5 Games, they disappear or don't show up at all. <?php if( function_exists('cyclone_slider') ) cyclone_slider('24&ap ...

phpjqueryhtmlcsswordpress

The styling of Bootstrap collided with my CSS

While working on my web development project, I encountered an issue with the navigation bar. My friend was responsible for creating the nav bar, but when I integrated his code into my website, it clashed with Bootstrap and caused display errors. I tried va ...

htmlcsstwitter-bootstrap

What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

I'm attempting to create a popup window that stretches from the top of the screen to the "applications" bar in Windows. Here's the code I'm using: function windowOpener(windowHeight, windowWidth, windowName, windowUri) { var windowHeight = ...

javascripthtmlcss

Unable to submit multiple forms simultaneously on the same HTML page

I have been encountering an issue with forms in a particular file. The problem arises when I click submit, rather than submitting the data from the filled form, it submits the data from the first form. Despite specifying unique ids for each form as shown i ...

phphtmlforms

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

As a web developer accustomed to working with websites, I am now faced with the task of creating a Windows-based program using VB.net. In this project, I have two domains - A and B, where B is embedded within A using an iframe element. The code snippet for ...

htmlvb.netiframewebbrowser-control

Transforming HTML code into a structured object

The provided code snippet includes HTML markup that needs to be transformed into a specific format. <html> <head> <title>Hello!</title> </head> <body> <div class=”div1”> <h1>This is a ...

javascriptarrayshtmlobject

Is it possible to verify the HTML of a webpage once AJAX actions have been carried out?

Currently, I am working on a web application where I am utilizing AJAX and JQuery to add and modify HTML elements. Everything seems to be functioning well, but I want to ensure that everything is running smoothly behind the scenes. When I inspect the page ...

javascripthtmlajaxvalidationdom

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

javascriptjquerycssdropdownbulma

Is it possible for one div to prompt an ajax response in another div?

In my attempt to create a main page with 3 div sections, I am using ajax to sequentially load content into each area. The idea is to have div1 already loading the page fetched from ajax as soon as the main page loads. This includes heavy mysql operations o ...

jqueryajaxhtmltriggers

"Change the value of a style setting in React to 'unset

One of the components has CSS properties such as `right` and `bottom` that are set with a classname. I tried to override these values using the `style` prop but have only been successful in setting numerical values like `10px` or `0px`, not `unset`. Wha ...

javascripthtmlcssreactjs

Toggle button to collapse the Bootstrap side bar on larger screens

I am currently utilizing the following template: An issue I am facing is that I want my sidebar to either shrink or hide when a button is clicked, specifically on a 22" PC screen. I have experimented with several solutions without achieving success. Alt ...

jquerycssangularjstwitter-bootstrap

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

javascriptcsslaravelvue.jsnpm-run

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

cssreactjscdn

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

Tips for extracting JSON data from an HTML form while also preserving the input type

When retrieving JSON from an HTML form, a common issue is that all the values inside the JSON are converted to string types. I have tried both methods below, but the result remains the same: result = json.dumps(request.form) result = jsonify(request.form ...

pythonhtmljsonrequest

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

javascriptphphtml

Multiple occurrences of IP addresses in MySQL

Looking for assistance. I have categories and comments stored with IP addresses. I need to validate all categories for repeated IPs. For each user who uses the same IP twice, add a CSS class (red) to their name. If they use it three times, add another CSS ...

phpmysqlcssip