Solved

Facebook & Twitter buttons overlapping

Posted on 2014-02-25
3
340 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
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 39

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

777 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