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.
U_S_AAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.