Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Facebook & Twitter buttons overlapping

Posted on 2014-02-25
3
Medium Priority
?
360 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 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

721 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