links contained within a single span inside an anchor tag

I am attempting to place all three spans within an anchor tag, inline. I am not certain what is missing from the code:

a.facebook-button {
  float: none;
  display: inline-block;
  margin-bottom: 5px;
  left: auto;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

.fb-button-left {
  width: 40px;
}

.fb-button-right,
.fb-button-center,
.fb-button-left {
  float: left;
  height: 40px;
  background: url(../img/fb-button.png) left top no-repeat;
}

.fb-button-right {
  width: 6px;
  background-position: 100% -80px;
}

.fb-button-center {
  padding: 0 5px 0 8px;
  line-height: 40px;
  font-size: 16px;
  color: #FFFFFF;
  background-color: #6385ba;
  background-position: left -40px;
  background-repeat: repeat-x;
}

div.socialInvites {
  padding: 20px 20px 0px 20px;
  text-align: center;
  left: auto;
}
<div class="socialInvites">
  <a href="main/facebook_request" class="facebook-button" id="facebookbutton">
    <span class="fb-button-left"></span>
    <span class="fb-button-center"><strong>Connect</strong> with <strong>Facebook</strong></span>
    <span class="fb-button-right"></span>
  </a>
</div>

htmlcss

Answer №1

If you're experiencing issues, consider including the following:

display:inline-block;

For instance:

.social-media-icon {
    width: 20px;
    height: 20px;
    display:inline-block;
}

Make sure to apply the same for the email-icon as well.

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

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Upon initial loading, the block appears on top of another block but remains fixed upon page refresh. The same issue occurs in the mobile version of the site and occasionally displays correctly. The website is built on WordPress and optimized using Page Spe ...

javascriptphpjqueryhtmlbootstrap-4

Is there a way to eliminate the 'All Files' option from an HTML file input field?

I have implemented a feature to allow users to upload custom files using . Currently, I am restricting the allowed file types to only ".Txt, .SVG, .BMP, .JPEG" by using accept=".Txt,.SVG,.BMP,.JPEG". This setting causes the browser's file-select dial ...

javascripthtmljquery

Tips for retrieving the value of a textarea in the jQuery LineControl Editor

I recently integrated a jquery plugin into my project to develop a wysiwyg text editor. I set up a textarea element to contain the text editor: <textarea class="editor" rows="3" name="textEditor" id="textEditor&quo ...

jqueryhtml

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

javascripthtmlnode.jsangularweb

Alignment of Card Element at Bottom in Bootstrap 5

Hey there! I'm new to Bootstrap and I'm facing an issue where I want to position a button element at the bottom of a card, even when the body text is minimal. However, no matter what I try, the button does not end up in the bottom right corner as ...

htmlcsstwitter-bootstrapbootstrap-5

Increasing box width in Django

I'm currently working on a website using Django all-auth for authentication. Everything is functioning perfectly, but I'm wondering if there's a way to increase the size of the username and password input boxes using HTML. Below is the code ...

htmlcssdjango

Position various images at specific coordinates on the screen using CSS

Looking for help with positioning four images on the screen using coordinates specified in the code. The top-left coordinate positioning is not displaying properly as intended. Can you assist in identifying and correcting the error? <!DOCTYPE html&g ...

htmlcssimage

What is the best way to perfectly center my CSS menu in a fluid style layout?

Can you assist me with this issue? I am trying to center my CSS menu precisely in the middle of the user's screen, both vertically and horizontally. Since users have varying screen resolutions, I need a fluid example to achieve this. Below is the HT ...

htmlcss

jQuery Mobile offers a feature that allows users to create collapsible elements

I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...

jqueryhtmlcss

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

javascriptjqueryhtmlaudiohover

Is there a way to transform BASE64 encoded HTML into a GIF format using ColdFusion?

I am getting a BASE64 encoded message from a WebService. This message is an interpretation of an HTML page and I can use pre-existing ColdFusion functions to convert and showcase it. However, my requirement now is to generate a GIF image of the HTML conten ...

htmlcoldfusionbase64gif

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

Avoid stretching the div to the edge of the screen

In the table on my page, I have implemented a feature using CSS to display additional information in a popup div. This works well when there is limited text, but if there is extensive text in the table, it extends beyond the screen width and becomes diffic ...

htmlcss

Creating a full-height application with CSS3 Flexbox and managing overflow

I'm currently working on an app that utilizes a traditional email layout similar to the one illustrated below. Using the new CSS3 flexbox model, everything was functioning perfectly until I added the feature for users to dynamically insert new items ...

cssflexbox

Tips for updating border color when focused with styled-components

How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using: import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; const String ...

javascriptcssreactjsstyled-components

Adding a certain number of days to a date within an existing ng-module in AngularJS

Hey everyone, I'm new to using AngularJS and I am currently attempting to incorporate one ng-module value into another ng-module date input within AngularJS. For example: if the date is 17-08-2016 and we add 20 days, the expected result should be 03-0 ...

htmlcssangularjsmeanjs

My CSS skills are put to the test in the latest version of Safari, as they only seem to work when I move

I have been working on a CSS menu for a website and have made it work perfectly on Firefox, Chrome, and an old Safari version. However, I encountered a strange issue with the latest Safari version (6.0.2 on Lion). When the page is fully loaded and I hover ...

htmlcssmenubariweb

Unable to trigger onClick event

The button I have with the id "jump-button" is not functioning at all. When clicked, nothing happens. I have added an alert(); to the onclick attribute to test if the button is working. However, the other two buttons (next and prev) are working perfectly ...

javascripthtmlonclick

The cdkDropList in Angular's drag and drop feature does not support the application of element styles

Just wanted to share my experience in case it helps someone else out there! I've been working on an Angular project where I needed to create a Trello-like application. To enable dragging elements from one list to another, I installed the Angular cdk ...

javascriptcssangularangular-cdkangular-cdk-drag-drop

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image