 Tumblr and browsers, Photos blank spaces and stacked |
  |
| rocio.ferreras |
  Jun 26 2015, 05:09 AM
Post
#1
|
|
Group: Members Posts: 1 Joined: 26-June 15 Member No.: 22,780  |
Hello!
I am customizing a Tumblr theme for a friend, www.laidabekaina.com. She wants all the photos with an infinite scroll. The problem is that the browsers load the photos in different ways, i.e.: Chrome crops the photos at the footer, in Explorer, blank spaces appear along the infinite scroll. I have been trying to retouch the code to fix it, but I can't. If anyone knows a possible solution or it has happened to someone else... Below you can see the code. Thanks in advance,  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"> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <title>{Title}</title> {block:Description} <meta name="description" content="{MetaDescription}"/> {/block:Description} <head> <!-- @Saola: Erin ©Copyright Theme: Acruy (Touror v2) --> <meta name="font:body" content="Barskerville"/> <meta name="font:blog title" content="Arial"/> <meta name="text:font size" content="10"/> <meta name="color:background" content="#FFF" /> <meta name="color:text" content="#000" /> <meta name="color:links" content="#000"> <meta name="color:links hover" content="#FFF" /> <meta name="if:multiple columns" content="0" /> <meta name="if:no description" content="0" /> <style type="text/css"> #tumblr_controls{top: 1px !important; margin: 0 0 0 0; right: 1px !important; position:absolute !important; opacity:0.60;-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;} #tumblr_controls:hover {opacity:1;-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;} body {font-size:{text:font size}px;color:{color:text};font-family:{font:body};background-color:{color:background};text-align:left;} a {color:{color:links};text-decoration:none;text-transform:none;border-bottom:0px;} a:hover {color:{color:links hover};text-decoration:none;text-transform:none;border-bottom:0px;} .wrap {width:600px;padding-left:395px;padding-top:30px;} .wrapped {{block:indexpage}opacity:1;z-index:9999999999;width:400px;margin:20px;padding:10px;margin-left:95px;{/block:indexpage}{block:permalinkpage}width:450px;margin-top:30px;margin-left:45px;{/block:permalinkpage}} .wrapped img {{block:indexpage}opacity:1;width:100%px;padding:0px;margin-bottom:-20px;margin-left:-70px;{/block:indexpage}} .wrapped img:hover {{block:indexpage}padding:0px;{block:ifimageopacity}opacity:.90;{/block:ifimageopacity}{block:ifnotimageopacity}opacity:1;{block:ifnotimageopacity}{/block:indexpage}} .respo {padding:0px;text-align:center;font-size:11px;width:35px;z-index:99999999999;position:absolute;margin-left:-60px;top:10px;{block:permalinkpage}display:none;opacity:0;{/block:permalinkpage}} .respo a {color:{color:links};text-decoration:none;text-transform:uppercase;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .respo a:hover {color:{color:links};text-decoration:none;text-transform:uppercase;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .wrapped .respo {opacity:1;-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .wrapped:hover .respo {opacity:1;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .wrapped:hover .respo {-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .permalink {{block:permalinkpage}display:none;{/block:permalinkpage}padding:2px;text-align:center;font-size:9px;width:475px;z-index:99999999999;margin-top:25px;position:absolute;margin-left:-75px;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .permalink a {color:{color:links};text-decoration:none;text-transform:uppercase;} .permalink a:hover {color:{color:links};text-decoration:none;text-transform:uppercase;} .wrapped .permalink {opacity:0;-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .wrapped:hover .permalink {opacity:1;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .wrapped:hover .permalink {-moz-transition:0.5s ease-in; -webkit-transition:0.5s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in;{block:permalinkpage}opacity:0;{/block:permalinkpage}} .acap , .vcap {padding-top:2px;margin-top:-6px;} .wrapped .photoset iframe{{block:IndexPage}width:475px !important;{/block:IndexPage}{block:PermalinkPage}width:500px;{/block:PermalinkPage}} .wrapped .video iframe{{block:IndexPage}width:475px !important;{/block:IndexPage}{block:PermalinkPage}width:500px;{/block:PermalinkPage}} .btitle {width:350px;font-size:23px;padding:10px;z-index:99999999999999;text-transform:uppercase;letter-spacing:3px;font-family:{font:blog title};position:absolute;top:51px;left:50px;text-align:right;} .btitle a {text-transform:uppercase;font-family:{font:blog title};} .btitle a:hover {text-transform:uppercase;font-family:{font:blog title};} .blink {width:500px;font-size:10px;padding:10px;z-index:9999999999999;text-transform:uppercase;position:absolute;letter-spacing:2px;font-family:{font:blog title};text-align:center;left:410px;} .blink a {text-transform:uppercase;} .blink a:hover {text-transform:uppercase;} .binfo {margin-left:248px;width:100px;padding-top:2px;letter-spacing:0px;text-transform:none;z-index:99999999;text-align:right;font-size:{text:font size}px;color:{color:text};font-family:{font:body};} .posted {font-size:9px;} .viewed{margin-top:10px;font-size:10px;text-align:left;} .notes {padding-left:20px; font-weight:bold; font-size:9px;} ol.notes {width:500px; height:300px; padding-left:5px; margin-top:10px; overflow:scroll; overflow-x:hidden; over-flow-y:scroll; list-style-type:none; font-weight:normal; font-size:9px; text-transform:none;} ol.notes li.note {padding-top:2px; opacity:.8; -moz-transition:0.1s ease-in; -webkit-transition:0.1s ease-in; -o-transition:0.1s ease-in; transition:0.1s ease-in;} ol.notes li.note:hover {opacity:1;} ol.notes li.note img.avatar {width:14px; height:14px;} .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;} #infscr-loading {display:none;} .navigation{display:none;} </style> <script type='text/javascript' src='http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js'></script> {block:IndexPage} <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script> <script src="http://static.tumblr.com/twte3d7/0pellzh2t/infinitescroll.js"></script> <script type="text/javascript"> $(window).load(function () { $('.wrap').masonry(), $('.masonryWrap').infinitescroll({ navSelector : ".navigation", nextSelector : ".navigation a#next", itemSelector : ".wrapped", bufferPx : 10000, extraScrollPx: 10000, loadingImg : "http://static.tumblr.com/di6vmmh/umVm7zqip/invisible.gif", loadingText : "<em>loading posts</em>", }, function() { $('.wrap').masonry({ appendedContent: $(this) }); } ); }); </script> {/block:IndexPage} {block:indexpage}<div class="navigation">{block:Pagination}{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older</a>{/block:NextPage}{block:PreviousPage}<a style="float:left" href="{PreviousPage}">Newer</a></p>{/block:PreviousPage}{/block:Pagination}</div>{/block:indexpage} </head> <body> <div class="btitle"><a href="/"><b>{Title}</b></a><div class="binfo">{block:ifnotnodescription}{Description}{block:ifnotnodescription}{block:ifnodescription}{/block:ifnodescription}</div></div> <div class="blink"><br>{block:HasPages}{block:Pages} <a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}</div> <div class="wrap"> {block:Posts} {block:Text} <div class="wrapped"><div style="margin-top:-13px;padding:2px;"> {block:Title}<h2>{Title}</h2>{/block:Title}{Body}</div><div style="{block:permalinkpage}display:none;{/block:permalinkpage};"><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div></div> {/block:Text} {block:Photoset} <div class="wrapped"><div class="photoset">{Photoset-500}</div></div> {/block:Photoset} {block:Quote} <div class="wrapped quote">{Quote}<br>-{block:source}<b><div style="text-transform:uppercase;z-index:9999999999;">{source}</div></b>{/block:source}<div style="padding-top:10px;"></div><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div> {/block:Quote} {block:Link} <div class="wrapped link"> <a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}<div class="description">{Description}</div>{/block:Description}</div><div style="{block:permalinkpage}display:none;{/block:permalinkpage};"><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div></div> {/block:Link} {block:Chat} <div class="wrapped chat">{block:Title}<h3>{Title}</h3>{/block:Title}<div class="chat">{block:Lines}<br>{block:Label}<b>{Label}</b>{/block:Label} {Line}{/block:Lines}</div><div style="{block:permalinkpage}display:none;{/block:permalinkpage};"><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div></div> {/block:Chat} {block:Video} <div class="wrapped"><div class="video">{Video-500}{block:Caption}<div class="vcap">{Caption}</div>{/block:Caption}</div></div></div> {/block:Video} {block:Audio} <div style="padding-top:10px;margin-bottom:-2px;"><div class="wrapped audio">{AudioPlayerBlack}{block:Caption}<div class="acap">{Caption}</div>{/block:Caption}<div style="{block:permalinkpage}display:none;{/block:permalinkpage};"><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div></div></div> {/block:Audio} {block:Photo} <div class="wrapped photo">{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}{block:indexpage}<div class="photohov">{/block:indexpage} <div style="float:center;"> {block:Photo}<img src="{PhotoURL-500}" width="475" alt="{PhotoAlt}"/>{/block:Photo} </div> {block:indexpage}<div class="permalink"><a href="{Permalink}">{NoteCount}</a></div></div>{/block:indexpage}{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}</div> {/block:Photo} {block:Answer}<div class="wrapped ask"><b><span style="text-transform:uppercase;">{Asker}</span> <b>asked</b>: </b> {Question}<br><i>{Answer}</i><div style="{block:permalinkpage}display:none;{/block:permalinkpage};"><div class="respo"><a href="{Permalink}"><u>{ShortMonth}.{DayofMonth}<p>{Notecount}</p></u></a></div></div></div>{/block:Answer} {block:PermalinkPage}<div style="padding-left:50px;"><div class="note"><br>Posted {block:Date}{ShortDayOfWeek} {ShortMonth} {DayOfMonthWithZero} at {12Hour}:{Minutes}{AmPm}{/block:Date} with {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:PostNotes}{PostNotes}{/block:PostNotes}</div></div>{/block:PermalinkPage} <!-- {block:NoRebloggedFrom} {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom} {/block:NoRebloggedFrom} --> {block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --> {/block:ContentSource} {/block:Posts} </div> </body> </html> |
  |
 
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 07:11 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC