html - Bootstrap classes causing footer contents to not load completely until hovered -

-

i have element social media icons inside in footer of website. using bootstrap col classes position element. when load page icon , element borders not visible until hover on them. believe has col classes, when remove them, works fine. firefox , edge not seem have problem, chrome. has left me scratching head.

here link site http://www.davidsandersdesigns.com/ , here footer html

<!--footer-->         <div class='container-fluid'>             <div class='row'><!--mobile-->                 <div id='bottom_doublearrow' class='bottom_doublearrow col-xs-6 col-sm-5 hidden-md hidden-lg col-xs-offset-5 col-sm-offset-5'></div>             </div>             <footer class='row'>                 <div id='footer_logo' class='footer_logo col-xs-12 col-sm-12 col-md-3 col-lg-3 col-md-offset-1'></div>                 <!--problem element--><div class='footericon_container hidden-xs hidden-sm col-md-3 col-lg-2 col-md-offset-7 col-lg-offset-8'>                     <a>                       <div class='mail_icon'></div>                     </a>                     <a>                         <div class='linkedin_icon'></div>                     </a>                     <a>                         <div class='facebook_icon'></div>                     </a>                 </div>                 <div id='footer_doublearrow' class='footer_doublearrow hidden-xs hidden-sm col-md-1 col-lg-1 col-md-offset-10 col-lg-offset-10'></div><!--desktop-->             </footer>         </div>

here css classes have element.

 .footericon_container {   top: 20px;   height: 90px;   border-left: 1px solid white;   border-right: 1px solid white; }  /* line 100, c:/users/frederick/documents/web editing/projects/portfolio   site/build 2000/sass/partials/pages/mainpage/_footer.scss */ .mail_icon {   display: block;   position: relative;   float: left;   background-position: center;   background-repeat: no-repeat;   background-size: contain;   background-image: url("../images/email_icon.svg");   height: 40px;   width: 55px;   top: 25px;   transition: opacity 300ms; }     /* line 111, c:/users/frederick/documents/web editing/projects/portfolio site/build 2000/sass/partials/pages/mainpage/_footer.scss */ .linkedin_icon {   display: block;   position: relative;   float: left;   background-position: center;   background-repeat: no-repeat;   background-size: contain;   background-image: url("../images/linkedin_icon.svg");   height: 40px;   width: 55px;   top: 25px;   transition: opacity 300ms; }    /* line 122, c:/users/frederick/documents/web editing/projects/portfolio site/build 2000/sass/partials/pages/mainpage/_footer.scss */ .facebook_icon {   display: block;   position: relative;   float: left;   background-position: center;   background-repeat: no-repeat;   background-size: contain;   background-image: url("../images/facebook_icon.svg");   height: 40px;   width: 55px;   top: 25px;   transition: opacity 300ms; }

that's strange one. added following style in inspector , seem resolve problem:

.footericon_container > {     display: block; }

as why it's happening - i'm not entirely sure honest!

edit - noticed <div>'s within anchor elements being floated, so:

<a href="https://www.facebook.com/sharer/sharer.php?u=www.davidsandersdesigns.com" target="_blank">     <div class="facebook_icon"></div> </a>

css:

.facebook_icon {     float: left; }

when inspect wrapping <a> element, you'll notice has no height (it's collapsed). added clearfix class wrapping <a> so:

<a class="clearfix" href="https://www.facebook.com/sharer/sharer.php?u=www.davidsandersdesigns.com" target="_blank">

this reinstated height of wrapping element (i did same other social icons too.

i experimented removing float: left inner div's entirely, remove class other social classes too:

.facebook_icon { float: left; }

you can add float: left wrapping <a>'s so:

.footericon_container > {     float: left; }

edit 2:

upon further inspection, noticed both linkedin , mail icons had following styles applied in styles.css file:

.linkedin_icon {     display: block;     position: absolute;     padding: 0;     overflow: hidden;     backface-visibility: hidden;     background-position: center;     background-repeat: no-repeat;     background-size: contain; }

the above on line 477, below mail icon on line 464:

.mail_icon {     display: block;     position: absolute;     padding: 0;     overflow: hidden;     backface-visibility: hidden;     background-position: center;     background-repeat: no-repeat;     background-size: contain;     background-image: url("../images/logo1.svg");     height: 90%; }

a lot of these styles overriden, there's couple aren't seem reason other icons display... seems making other icons appears, , facebook 1 not. advise amending linkedin 1 follows includes facebook:

.linkedin_icon, .facebook_icon {     display: block;     position: absolute;     padding: 0;     overflow: hidden;     backface-visibility: hidden;     background-position: center;     background-repeat: no-repeat;     background-size: contain; }

again, seemed work me...


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more