Complicated alignment of third-party (Facebook "like" and Google +1) buttons with CSS styling

What is the optimal arrangement for positioning the Google+1 and Facebook Like buttons to ensure they line up neatly?

Currently, the initial element in my body is this heading, which appears at the top of all pages (lightly modified after logging in):

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left">
      &nbsp;
      <g:plusone size="small" href="https://www.apebroker.com/">
      </g:plusone>
      <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
      &nbsp;
    </td>
    <td align="left"></td><td align="right">It's more fun after you
      <a href="https://www.apebroker.com/loginform.php">login</a>&nbsp;
    </td>
  </tr>
</table>

I am facing an issue with this layout as it does not appear visually pleasing. I understand that slight variations may occur across different browsers, but there should be a certain level of consistency in appearance.

While the Google button is nicely centered vertically, the Facebook content seems to be positioned at the top of the page with no vertical alignment. See this example for demonstration:

My attempted solution was to add padding:2px; to the style of the Facebook iframe, which did adjust the positioning slightly. However, it also affected the Google button and caused the heading to expand, impacting the layout of the page.

Although I am not well-versed in iframes, I have been able to navigate through challenges on my own thus far.

Within my global style sheet, I have the following specifications:

body {
 margin:0px;
 padding:0px; 
 background-color:#e0e0b0; 
 color:#302010;
 font-family:"Trebuchet MS",Helvetica,Sans-serif; 
 font-size:100%;
}

I am reluctant to make changes to these styles as they have implications on various elements I do not wish to disrupt. For a detailed look at the complete style sheet and HTML source, you can visit the example page here.

Thank you in advance for any suggestions or insights provided!

htmlcsslayoutfacebook-likegoogle-plus-one

Answer №1

Can we include a plus one button and specify its width?

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>

Answer №2

One issue is that the table cells are adjusting their size based on the font size, even when there is no text in the table.

The best solution is to avoid using tables for layout purposes.

However, if you want to take control of the cell height and positioning, you can explicitly set it by adding the following code:

<td align="left" style="font-size: 1px">

By doing this, you can ensure that the cell height is what you specify, rather than letting it default to a larger size.

Once you make this adjustment, your website's buttons will display properly and you may need to adjust the positioning of certain elements.

Ultimately, the best practice is to move away from using tables and explore other layout options such as:

http://www.w3.org/2002/03/csslayout-howto

along with other resources available online.

Answer №3

I have discovered a solution for this issue by wrapping both the fb:like and g:plus elements within a div tag, and then applying the style of vertical-align: top; to both. You can view an example of this implementation at

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

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Can anyone tell me how to change the background color of the navbar when the navbar-collapse is displayed? I want one background color when the navbar-collapse is shown and a different color when it's collapsed. Is there a way to achieve this using C ...

htmlcsstwitter-bootstrapresponsive-designnavbar

Discover the contents within #document utilizing PUPPETEER

Can someone assist me as I am new here? I am trying to retrieve elements from a virtual reference #document in HTML using Puppeteer, but every time I attempt it, I receive an error stating that the element does not exist. Here are some examples: HTML &l ...

htmlnode.jspuppeteer

I am having difficulty with my ajax code and I am unsure of how to resolve it

Here is the code snippet. I am encountering an issue where pressing the button does not trigger any action, while I simply want to ensure that the AJAX functionality is working properly. The expected behavior is for an alert message to be displayed when th ...

jqueryhtmlajax

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Hello everyone, Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the ...

resizecsssizebackground-image

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss

HTML5 enables the creation of an imperceptible scrollbar

I am looking to make my scrollbar invisible without it being visible however, I still want it to function when hovering over the box Also, I need it to work smoothly on both tablets and computers, which is why I have opted for using html5 I would great ...

javascriptjquerycsshtml

Can a filter be eliminated from a CSS file in a modified CSS file?

Currently, I am facing a dilemma with a CSS rule in my file. The rule in question looks like this: .someElement { filter:gray(enabled=true) alpha(opacity=50); -ms-filter:"gray(enabled=true) alpha(opacity=50)" } This specific rule is causing some ...

css

Is it possible to enhance the GamepadAPI's functionality?

I've been working on enhancing the built-in GamepadAPI by adding custom controller code. With TypeScript, I created a basic function to trigger a "gamepadconnected" event. // emulate gamepadconnected event function dispatchGamepadConnectedEv ...

htmltypescriptgamepad-api

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Performing an Ajax call to fetch data from a MySQL database using the data1.php file with PDO results in HTML strings being stored in an array, encoded into JSON format, and then sent to the Ajax response function for display on a webpage. However, dealing ...

phphtmljsonajaxquotes

Graphical user interface already constructed for importing .csv files and inserting information into a MySQL database

Looking for a plugin that can assist me in transferring a .csv file to a mySQL database. Initially, I was planning on creating this functionality myself but I believe that the necessary code may already exist. Below, you will find a detailed description of ...

phpjavascriptmysqlhtml

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

htmlcsshtml-tablenested

Prevent Previous/Next Buttons, Autofill, and Completion Bar on iPhone Web Forms

Can the bar on web forms that includes the (Previous|Next) Autofill and Done button be disabled or suppressed? I know there are solutions for native apps, but I am specifically working on a web app. I'm wondering if there is a simple attribute to add ...

iphonehtml

Place an image on top of adsense

Is there a way to overlay an image on top of Google AdSense ads in order to track user clicks? I am trying to implement an onclick method for when someone clicks on the ads. .ad-alert { width: 728px; height: 400px; background: #cccccc; mar ...

htmlcssadsense

Discovering the tiniest value in every row within an HTML table with the help of PHP

I am working with a table that looks like this: 6xx 8xx 9xx 11xx 12xx 1 0.01 0.002 0.004 0.001 0.025 2 0.025 0.125 0.002 0.01 0.011 I need to highlight the smallest value in each row by making that cel ...

phphtmlmysqlcss

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

javascripthtmlcssbutton

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

csscss-selectors

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss

What is causing the auto-fill property in CSS Grid to malfunction when used in a vertical column direction?

I've been experimenting with the auto-fill property in grid rows, but it's not quite working as I intended. My goal is to create rows with a height of minmax(140px, 200px), however, what I'm actually getting is one row at 200px height and th ...

htmlcssvertical-alignmentcss-grid

Issue with showing an input field following the button click

I'm having a bit of trouble with this function that should add an input element to a div. I've tried using appendChild and also concatenating the object to innerHTML, but no luck so far. Could it be something my beginner's mind is missing? f ...

javascripthtmlinput