最大化浏览器会影响文本对齐

时间:2013-09-24 12:23:56

标签: css

我有一个问题,我无法在任何地方找到任何解决方案,如果有人可以帮助我,我真的很感激。

在这个页面上,我有3个链接滚动到页面下方的部分。对于每个部分,有3行白色文本与一些箭头图形对齐。一切都很好,直到浏览器最大化并填满屏幕,导致白色文本和圆形图形中的主黑色标题移位大约10个像素。

我无法弄清楚为什么会这样,而且我真的很难过。这是测试网站和相关页面的链接。 http://surefireresearchtestsite.businesscatalyst.com/ourApproach.html

HTML

<div class="bgImageOverTop">

    <div class="wrapperTwo">

    <div  class="ourApproach ">  

        <div class="feedsBox " id="scopeControl">

        <h3 id="scope">Scope</h3>
        <div class="scopeFeedsBox">
            <ul>
                <li>Your Business</li>
                <li>Your Marketing Goals</li>
                <li>The Competitive Market</li>                   
            </ul>                                   
        </div>               
       </div>

    <div class="feedsBox" id="strategyControl">
    <!-- similar thing happening here -->               
    </div>


    <div class="feedsBox" id="executeControl">                   
    <!-- similar thing happening here -->               
    </div>

  </div>
 </div>
</div>

CSS

.bgImageOverTop{
    width:100%;
    height:3000px;
    background: url("../images/midSection-Approach.png") 50% 50% no-repeat;   
    background-size: cover;
    position:relative;
    z-index:50;
}
.wrapperTwo{
    width:886px;
    padding-left:33px;
    padding-right:33px;
    margin:auto;
    height:2950px;
    position:relative;
    top:0px;
    z-index:1500;
}

.ourApproach{
    float:left;
    text-align:center;
    font-family: 'rudaregular';
    height:auto;
    margin-top:130px;   
    padding:0 10px 0px 10px;
    position:relative;
    z-index:1500;
}
.feedsBox{
    width:auto;
    height:auto;
    position:relative;
    z-index:50;
}
#scopeControl{
    position:relative;
    top:432px;
    left:263px;
}
#scope{
    position:relative;
    top:0px;
}
.scopeFeedsBox{
    width:210px;
    height:auto;
    line-height:1em;
    position:relative;
    top:-70px;
    left:270px;
}
.scopeFeedsBox ul{
    float:left;
    list-style-type:none;
}
.scopeFeedsBox ul li {
    float:left;
    width:210px;
    display:inline;
    font-size:.9em;
    line-height:1.2em;
    text-align:left;
}

0 个答案:

没有答案