• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

Facebook & Twitter buttons overlapping

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
U_S_A
Asked:
U_S_A
1 Solution
 
COBOLdinosaurCommented:
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
 
GaryCommented:
Looking fine for me in IE11, FF and Chrome
0
 
Eoin OSullivanConsultantCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now