Strange CSS problem occurring specifically on Firefox and Opera browsers

I have set up sharing buttons on my website, but they appear distorted on Firefox and Opera browsers. Interestingly, they render perfectly on Chrome and even Internet Explorer. Here is a preview of how it currently looks:

If you are using Firefox or Opera, you can view the live version here: gdgtarena.com/2014/09/27/smartthings/

Below is the CSS styling used:

/*
 * Custom CSS for Sharing Buttons
*/

@media all {

    .si-button{
        position: relative;
        display: inline-block;
        overflow: hidden;
        padding: 4px 12px;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        font-family: 'Roboto Condensed',sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 24px;
        color: #fff;
        background-color: #2878c8;
        cursor: pointer;
        user-select: none;
        transition: all .4s ease-in-out;
        text-decoration: none !important;
    }

    (more CSS rules existing here...)

And here is a snippet of the HTML (including some PHP code):

(HTML and PHP code snippet included here)

Answer №1

<span class="si-icon"></span>
seems to be the root of the issue here

Here's a solution I suggest:

Modify the CSS

.si-icon { display: none; }
.si-share-text {
    /*float: left; - remove this float property */
    line-height: 16px; /* include this line-height property */
    margin: 0 !important;
    padding-left: 20px;
    padding-right: 20px; /* insert this padding property */
    text-align: center;
}

By implementing these changes, you should achieve the desired outcome

Answer №2

I would suggest removing the unnecessary

<span class="si-icon"></span>
element as it serves no purpose and only adds clutter. After that, make adjustments to the .si-share-text like so:

   .si-share-text {
        text-align: center;
        float: left;
        margin: 0px !important;
        padding-left: 5px;
        padding-right: 20px;
    }

With these changes, the layout appears much more visually appealing to me.

Answer №3

By relocating the si-icon element to come after the <p> tag, the problem is resolved while still maintaining the padding:

<span class="si-share-button"> 
    <i class="shareit-gplus shareit"></i> 
    <p class="si-share-text">Share</p> 
    <span class="si-icon"></span>
</span>

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

How is it possible that the form already comes with data filled in that I didn't input myself

I am currently working on a website using cakephp. Strangely, when I load the login form, both the username and password fields are already prefilled. The interesting part is that this information is not hardcoded anywhere in the form or controller files. ...

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px. <div class="center" style=""> <div class="uil-default-css" style="width: 200px ...

What is the best way to choose all initial elements within a single row using CSS?

Is it possible to target all the first elements in a single row? I know this is an unusual request, but I have a row that contains block elements. I want to apply CSS styling to each of the first elements. Here is the row: <ul class="slides"> &l ...

Is it necessary to use `top` or `parent` when utilizing local scripts in an iFrame?

Is it possible to eliminate the use of top or parent in iFrame localized scripts, as the title suggests? Upon examining the screenshot below, I encounter a "not defined" error unless I include top or parent as a prefix to my function call. test(); does n ...

Troubleshooting a malfunctioning PHP script that verifies user ranks

I wrote a PHP script to determine the user's rank and grant access to view specific content based on that rank. Unfortunately, the script is not functioning as intended. Regardless of the user's rank, the content is still displayed. Here is the ...

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

Animating Text with CSS for Different Message Lengths

I have been exploring alternatives to the marquee tag and discovered a way to achieve this through CSS. However, the messages I am working with vary in length. Is there an alternative to setting the '45s' attribute to maybe 100% so that regardles ...

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page: Here is a screenshot of the page: https://i.sstatic.net/jqPYJ.png This is what I am aiming f ...

Padding will not completely fill the <li> and <div> elements

Looking to create a sleek menu bar that's 40px tall and fills up 80% of the browser width. The challenge arises when trying to center the text within the menu items. Despite adjusting padding for alignment, there's still a small gap because of & ...

Display the div only if the content matches the text of the link

Looking for a way to filter posts on my blog by category and display them on the same page without navigating away. Essentially, I want users to click on a specific tag and have all posts with that tag show up. Since the CMS lacks this functionality, I pla ...

Different custom background images for every individual page in Nuxt

Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss. @import 'variables'; @import 'page_transition'; @import url('https://f ...

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

What's the best way to constrain a draggable element within the boundaries of its parent using right and bottom values?

I am currently working on creating a draggable map. I have successfully limited the draggable child for the left and top sides, but I am struggling to do the same for the right and bottom sides. How can I restrict the movement of a draggable child based o ...

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

Having trouble sending an array from Flask to a JavaScript function

As a newcomer to web development and JavaScript, I'm struggling to pass an array from a Flask function into a JavaScript function. Here's what my JS function looks like: function up(deptcity) { console.log('hi'); $.aja ...

Configuring flash to work with Selenium using Python's Firefox browser

Every time I open Firefox, the Flash plugin is there. However, when I use Selenium to open Firefox, Flash is not enabled. How can I enable Flash in Selenium? Here is the code snippet I am currently using: firefoxProfile = FirefoxProfile() firefoxProfi ...