2014-04-24 88 views
0

這是我的第一個問題,我是一個晚飯noobie,但我很想學習。firefox將div推到右邊

我有這個網站http://autogoog.com/site/#about這是寫在&風格的HTML/CSS。

該網站在Chrome和Safari瀏覽器上看起來不錯,但是在Firefox上,Team頁面被推向右側。

這裏是html部分,下面是css。任何幫助將是驚人的和感激的。

<!-- TEAM STARTS 
    ========================================================================= --> 
    <section id="team"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 section-heading animated" style="text-align:center" data-animation="fadeInUp" data-animation-delay="0"> 
       <h2>Leadership</h2> 
       <h1>meet the team</h1> 
       <p class="line">&nbsp;</p> 
      </div>   
     <div class="owl-carousel" id="our-team"> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/1.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">JAY LEOPARDI</div> 
       <div class="designation">FOUNDER & CEO</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/jay.leopardi.1?fref=ts"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Jay Leopardi, lifestyle and pop culture branding expert, is the founder & CEO of Bad Boy Branding. Working with start-ups to top tier brands, he reinvents the traditional structure of brand development. Visit <a href="http://www.JayLeopardi.com/" target="_blank">JAYLEOPARDI.COM</a> to find out more detailed information.</div> 
     </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/2.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">SHAWN C. LEOPARDI</div> 
       <div class="designation">COO</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/shawn.leopardi"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Expert in marketing & business operations, Shawn brings over 20 years of expertise to Bad Boy Branding. His processes have been proven to build mega-corporations from $20-80 million in annual revenue.</div>     
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/3.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">ANTHONY MARABELLA</div> 
       <div class="designation">VP SALES & MARKETING</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/anthony.marabella"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Anthony leads a team of highly skilled business professionals while maintaining a great balance of customer care and dynamic sales techniques. He has implemented custom-tailored digital strategies that power the bullets at Bad Boy Branding.</div>     
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/4.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">DANIELLE BYNUM</div> 
       <div class="designation">VP BUSINESS DEVELOPMENT</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Known in the industry as 「The Business Development Shark」, Bad Boy Branding depends on Danielle’s efficient and highly seasoned business senses. Having worked directly for 「The Shark」 Daymond John, she has learned how to develop relationships worldwide with major corporations. Additionally, Danielle empowers BBB with an evolutionary, hyper-speed licensing model.</div>     
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/8.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">BARRY SHRUM,ESQ.</div> 
       <div class="designation">CORPORATE LEGAL</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Barry Neil Shrum, Esquire, aka 「The Bad Boy of Legal」, has been practicing entertainment & corporate law for over 16 years. Having represented some of the biggest names in the industry, Barry safeguards BBB and the interests of its clients. As a result of doing business with Jay Leopardi for over a decade, they formed an acquisitions corporation to purchase brands that align well with BBB’s business model.</div>     
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/5.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">HUTSON MILLER</div> 
       <div class="designation">VP ENTERTAINMENT</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/hutson.miller"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Former Atlantic Records/WEA executive & broker of the LA Lakers Owner Dr. Jerry Buss, Hutson works directly with top musicians, producers, professional athletes and celebrity entertainers. His list includes Brandy, Lil Kim, Pharrell Williams, Wyclef Jean, Jason Kidd, Desean Jackson, Tom Cruise & the list goes on. Working with Jay Leopardi for the past decade, developing a solid personal & business relationship, he now leads the entertainment division of Bad Boy Branding.</div> 
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/6.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">PABLO FONSECA</div> 
       <div class="designation">CREATIVE DIRECTOR</div><br> 
       <div class="team-social"><a href="#"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/pfon72"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Expert TV broadcasting & creative director, Pablo has worked for major corporations such as Univision, Telemundo, and the Zimmerman agency. Leading BBB’s creative team & managing a host of dynamic designers, he creates award-winning content that brings significant value. High profile clients, such as Ashley furniture, Nissan national, and Atlantis, have all received Pablo’s creative stamp.</div> 
      </div> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="0"> 
       <div class="picture"><a href="mailto:[email protected]?subject=BAD BOY BRANDING INQUIRY" class="teamoverlayzoom"><img src="img/team/7.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></a></div> 
       <div class="heading">MICHAEL SIEGLE</div> 
       <div class="designation">IA DIRECTOR</div><br> 
       <div class="team-social"><a href="https://twitter.com/JewHefner"><i class="fa fa-twitter"></i></a><a href="https://www.facebook.com/MichaelSiegle"><i class="fa fa-facebook"></i></a><a href="https://plus.google.com/u/0/101927035231881379587/posts"><i class="fa fa-google-plus"></i></a></div> 
       <p class="smallline">&nbsp;</p> 
       <div class="description">Well traveled & world-renowned information architect, Michael is a strategic and high level thinker autonomously managing BBB’s technical development teams.</div> 
      </div> 
     </div> 
    </div> 
    </section> 
    <!-- /.TEAM --> 

