Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    facebook and twitter buttons change positions in different browsers

    hi

    I'm helping my friend on his website and I got a problem

    he has a Facebook and twitter link on his website's index page


    but when I open it in google chrome it's to the top

    in fire fox it's a bit to the bottom and on ie it is right on the footer

    this is a link to the site

    I have attached an image of how i want it to look

    please help and thankyou

    this is the index.html page:

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
    
    <head>
    <title>MP Dezyn | Freelance Web/Graphic Designer</title>
    <link rel="image_src" href="http://mpdezyn.me/Slices/Imprint-2.png" / >
      <meta property="og:description" content="My name is Michael Padua. I am a young upcoming professional web and graphic designer, I have studied graphic design (HND Graphic Design Level 5) and have three years’ experience collaborating with many established
    companies." />
    
      <meta property="fb:admins" content="10151039407336138" />
    <meta property="og:title" content="MP Dezyn" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://mpdezyn.me/Slices/Imprint-2.png" />
    <meta property="og:image" content="" />
    <meta property="og:url" content="http://mpdezyn.me/" />
    <meta property="og:site_name" content="MP Dezyn" />
       
      <meta name="google-site-verification" content="YTiTQaxABj2NW7tmMRHRuwSfbc6-8sd-uB6UsYHt49g" />
        
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />
      <script type="text/javascript">
    if (navigator.userAgent.toLowerCase().indexOf('chrome')!=-1){
        document.write('<link rel="stylesheet" type="text/css" href="all.css"/'); 
      
    }
    </script>
        
      <link rel="shortcut icon" href="http://mpdezyn.me/Slices/favicon.ico" />
      <link rel="shortcut icon" href="http://mpdezyn.me/Slices/favicon.gif" />
      <link media="all" rel="stylesheet" type="text/css" href="all.css" />
      <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="jquery.main.js"></script> 
      
    </head>
    <body>
       <div class="page">
        <!--wrapper-->
        <div id="wrapper">
          <!--nav-->
          <ul id="nav">
            <li><a href="portfolio.html">Portfolio</a></li>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
          <!--main-->
          <div id="main">
            <div class="main-holder">
              <div class="main-frame">
                <div class="main-content">
                  <!--header-->
                  <div id="header">
                    <!--logo-->
                    <strong class="logo"><a href="http://mpdezyn.me">MP Dezyn</a></strong>
                    <!--social-network-->
                    <div class="social-network">
                      <div class="holder">
                        <ul>
                          <li><a href="http://www.facebook.com/mikevonne" class="facebook">facebook</a></li>
                          <li><a href="https://twitter.com/#!/MPDezyn" class="twitter">twitter</a></li>
                          <li><a href="mailto:mpadua.07@gmail.com" class="email">email</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!--container-->
                  <div class="container">
                    <!--sidebar-->
                    <div id="sidebar">
                    <h1></h1>
                    <div class="photo">
                      <a href="#"><img src="http://mpdezyn.me/Slices/Imprint-2.png" width="95" height="137" alt="MP Dezyn Photo" /></a>
                    </div>
                    </div>
                    <!--content-->
                    <div id="content">
                      <!--text-->
                      <div class="">
                        <p></p>
                      </div>
                      <h2></h2>
                      <p></p>
                      <!--items-->
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="footer">
         
         
            <p>&copy; 2012 <a href="http://michaelpadua.carbonmade.com/about">MP Dezyn</a>. All rights reserved | Design By <a href="http://coroflot.com/mpadua">Michael Padua</a></p>
            
            
             <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmpdezyn.me&amp;send=false&amp;layout=button_count&amp;width=2750&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21&amp;appId=149702291820304" scrolling="no" frameborder="0" style="border:none;
          overflow:hidden; width:2750px; height:21px; margin-top:-65px; margin-left: 153px;" allowTransparency="true"></iframe>
          
      <iframe allowtransparency="true" frameborder="0" scrolling="no"
      src="//platform.twitter.com/widgets/follow_button.html?screen_name=mpdezyn" style="margin-left:250px; margin-top: -65px; width:300px; height:20px;"></iframe>
          <!--photo-->
          <!--footer-->
          </div>
        </div>
      </div>
    </body>
    </html>

    This is the all.css page

    Code:
    body {
      margin:0;
      color:#000;
      font:11px/20px Arial, Helvetica, sans-serif;
      background:#000 url(http://i47.tinypic.com/2z4n0rc.jpg) repeat-x;
      height:100%;
      min-width:700px;
    }
    img {border-style:none;}
    a {
      color:#00f;
      text-decoration: none;
    }
    a:hover {text-decoration: underline;}
    input,
    textarea,
    select {
      font:100% Arial, Helvetica, sans-serif;
      vertical-align:middle;
      color:#000;
    }
    form,
    fieldset {
      margin:0;
      padding:0;
      border-style:none;
    }
    q {quotes:none;}
    q:before {content:''}
    q:after {content:''}
    /*page*/
    .page{
      background:url(http://i46.tinypic.com/9bajhv.jpg) no-repeat 50% 0;
      min-height:100%;
      padding:39px 0 0;
      overflow:hidden;
    }
    /*wrapper*/
    #wrapper {
      width:643px;
      margin:0 auto;
      background:url(http://i48.tinypic.com/dcssr9.png) no-repeat 50% 100%;
      
    
    padding:0 0 235px;
    }
    /*nav*/
    #nav{
      padding:0 35px;
      margin:0 auto 20px;
      list-style:none;
      height:30px;
      width:312px;
      font:14px/28px 'DroidSerifBold', Arial, Helvetica, sans-serif;
      background:url(http://i48.tinypic.com/28k0wnc.png) no-repeat 0 100%;
    }
    #nav:after{
      content:'';
      display:block;
      clear:both;
    }
    #nav li{
      float:left;
      background:#0099e3;
      height:30px;
      width:82px;
      text-align:right;
      padding:0 0 0 12px;
    }
    #nav li:first-child{
      padding:0 12px 0 0;
      text-align:left;
    }
    #nav li:first-child+li{
      padding:0 6px;
      text-align:center;
    }
    #nav li a{
      color:#ccebf9;
    }
    #nav li.active{
      text-align:center;
      width:157px;
      height:40px;
      padding:0 5px;
      margin:-11px -23px 0 -22px;
      position:relative;
      background:url(http://i48.tinypic.com/28k0wnc.png) no-repeat;
    }
    #nav li.active a{color:#fff;}
    /*main*/
    #main{
      background:url(http://i48.tinypic.com/jb01tw.png) no-repeat;
      padding:317px 0 0;
      width:643px;
      height:100px;
     }
    #main2{
      background:url(http://i49.tinypic.com/35cqvbq.png) no-repeat;
      padding:317px 0 0;
      width:643px;
      height:100px;
    }
    #main3{
      background:url(http://i47.tinypic.com/1emc9l.png) no-repeat;
      padding:317px 0 0;
      width:643px;
      height:100px;
    }
    }
    
    /*main-holder*/
    .main-holder{
      width:100%;
      background:url() no-repeat 100% 100%;
      padding:0 0 0px;
    }
    
    .main-holder2{
      width:100%;
      background:url() no-repeat 100% 100%;
      padding:0 0 68px;  
    }
    .main-holder:after{
      content:'';
      display:block;
      clear:both;
    }
    /*main-frame*/
    .main-frame{
      float:left;
      width:100%;
      background:url()repeat-y -653px 0;
    }
    .main-frame2{
      float:left;
      width:100%;
      background:url() repeat-y -653px 0;
    }
    /*main-content*/
    .main-content{
      padding:0 33px;
      margin:-283px 0 0;
      min-height:302px;
    }
    /*header*/
    #header{
      overflow:hidden;
      padding:0 0 28px 3px;
    }
    /*social-network*/
    .social-network{
      float:right;
      padding:0 16px 0 0;
      background:url(http://i47.tinypic.com/2hp0q4l.png) no-repeat 100% 100%;
    }
    .social-network .holder{background:url(http://i47.tinypic.com/2hp0q4l.png) no-repeat;}
    .social-network ul{
      padding:5px 0 4px 9px;
      margin:0 -16px 0 0;
      overflow:hidden;
      list-style:none;
    }
    .social-network li{
      float:left;
      margin-right:5px;
    }
    .social-network a{
      display:block;
      text-indent:-9999px;
      overflow:hidden;
      height:34px;
      width:31px;
    }
    .social-network .facebook{background:url(http://i50.tinypic.com/1568f0h.png) no-repeat;}
    .social-network .twitter{background:url(http://i50.tinypic.com/1568f0h.png) no-repeat -37px 0;}
    .social-network .email{background:url(http://i50.tinypic.com/1568f0h.png) no-repeat -75px 0;}
    /*logo*/
    .logo{
      float:left;
      text-indent:-9999px;
      overflow:hidden;
      background:url(http://i46.tinypic.com/aw6n42.jpg) no-repeat;
      width:168px;
      height:38px;
    }
    .logo a{
      display:block;
      height:100%;
    }
    /*photo*/
    .photo{
      background:url(http://mpdezyn.me/Slices/Imprint-2.png) no-repeat;
      width:95px;
      margin-top:50px;
      height:137px;
    }
    
    
    
    .photo img{display:block;}
    #main h1{
      font:22px/20px 'DroidSerifBold', Arial, Helvetica, sans-serif;
      margin:0 0 13px;
      color:#fefefe;
    }
    /*container*/
    .container{width:100%;}
    .container:after{
      content:'';
      display:block;
      clear:both;
    }
    /*sidebar*/
    #sidebar{
      float:left;
      width:100px;
      padding:24px 0 0 30px;
      margin:0 0 0 -30px;
      background:url(http://i45.tinypic.com/o087t0.png) no-repeat;
    }
    /*content*/
    #content{
      float:right;
      width:459px;
      letter-spacing:0px;
      padding:px 0 0;
    }
    /*text*/
    #content .text{
      background:url() no-repeat 0 100%;
      padding:0 0 4px;
      margin:0 0 7px;
    }
    #content p{margin:0 0 9px;}
    #content h2{
      font:11px/20px 'DroidSerifBold', Arial, Helvetica, sans-serif;
      margin:0;
    }
    /*items*/
    .items{
      padding:0;
      margin:-8px 0 0;
      list-style:none;
      font-weight:bold;
    }
    .items li{
      display:inline;
      background:url(-) no-repeat;
      padding:0 3px 0 19px;
    }
    /*contact-form*/
    .contact-form{
      margin:7px -2px 18px 1px;
      overflow:hidden;
      width:462px;
      margin-top: 150px;
      
    }
    .contact-form .col{
      float:left;
      width:161px;
    }
    .contact-form .row{
      overflow:hidden;
      margin:0 0 5px;
      height:31px;
      width:161px;
      background:url(http://i47.tinypic.com/289xrr.gif) no-repeat;
    }
    .contact-form .row input[type="text"]{
      float:left;
      border:none;
      background:none;
      margin:0;
      width:147px;
      padding:8px 7px;
      color:#fff;
      font:bold 11px/13px Arial, Helvetica, sans-serif;
    }
    .contact-form .right-col{
      float:right;
      width:282px;
    }
    .contact-form  textarea{
      float:left;
      border:1px solid #000;
      border-color:#1a1a1a #474747 #474747 #1a1a1a;
      background:#1f1f1f;
      margin:0 0 4px;
      width:260px !important;
      height:58px;
      padding:4px 10px;
      color:#fff;
      font:bold 11px/20px Arial, Helvetica, sans-serif;
    }
    .btn-send{
      background:url(http://i45.tinypic.com/2920ili.gif) no-repeat;
      width:281px;
      
    
    height:32px;
      border:none;
      overflow:hidden;
      margin:0;
      padding:0;
      text-align:center;
      cursor:pointer;
      display:block;
      color:#004363;
      text-shadow:1px 1px #00e2f2;
      font:bold 12px/18px Arial, Helvetica, sans-serif;
    }
    .contact-form .error-row input[type="text"],
    .contact-form .error-row textarea {color:#c00;}
    /*gallery-holder*/
    .gallery-holder{
      overflow:hidden;
      width:460px;
      position:relative;
      margin:0 0 18px;
    }
    /*frame*/
    .gallery-holder .frame{
      overflow:hidden;
      width:480px;
      position:relative;
      margin:0 0 9px;
      margin-top: 140px;
    }
    /*gallery*/
    .gallery{
      position:relative;
      width:99999px;
      padding:0;
      margin:0;
      list-style:none;
      overflow:hidden;
    }
    .gallery li{
      float:left;
      padding-right:20px;
    }
    .gallery img{display:block; border: 5px solid #fff;}
    /*switcher*/
    .gallery-holder .switcher{
      float:right;
      padding:0;
      margin:0;
      list-style:none;
    }
    .gallery-holder .switcher li{
      float:left;
      margin-left:4px;
    }
    .gallery-holder .switcher li a{
      display:block;
      height:8px;
      width:8px;
      text-indent:-9999px;
      overflow:hidden;
      background:url(http://i49.tinypic.com/2gw5jrb.png) no-repeat 0 -177px;
    }
    .gallery-holder .switcher li:hover a,
    .gallery-holder .switcher .active a{background:url(http://i49.tinypic.com/2gw5jrb.png) no-repeat 0 -195px;}
    /*light-box*/
    .light-box{
      display:none;
      background:#fff;
      padding:9px;
      position:absolute;
      top:50%;
      left:50%;
      margin:-191px 0 0 -291px;
    }
    .light-box img{
      display:block;
      margin:0 auto;
    }
    /*btn-close*/
    .light-box .btn-close{
      position:absolute;
      top:-16px;
      right:-23px;
      text-indent:-9999px;
      overflow:hidden;
      height:38px;
      width:38px;
      background:url(http://i49.tinypic.com/2gw5jrb.png) no-repeat 0 -105px;
    }
    /*footer*/
    #footer{
      padding:8px;
      text-align:center;
      color:#7d7d7d;
      font:bold 11px/14px Arial, Helvetica, sans-serif;
    }
    #footer a{color:#008fc1;}
    #footer p{margin:0;}
    /*
     * FancyBox - jQuery Plugin
     * Simple and fancy lightbox alternative
     *
     * Examples and documentation at: http://fancybox.net
     * 
     * Copyright (c) 2008 - 2010 Janis Skarnelis
     * That said, it is hardly a one-person project. Many people have submitted bugs, code, 
    
    and offered their advice freely. Their support is greatly appreciated.
     * 
     * Version: 1.3.4 (11/11/2010)
     * Requires: jQuery v1.3+
     *
     * Dual licensed under the MIT and GPL licenses:
     *   http://www.opensource.org/licenses/mit-license.php
     *   http://www.gnu.org/licenses/gpl.html
     */
    
    #fancybox-loading {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px;
      cursor: pointer;
      overflow: hidden;
      z-index: 1104;
      display: none;
    }
    
    #fancybox-loading div {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 480px;
      background-image: url('http://i49.tinypic.com/jakw1c.png');
    }
    
    #fancybox-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1100;
      display: none;
    }
    
    #fancybox-tmp {
      padding: 0;
      margin: 0;
      border: 0;
      overflow: auto;
      display: none;
    }
    
    #fancybox-wrap {
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      z-index: 1101;
      outline: none;
      display: none;
    }
    
    #fancybox-outer {
      position: relative;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    
    #fancybox-content {
      width: 0;
      height: 0;
      padding: 0;
      outline: none;
      position: relative;
      overflow: hidden;
      z-index: 1102;
      border: 0px solid #fff;
    }
    
    #fancybox-hide-sel-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      z-index: 1101;
    }
    
    #fancybox-close {
      position: absolute;
      top: -15px;
      right: -15px;
      width: 30px;
      height: 30px;
      background: transparent url('http://i49.tinypic.com/jakw1c.png') -40px 0px;
      cursor: pointer;
      z-index: 1103;
      display: none;
    }
    
    #fancybox-error {
      color: #444;
      font: normal 12px/20px Arial;
      padding: 14px;
      margin: 0;
    }
    
    #fancybox-img {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      border: none;
      outline: none;
      line-height: 0;
      vertical-align: top;
    }
    
    #fancybox-frame {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    
    #fancybox-left, #fancybox-right {
      position: absolute;
      bottom: 0px;
      height: 100%;
      width: 40px;
      cursor: pointer;
      outline: none;
      background: transparent url('http://i49.tinypic.com/msyc61.jpg');
      z-index: 1102;
      display: none;
    }
    
    #fancybox-left {
      left: -40px;
    }
    
    #fancybox-right {
      right: -40px;
    }
    
    #fancybox-left-ico, #fancybox-right-ico {
      position: absolute;
      top: 50%;
      left: -9999px;
      width: 30px;
      height: 30px;
      margin-top: -15px;
      cursor: pointer;
      z-index: 1102;
      display: block;
    }
    
    #fancybox-left-ico {
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -30px;
    }
    
    #fancybox-right-ico {
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -60px;
    }
    
    #fancybox-left:hover, #fancybox-right:hover {
      visibility: visible; /* IE6 */
    }
    
    #fancybox-left:hover span {
      left: 20px;
    }
    
    #fancybox-right:hover span {
      left: auto;
      right: 20px;
    }
    
    .fancybox-bg {
      position: absolute;
      padding: 0;
      margin: 0;
      border: 0;
      width: 20px;
      height: 20px;
      z-index: 1001;
    }
    
    #fancybox-bg-n {
      top: -20px;
      left: 0;
      width: 100%;
      background-image: url('http://i46.tinypic.com/2efqb5x.png');
    }
    
    #fancybox-bg-ne {
      top: -20px;
      right: -20px;
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -162px;
    }
    
    #fancybox-bg-e {
      top: 0;
      right: -20px;
      height: 100%;
      background-image: url('http://i46.tinypic.com/2efqb5x.png');
      background-position: -20px 0px;
    }
    
    #fancybox-bg-se {
      bottom: -20px;
      right: -20px;
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -182px; 
    }
    
    #fancybox-bg-s {
      bottom: -20px;
      left: 0;
      width: 100%;
      background-image: url('http://i46.tinypic.com/2efqb5x.png');
      background-position: 0px -20px;
    }
    
    #fancybox-bg-sw {
      bottom: -20px;
      left: -20px;
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -142px;
    }
    
    #fancybox-bg-w {
      top: 0;
      left: -20px;
      height: 100%;
      background-image: url('http://i46.tinypic.com/2efqb5x.png');
    }
    
    #fancybox-bg-nw {
      top: -20px;
      left: -20px;
      background-image: url('http://i49.tinypic.com/jakw1c.png');
      background-position: -40px -122px;
    }
    
    #fancybox-title {
      font-family: Helvetica;
      font-size: 12px;
      z-index: 1102;
    }
    
    .fancybox-title-inside {
      padding-bottom: 10px;
      text-align: center;
      color: #333;
      background: #fff;
      position: relative;
    }
    
    .fancybox-title-outside {
      padding-top: 10px;
      color: #fff;
    }
    
    .fancybox-title-over {
      position: absolute;
      bottom: 0;
      left: 0;
      color: #FFF;
      text-align: left;
    }
    
    #fancybox-title-over {
      padding: 10px;
      background-image: url('https://webftp.dreamhost.com/index.php?get_action=open_file&repository_id=dynamic_ftp&file=%2Fmpdezyn.me%2Ffancy_title_over.png');
      display: block;
    }
    
    .fancybox-title-float {
      position: absolute;
      left: 0;
      bottom: -20px;
      height: 32px;
    }
    
    #fancybox-title-float-wrap {
      border: none;
      border-collapse: collapse;
      width: auto;
    }
    
    #fancybox-title-float-wrap td {
      border: none;
      white-space: nowrap;
    }
    
    #fancybox-title-float-left {
      padding: 0 0 0 15px;
      background: url('http://i49.tinypic.com/jakw1c.png') -40px -90px no-repeat;
    }
    
    #fancybox-title-float-main {
      color: #FFF;
      line-height: 29px;
      font-weight: bold;
      padding: 0 0 3px 0;
      background: url('http://i46.tinypic.com/2efqb5x.png') 0px -40px;
    }
    
    #fancybox-title-float-right {
      padding: 0 0 0 15px;
      background: url('http://i49.tinypic.com/jakw1c.png') -55px -90px no-repeat;
    }
    Attached Thumbnails Attached Thumbnails facebook and twitter buttons change positions in different browsers-firefox-vers11.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    but when I open it in google chrome it's to the top
    I get the desired/same display in FF & Chrome
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •