javascript - Safari/Chrome overlapping elements that are set with inline-block -

-

i trying build page display 2 images side side. want these items centered on screen in book format , browser resized, images height changed fill window.

in order using display inline-block text-aligned center achieve affect. works great on ff when open in safari or chrome on resize divs begin overlap. created jsfiddle show example of dom. need pageone , pagetwo divs inline-block because later absolutely position links on top of page images.

what missing?

in order see issue, you'll need open jsfiddle in safari/chrome , make result pane larger default. start browser 1/2 normal width/height. run jsfiddle, enlarge browser , notice how 2 images begin overlap. if open in ff wont overlap.

http://jsfiddle.net/x9nnh/1

i able close effect want in browsers using tables:

http://jsfiddle.net/x82uk/

indeed, tricky because inline-block containers don't resize fit contents contents scale.

though make job harder (read: require javascript) when comes absolutely positioning links atop images, here's alternative approach using background-size: contain.

html:

<div id="issue">   <div id="leftpage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>   <div id="rightpage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div> </div>

css:

html, body {   height: 100%;   background: #666; } #issue {   position: absolute;   top: 20px; bottom: 20px;   left: 20px; right: 20px;   border: 1px solid grey;   box-sizing: border-box;   background: #eee; } .page {   position: absolute;   top: 30px; bottom: 30px;   background-repeat: no-repeat;   background-size: contain; } #leftpage {   background-position: center right;   left: 30px; right: 50%; } #rightpage {   background-position: center left;   left: 50%; right: 30px; }

Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c++ - Using OpenSSL in a multi-threaded application -

-
i have been writing soap client application in c++ on ubuntu using openssl https transport , pthreads threading. have number of threads - 1 central data acquisition thread periodically gets worker threads make soap requests via shared mutex protected queues. reading documentation openssl found is openssl thread-safe? in openssl faq describes mechanisms required ensure thread safety when using openssl. implemented , works fine. the reason question conceptual difficulty really. thinking implementing same functionality application has already, instead of using threads, create 2 seperate applications : 1 worker thread (of multiple copies running) , main data acquisition thread. use tcp sockets communicate between 2 rather mutex protected queues. may bad idea not important - confusing me would have implement same functions required ensure openssl thread safety in second approach or not? my guess not have , treated independent (indeed surely must many applications use openssl) re...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more