Solved

Facebook & Twitter buttons overlapping

Posted on 2014-02-25
3
347 Views
Last Modified: 2014-03-17
We would appreciate help getting our Facebook and Twitter buttons to NOT overlap.

We've been able to duplicate the problem in chrome, however it may occur in other browsers, but we've not been able to to duplicate.

start here http://www.demodomain.com/
Click "Browse People"
Click "Back Arrow" button on browser
This is the result
http://screencast.com/t/GhNIAjmveZv

http://screencast.com/t/2WJhRDK9


It usually happens when a user clicks the back button or sometimes reloads the webpage.

We are using the current version of Chrome, to date.
http://screencast.com/t/BBxbtB6lPbrV

We tried to fix this by putting facebook and twitter buttons in a table, and button in their own cell.

Please advise.

Thank you.
0
Comment
Question by:U_S_A
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39887243
There is little point trying to fix it in its current state.  Nice design; but on a technical level it is junk.  the HTML validator throws 43 errors, including structural issues and the use of obsolete elements.

Until you cleanup the code to get rid of the errors any attempt to fix presentation is just wasted effort. even if you get it right for now in one or more browsers, it will just be a fragile piece of glass waiting to be broken by the slightest change in code, browser, resolution or OS.

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 39887308
Looking fine for me in IE11, FF and Chrome
0
 
LVL 40

Accepted Solution

by:
Eoin OSullivan earned 500 total points
ID: 39888253
I would agree with COBOLdinosaur that there are some fundamental HTML issues with your site and you need to address these  ...

The problem with the social buttons is that you've simply inserted iframe code .. which loads the sharebuttons.php file - http://www.demodomain.com/sharebuttons.php

In the sharebuttons.php file you are simply sticking the 2 scripts into 2 table cells and this will not fix the rendering issue.

You need to add a fixed height and width to each of the TD - table cells because the table is rendered before the scripts load in the facebook and twitter links ... and therefore the table cells do not know what size to be.  If you pre-set the height and width of each cell using a css class or inline styles then the table will draw and allow enough space for each set if icons

<tr>
<td style="
    width: 100px;
    height:  28px;
">** facebook code here**</td>
<td style="
    width: 70px;
    height: 28px;
">**twitter code here **</td>
</tr>

Open in new window

0

Featured Post

Create Professional Looking Email Signatures

Create "Professional HTML Email Signatures" with ease.
7 Day Money Back Guarantee if not 100% Satisfied.
Affordable - Try it out for 7 Days Totally Risk Free.
Installers provided for over 45 Email clients.
Both Windows & MAC Supported.
Highly Recommended!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Keyup listener getting fired on initial page load 1 53
How do I Import CSV File In my PHP Application 29 76
Error Handler 8 43
modify font on ninja form 1 27
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question