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

Execute function prior to redirection of iframe

I have a specific challenge with an iframe on my webpage. I am looking to trigger a function right before the iframe reloads a new page, rather than after it has finished loading. I need this function to be triggered before the iframe redirects to the new ...

javascripthtmliframexhtml

styled-components: the parent's styles take precedence over the child's styles

image export const LogOutButton = styled.button` display: inline-block; .... `; export default styled(ThemedApp)` .... button { .... display: flex; .... } `; Upon inspection, it is evident that the Logout button (with class gBuhXv) ...

cssreactjsstyled-components

Issues with button hover causing background transition difficulties

I've been trying to achieve a smooth background image transition upon hovering over my buttons. Despite searching for solutions in various posts, I haven't been successful in applying any of them to my code. I realize that J Query is the way to ...

javascriptjqueryhtmlcss

javascript issue with showing content on click

I'm currently working on a school assignment where I am using the onclick() function to display information about an object. However, I am facing an issue where the information is not popping up as expected. HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcssoneclick

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

cssreactjsmaterial-ui

Enhance the dropdown menu by incorporating a caret icon

Click here for the image, I am trying to incorporate the Bootstrap caret class into my select dropdown menu. .select_menu{ font-size: 12px; outline: none; border: thin #ddd solid; -webkit-appearance: none; -moz-appearance: none; appearance: ...

htmlcsstwitter-bootstrap

Tips for preventing menu flickering caused by overflow during CSS animations

I recently created a vertical menu with an interesting underline effect that appears when hovering over the menu items. Even though the snippet initially failed to execute, I discovered this cool hover effect (taken from here) which I wanted to implement: ...

htmlcss

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempte ...

javascriptjqueryhtmlcssprinting

Is it worth the effort to incorporate HTML5 header, main, section elements, and more into your website?

Do all of these elements simply serve the purpose of making the HTML code easier to read? They don't have any additional functions, right? Unfortunately, we could achieve the same result without them. <Div> <p> Example </p> </ ...

html

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

Looking for assistance with CSS selection: <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <div class="numCellWrapper"> ... When defining a css selector, how can I target a specific element among multiple elements of the same ...

cssselenium

In Stripe.js, the background color and height of the credit card input cannot be customized

I'm struggling with customizing the appearance of a Stripe credit card input within my Vue.js application. I want to adjust the background color to #f1f1f1 and set the height to 60px, but despite trying both base styles and css, I can't seem to g ...

javascriptcssvue.jsstripe-payments

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover

Submitting hidden values and multiple values with checkboxes in HTML

Is there a way to link multiple form fields with one checkbox for submission? For example: <input type=hidden name=code value="cycle_code" /> <input type=checkbox name=vehicle value="cycle" /> <input type=hidden name=code value="car_code" ...

javahtmljspcheckbox

Looking for assistance with troubleshooting CSS issues specifically in Internet Explorer

Hey there! I've been working on a landing page and it's looking good in Safari, Firefox, and Chrome. The only issue is that the layout is all messed up in IE (any version). If any of you experts could take a look at it and give me some suggesti ...

htmlcssinternet-explorer

Use Angular to update the text input value

I am currently working with a basic input that is showing a timestamp in milliseconds, which is stored on the scope. However, I am interested in having it display formatted time without needing to create a new variable. I am exploring a potential solutio ...

htmlangularjs

The Chartjs bar graph fails to display data upon initial page load

My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...

javascripthtmljquerychart.js

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

htmlcssdom

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Files are nowhere to be found when setting up an angular project

After creating an Angular project, I noticed that some key files were missing in the initial setup, such as app.modules.ts and app-routing.modules.ts The project was generated using the command ng new name Here is a screenshot displaying all the files th ...

htmlcssangulartypescript

The sub menu in IE 8 does not stay open while hovering over it

My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is disp ...

cssdrop-down-menuinternet-explorer-8submenu