html5 - Unexpected z-index of contents in MathJax -

-

i writing sketch of webpage in html5/css3 , observed unexpected behaviour of contents in mathjax respect z-index.

my idea have top div, fixed, image, name , contacts, , following contents shown below scrolling vertically.

as this updated jsfiddle shows, seems work 1 thing: math delimited mathjax delimiters \( , \) flows above #top div , image, not below text around.

the following, updated z-indexes, should reproduce problem on chrome , opera (on windows) , on chrome , android browser (tested on samsung s3 , s4).

<!doctype html> <html lang="en"> <head>   <title>name surname</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <script type="text/x-mathjax-config">     mathjax.hub.register.startuphook("mathmenu ready",function () {     mathjax.menu.bgstyle["z-index"] = 1;     });   </script>   <script type="application/javascript" src="https://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams-mml_htmlormml"></script> <style> #wrap {   margin: 0px auto;   padding: 10px;   padding-top: 0px;   width: 920px;   text-align: left;   background-color: #fff;   }  p {   margin: 0px;   padding: 0px;   text-align: left; }  {   text-decoration: none;   color: #096; }  .clb {   clear: both; }  #top {   background-color: #eee;   position: fixed;   margin: auto;   margin-top: 0px;   width: 900px;   height: 330px;   padding: 10px; }  #topl {   float: left;   width: 450px;   height: 310px;   padding: 10px 0px;   -webkit-position: relative;   position: relative;   -webkit-z-index: 200;   z-index: 200; }  #bimg {   height: 306px;   width: 306px;   margin: 0px auto;   border-radius: 22px;   border: 3px solid #000;   -webkit-position: relative;   position: relative;   -webkit-z-index: 200;   z-index: 200; }  #bimg img {   height: 300px;   width: 300px;   margin: auto;   border-radius: 20px;   border: 3px solid #fff;   -webkit-position: relative;   position: relative;   -webkit-z-index: 200;   z-index: 200; }  #topr {   float: right;   width: 450px;   height: 310px;   padding: 10px 0px;   -webkit-position: relative;   position: relative;   -webkit-z-index: 200;   z-index: 200; }  #topr h1 {   margin-top: 50px;   margin-bottom: 20px;   font-size: 24pt;   font-weight: bold; }  #topr p {   font-size: 11pt;   margin-bottom: 9pt; }  #cont {   margin: auto;   margin-top: 0px;   width: 900px;   padding: 10px;   padding-top: 355px; }  #cont p {   font-size: 13pt;   margin-bottom: 10pt; } </style> </head>  <body> <div id="wrap">   <div id="top">     <div id="topl">       <div id="bimg"><img src="http://matteoallegro.joomlafree.it/kb.png" alt="image"></div>     </div>      <div id="topr">       <h1>name surname</h1>        <p><a>email@email.com</a></p>     </div>      <div class="clb"></div>   </div>    <div id="cont">     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed      eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p>     <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p>     <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p>      <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed      eiusmod tempor incididunt ut labore et dolore magna aliqua.      ut enim ad minim veniam, quis nostrud exercitation ullamco laboris      nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla      pariatur. excepteur sint occaecat cupidatat non proident, sunt in      culpa qui officia deserunt mollit anim id est laborum.</p>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed      eiusmod tempor incididunt ut labore et dolore magna aliqua.      ut enim ad minim veniam, quis nostrud exercitation ullamco laboris      nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla      pariatur. excepteur sint occaecat cupidatat non proident, sunt in      culpa qui officia deserunt mollit anim id est laborum.</p>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed      eiusmod tempor incididunt ut labore et dolore magna aliqua.      ut enim ad minim veniam, quis nostrud exercitation ullamco laboris      nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla      pariatur. excepteur sint occaecat cupidatat non proident, sunt in      culpa qui officia deserunt mollit anim id est laborum.</p>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed      eiusmod tempor incididunt ut labore et dolore magna aliqua.      ut enim ad minim veniam, quis nostrud exercitation ullamco laboris      nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla      pariatur. excepteur sint occaecat cupidatat non proident, sunt in      culpa qui officia deserunt mollit anim id est laborum.</p>   </div> </div> </div> </body> </html>

reference first <script> here. don't know javascript @ noticed in https://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams-mml_htmlormml z-index appears 2 (three?) times, apparently values of 101 , 102.

i don't know of mathjax, don't know part of application might causing this, can fix adding following property values #bimg selector:

#bimg {     position: relative;     z-index: 1; }

this doesn't break based on code provided in jsfiddle. work in firefox , ie, not in webkit browsers.


Comments

Post a Comment

Popular posts from this blog

python - Healpy: From Data to Healpix map -

-
Image
i have data grid rows represent theta (0, pi) , columns represent phi (0, 2*pi) , f(theta,phi) density of dark matter @ location. wanted calculate power spectrum , have decided use healpy. what can not understand how format data healpy use. if provide code (in python obvious reasons) or point me tutorial, great! have tried hand @ doing following code: #grid dimensions nrows*ncols (subject change) theta = np.linspace(0, np.pi, num=grid.shape[0])[:, none] phi = np.linspace(0, 2*np.pi, num=grid.shape[1]) nside = 512 print "pixel area: %.2f square degrees" % hp.nside2pixarea(nside, degrees=true) pix = hp.ang2pix(nside, theta, phi) healpix_map = np.zeros(hp.nside2npix(nside), dtype=np.double) healpix_map[pix] = grid but, when try execute code power spectrum. specifically, : cl = hp.anafast(healpix_map[pix], lmax=1024) i error: typeerror: bad number of pixels if point me tutorial or edit code great. more specifications: data in 2d np array , can change numrows/...
Read more

c - Bitwise operation with (signed) enum value -

-
i using enumerator values flags: typedef enum { = 0x00, b = 0x01u, // u has no influence, expected c = 0x02u, // u has no influence, expected ... } enum_name; volatile unsigned char* reg = someaddress; *reg |= b; according misra-c:2004 bitwise operations shall not done signed type. unfortunately, compiler iar use signed int (or short or char) underlying type of enums, , option can find relates size, not signedness ("--enum-is-int"). according iar c/c++ development guide arm , pages 169 , 211, can define type of enum s if enable iar language extensions ( -e command-line option, or project > options > c/c++ compiler > language > allow iar extensions in ide). in particular, should define "sentinel" value, make sure compiler chooses correct type. prefers signed types, , uses smallest possible integer type, sentinel should largest positive integer corresponding unsigned integer type can describe. example, typedef enum ...
Read more

xslt - Unnest parent nodes by child node -

-
in xml there items 0-n attributes , item should copied each attribute new item 1 attribute. given xml this: <?xml version="1.0" encoding="utf-8" ?> <items> <item> <name>a</name> <attributes> <attribute> <key>attribute1</key> <value>1</value> </attribute> </attributes> </item> <item> <name>b</name> </item> <item> <name>c</name> <attributes> <attribute> <key>attribute1</key> <value>5</value> </attribute> <attribute> <key>attribute2</key> <value>2</value> </attribute> <attribute> <key>attri...
Read more