Struggling to align Social Media Share Buttons in inline format for a website

I'm having trouble aligning these social media share buttons with my inline list. I tried using vertical-align: top; on the <li> element, but it didn't work in Chrome.

You can view the page here:

Here is the full HTML/CSS code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .share-links {
            margin: 8px 0 0 0;
            padding-left: 0;
            display: inline;
        }
        .share-links li {
            margin-left: 0;
            padding-right: 15px;
            list-style: none;
            display: inline;
        }
    </style>
</head>
<body>

<ul class="share-links">
    <li><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="$fqUrl$post.Url"#if ($macros.IsNotNull($post.ResolvedImageUrl)) data-imageurl="$fqUrl$post.ResolvedImageUrl"#end></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
    <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="$fqUrl$post.Url" data-text="$post.Title by $post.User.ProperName" data-count="horizontal" data-via="lifeorganically">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
    <li><iframe src="http://www.facebook.com/plugins/like.php?href=$fqUrl$post.Url&amp;layout=button_count&amp;show_faces=false&amp;width=80;&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:25px;" allowTransparency="true"></iframe></li>
</ul>

</body>
</html>

Answer №1

Adjusting the height of the Instagram widget to 50px appears to be effective.

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

Is there a way to stabilize a section or content that bounces as I scroll?

Whenever I scroll up or down, there is a section on my page where I have implemented scroll magic. However, as I scroll through this section, it starts to jump until it reaches the position where I want it to be with transform:translateY(0). I am unsure h ...

The integration between React hook form and reactstrap input components is not functioning properly

Having an issue with react-hook-form and reactstrap. The component List.jsx is causing trouble: import { useContext, useEffect } from "react"; import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider'; import { Link } from "react- ...

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

Combining numerous base64 decoded PDF files into a single PDF document with the help of ReactJS

I have a scenario where I receive multiple responses in the form of base64 encoded PDFs, which I need to decode and merge into one PDF file. Below is the code snippet for reference: var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9 ...

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" ...

Create a division that will remain visible on the screen and allow scrolling when a certain class is

Having some trouble with a fixed class div that is not continuing to scroll after the class is removed on scroll. I've attempted to fix this issue but the div keeps getting hidden instead of continuing to scroll. If anyone has any advice or can poin ...

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

Uh oh! AngularJS just threw an error: Uncaught TypeError - angular.service is not a function. It happened in taskService.js

I've run into some issues with AngularJS, even though I have imported all the necessary libraries. Specifically, I am encountering the following errors: Uncaught TypeError: angular.service is not a function at taskService.js:2 taskFactory. ...

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

Switching between fixed and unfixed divs causes two absolute divs to alternate

I am currently working on a code to keep a fixed div ("two") in place between two absolute positioned divs ("one" and "footer") while scrolling. However, there is an issue that arises when the browser window is resized. The distance between the footer and ...

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

Modifying the color of drawings on a Javascript canvas

I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...

Struggling to center with margin 0 auto

I'm having trouble aligning the middle paragraph in an HTML footer. I attempted to use floats for layout: the first paragraph is floating to the left, the third paragraph is floating to the right, and the second (middle) paragraph has a margin of 0 au ...

The Owl carousel animation fails to work in Chrome browser

I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm ...

Comparison between Bootstrap 4 and Firefox Preload Error

Hello fellow front end developers who are experiencing an issue with CSS preload in Firefox versions above 74.0. I have encountered a problem with the following code snippet: <link rel='preload' as='style' onload="this.onload=null; ...

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed. ...

Is it possible to send an email with an attachment that was generated as a blob within the browser?

Is there a way to attach a file created in the browser as a blob to an email, similar to embedding its direct path in the url for a local file? The file is generated as part of some javascript code that I am running. Thank you in advance! ...

Setting the initial height of a textarea dynamically by binding it to the content with knockout data-binding

I need help with a JavaScript solution for expanding and collapsing the height of a text area on keyup event, while also initializing its height when a value is bound to it via a knockout custom binding. Any ideas on how to achieve this without using jQuer ...

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...