/* ----------------------------------------- -------------------------------------------------團隊部分開始*/

#team { 
    background: url(../img/textures/zwartevilt.png); 
} 
#team .line { 
    border-bottom-width: 3px; 
    border-bottom-style: solid; 
    border-bottom-color: #373737; 
    margin-bottom: 60px; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#team .team-contents { 
    text-align: center; 
    margin-bottom: 250px; 
    margin-top: 25px; 
} 
#team .picture { 
    padding-left: 30px; 
    padding-right: 30px; 
} 
#team .picture img { 
    width: 100%; 
    height: auto; 
    background: transparent; 
    position: relative; 
    margin-bottom: 25px; 
    border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
} 
#team .heading { 
    font-size: 26px; 
    text-transform: uppercase; 
    font-weight: 400; 
} 
#team .designation { 
    font-size: 18px; 
    text-transform: uppercase; 
    font-weight: 300; 
    line-height: 3px; 
} 
#team .smallline { 
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #373737; 
    margin-top: -20px; 
    margin-bottom: 20px; 
    padding-bottom: 10px; 
    width: 100px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 
.team-contents .icon { 
    width: 60px; 
    height: 60px; 
    border-radius: 60px; 
    position: relative; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #fff; 
    color: #000; 
    top: -60px; 
    font-size: 26px; 
    text-transform: uppercase; 
    font-weight: 400; 
    padding-top: 12px; 
    padding-bottom: 12px; 
    line-height: normal; 
    margin-bottom: -60px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 
#team .description { 
    margin-bottom: 20px; 
    text-align: left; 
    padding-right: 10px; 
    height: 150px; 
    color: gray; 
} 
#team .team-social a { 

    text-align: center; 
    margin-left: 6px; 
    margin-right: 6px; 
    color: #d0d0d0; 
} 
#team .team-social a i { 
} 
/* Team Overlayzoom Starts */ 
.teamoverlayzoom { 
    position: relative; 
    display: block; 
    margin: 0; 
    text-decoration: none; 
} 
.teamoverlayzoom span i { 
    color: #000; 
} 
.teamoverlayzoom span.zoom { 
    position: absolute; 
    nowhitespace: afterproperty; 
    nowhitespace: afterproperty; 
    bottom: 0; 
    right: 0; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    font-size: 22px; 
    text-align: center; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(256, 256, 256); /* RGBa with 0.6 opacity */ 
    background: rgba(256, 256, 256, 0.9); 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.teamoverlayzoom span.zoom span { 
    position: absolute; 
    left: 0; 
    top: 0; 
    padding: 10px; 
    width: 100%; 
    height: 100%; 
} 
.teamoverlayzoom:hover span.zoom, .teamoverlayzoom:focus span.zoom { 
    width: 100%; 
    height: 100%; 
    background: rgb(256, 256, 256); /* RGBa with 0.6 opacity */ 
    background: rgba(256, 256, 256, 0.4); 
} 
+1

您可以添加的jsfiddle和/或可能指定的代碼,打破你的主題。 –

+0

是的,就像@unableToCompile指出的那樣,請爲我們提供一個jsFiddle,以便我們可以看到您的代碼正在運行,並測試了一些解決方案。 – Fizzix

+0

我已經把你的代碼放到了這裏的jsFiddle,http://jsfiddle.net/axUHA/,雖然我看不到Firefox,Chrome,Safari和Opera之間的區別...... – Fizzix

回答

0

好吧我想通了。 #team的部分有錯誤。錯過了一些必要的div。現在都是固定的。感謝大家的幫助。

<section id="team"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 section-heading animated" style="text-align:center" data-animation="fadeInUp" data-animation-delay="0"> 
       <h2>OUR TEAM</h2> 
       <h1>meet the team</h1> 
       <p class="line">&nbsp;</p> 
      </div> 
     </div> 
     <div class="owl-carousel" id="our-team"> 
      <div class="team-contents animated" data-animation="flipInX" data-animation-delay="200"> 

0

我目前沒有太多時間,但我會讓你工作與一個CSS瀏覽器特定的CSS「黑客」。我發佈這個以防萬一你覺得它有用:

所以,這不是最好的解決方案,但它應該工作。

/* IE7, FF */ 
html>body #team.container { 
    position: relative; 
    right: 700px; 
} 

這只是針對那些特定的瀏覽器。這不是一個「好」的解決方案,因爲瀏覽器特定的CSS是不好的做法。我明天可能會看這個。祝你好運。

+0

好的,謝謝,我會給它一個看看這是否有效。我明天會檢查一下,看看你是否會引導我學習正確的解決方法。再次感謝您無法編譯 – MSiegle

+0

不幸的是,我甚至無法獲得您發佈的破解工作。 – MSiegle