CODEWITHSUNDEEP
htmlcss
SorryEh
SorryEh

Reputation: 928

`Position: relative` is being ignored?

in my test page, I am using Screenfly to check resolution, and it seems my "social login" and my "province selector" are scrolling, despite having overflow: hidden and position: relative. for the loginText class (social media) it's being called from some other document that I do not have access to.

my testing page: Screenfly Test

Html:

<div class="hideFrench"><a href="frenchURL">Français</a></div>
   <div class="styled-select">
       <select id="provinceSelect">
     <option>Please select a province</option>
     <option value="alberta">Alberta</option>
     <option value="bc">British Columbia</option>
     <option value="Manitoba">Manitoba</option>
     <option value="NB">New Brunswick</option>
     <option value="NF">Newfoundland and Labrador</option>
     <option value="Ns">Nova Scotia</option>
     <option value="Nunavut">Nunavut</option>
         <option value="ON" selected="selected">Ontario</option>
     <option value="PEI">Prince Edward Island</option>
     <option value="Quebec">Quebec</option>
     <option value="Saskatchewan">Saskatchewan</option>
       </select>
  </div>



      <div class="loginText" >
       <a class="janrainEngage loginHref" href="#">Or login with 
        <span class="janrain-provider-icon-16 janrain-provider-icon-facebook"></span>
        <span class="janrain-provider-icon-16 janrain-provider-icon-linkedin"></span>
        <span class="janrain-provider-icon-16 janrain-provider-icon-twitter"></span>
       </a>
      </div>

CSS:

.loginText{
    position: relative !important;
    left: 600px;
    top: -125px;
    overflow: hidden;

}



.styled-select {
    width: 185px;
    position: relative;
    left: 933px;
    top: 40px;
    background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center;
    border: 1px solid #e9e9e9;
    overflow: hidden;

}

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;

   }


.hideFrench {
    position: relative;
    top: 70px;
    left: 875px;
    border: 2px
}


@media screen and (max-width: 768px){
    .styled-select, .hideFrench{
      display: none;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
 }

}

It originally was working properly for the last few days, but since then I've made a lot of changes, and now I have no clue what's causing it to stay fixed and where that big white gap is coming from between the login and the province selector.

Any help is greatly appreciated, thank you for your time!

Upvotes: 1

Views: 147

Answers (1)

Michael Mano
Michael Mano

Reputation: 3440

.loginText {
    position: absolute;
    top: 60px;
    right: 18px;
    overflow: hidden;
}

Upvotes: 1

Related Questions