Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page facebook and twitter buttons change positions in different browsers

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-25-2012, 12:08 AM   PM User | #1
abdulrab
New to the CF scene

 
Join Date: Jun 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
abdulrab is an unknown quantity at this point
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
Click image for larger version Name: firefox vers11.jpg Views: 24 Size: 44.6 KB ID: 11308  
abdulrab is offline   Reply With Quote
Old 06-25-2012, 05:56 AM   PM User | #2
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,680
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Quote:
but when I open it in google chrome it's to the top
I get the desired/same display in FF & Chrome
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 10:05 PM.
Advertisement
Log in to turn off these ads.