html - Inconsistent element rendering and spacing -


i started creating simple concept javascript game based around tiles, when positioning tiles, found problem display. http://i.gyazo.com/8328507c64b4254a6271172892ca3f92.png

in picture, couple of columns dragged around 0.5px , 1px, , highly undesirable.

i have tested in chrome, mozilla firefox , internet explorer , have trouble aligning tiles: chrome has trouble vertically, firefox , ie horizontally.

the css code both container , tiles (there 200 in container) following:

#container {     position:absolute;     width:100%;     height:100%; }  .tile {     width:5%;     padding-bottom:5%;     display:inline-block;     margin-right:-4px;     margin-bottom:-4px;     position:relative;     background-size:100% auto;     background-repeat:no-repeat; }

edit: html code, request:

<div id="container">     <div class="tile tile_0_0"></div>     <div class="tile tile_1_0"></div>     <div class="tile tile_2_0"></div>     <div class="tile tile_3_0"></div>     <div class="tile tile_4_0"></div>     <div class="tile tile_5_0"></div>     <div class="tile tile_6_0"></div>     <div class="tile tile_7_0"></div>     <div class="tile tile_8_0"></div>     <div class="tile tile_9_0"></div>     <div class="tile tile_10_0"></div>     <div class="tile tile_11_0"></div>     <div class="tile tile_12_0"></div>     <div class="tile tile_13_0"></div>     <div class="tile tile_14_0"></div>     <div class="tile tile_15_0"></div>     <div class="tile tile_16_0"></div>     <div class="tile tile_17_0"></div>     <div class="tile tile_18_0"></div>     <div class="tile tile_19_0"></div>     <div class="tile tile_0_1"></div>     <div class="tile tile_1_1"></div>     <div class="tile tile_2_1"></div>     <div class="tile tile_3_1"></div>     <div class="tile tile_4_1"></div>     <div class="tile tile_5_1"></div>     <div class="tile tile_6_1"></div>     <div class="tile tile_7_1"></div>     <div class="tile tile_8_1"></div>     <div class="tile tile_9_1"></div>     <div class="tile tile_10_1"></div>     <div class="tile tile_11_1"></div>     <div class="tile tile_12_1"></div>     <div class="tile tile_13_1"></div>     <div class="tile tile_14_1"></div>     <div class="tile tile_15_1"></div>     <div class="tile tile_16_1"></div>     <div class="tile tile_17_1"></div>     <div class="tile tile_18_1"></div>     <div class="tile tile_19_1"></div>     <!--continues way tile_19_9--> </div>

any regarding issue appreciated. in advance.

it difficult tell without live version of code play with, 1 thing might try adding font-size: 0; #container.

the reason bring .tiles inline-block, means browser going collapse newlines between them in html source text spaces. (see this article space between inline-block elements more information.)

at point, may able remove negative margin-right , margin-bottom .tiles well.


-

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

overview i want replace oracle.dataaccess orcale. managed dataaccess, opening connection latter throws ora-12537 network session end of file exception. exception message / stack trace {oracleinternal.network.networkexception (0x000030f9): ora-12537 : netzwerksession: dateiende @ oracleinternal.network.readerstream.read(orabuf ob) @ oracleinternal.ttc.orabufreader.getdatafromnetwork() @ oracleinternal.ttc.orabufreader.read(boolean bignoredata) @ oracleinternal.ttc.marshallingengine.unmarshalub1(boolean bignoredata) @ oracleinternal.ttc.ttcprotocolnegotiation.readresponse()} i trying connect oracle 11g database , not have client installed on local machine. working test application (unmanaged) using oracle.dataaccess works fine . using system; using oracle.dataaccess.client; namespace app.odp.unmanaged { internal class program { private static void main(string[] args) { //dummy connection string...
Read more

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

i want compress , decompress ecg signal stored text message text file , find out file size, cr,prd ratio,and qs. here code compression , decompression of ecg signal using huffman algorithm. i'm trying find out file size, compression ratio,prd ratio,qs. but error i'm getting the ecg file in text format. %clearing variables , screen enter code here clear all; close all; clc; [file1]=uigetfile('*.txt'); %fprintf('enter ecg file name :%s',file1); p=file1; t=sprintf('%s',p); b1=dlmread([file1]); len=length(b1); lead=input('enter lead number :'); %lead=str2double(lead); col2=b1(1:end,lead); e=fix(sqrt(len)); m=1; i=1:e j=1:e g2(i,j)=fix(col2(m)*1000); %amplifying 1000 m=m+1; end end g3=g2; i=1:e j=1:e ...
Read more

utf 8 - split utf-8 string into bytes in python -

i trying split utf-8 string bytes in python 3. problem is, when use bytearray, byte, encode etc functions array size of element 14 bytes, not 1 byte expected. need split text file sequence of bytes , send them byte after byte using sockets. tried this: infile = open (file, "r") str = infile.read() byte_str = bytes(str, 'utf-8') print("size of byte_str",sys.getsizeof(byte_str[0])) print gives me 14, need 1... suggestion? quoting official documentation : sys.getsizeof(object[, default]) return size of object in bytes. object can type of object. built-in objects return correct results, not have hold true third-party extensions implementation specific. only memory consumption directly attributed object accounted for, not memory consumption of objects refers to. if given, default returned if object not provide means retrieve size. otherwise typeerror raised. getsizeof() calls object’s __sizeof__ method , adds ...
Read more