css - In HTML, 5 inline images with "width:20%" each don't add up to 100% device width on IPad -

-

when create 5 or more inline placed images , set width each 1 total amount 100%, total width little less 100%.

the strange thing if place 1, 2, 3 or 4 images in exact same manner, total width 100%.

also, problem happens on ipad (both default safari , chrome browsers), doesn't happen on android mobile (chrome or default) , desktop (chrome) far tested.

here link screenshot of i'm talking about. note 5 upper images set width 20% each, , bottom 4 images set width 25% each.

http://s11.postimg.org/5fnut3agi/image.jpg

here complete html file. know it's not proper html should like, i'm beginner, don't judge :)

<!doctype html>  <html>  <head>  	<meta charset="utf-8">  	<meta name="viewport" content="width=device-width, initial-scale=1">  	<script src="jquery-2.1.3.min.js"></script>  	<script type='application/javascript' src='fastclick.js'></script>    	<script>    		$(function() {  			fastclick.attach(document.body);  		});    		$(function() {  			$('.tabs .tab-links a').on('click', function(e)  {  				var currentattrvalue = jquery(this).attr('href');    		        // show/hide tabs  		        $('.tabs ' + currentattrvalue).show().siblings().hide();    		        // change/remove current tab active  		        $(this).parent('li').addclass('active').siblings().removeclass('active');    		        e.preventdefault();  		    });  		});    	</script>    	<style type="text/css">    		* {  			margin: 0;  			padding: 0;  			width:100%;  			overflow-x:hidden;  		}    		.tab {  			display:none;  		}    		.tab.active {  			display:block;  		}      		ul {  			list-style-type: none;  			line-height: 0px;  			font-size: 0px;  		}      		.tab-links li {  			display: inline;  			list-style:none;  		}    	</style>  </head>     <body>    	<div class="tabs">  		<ul class="tab-links">  			<li class="active"><a href="#tab1"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:20%"></a></li><li><a href="#tab2"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:20%;"></a></li><li><a href="#tab3"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:20%;"></a></li><li><a href="#tab4"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:20%;"></a></li><li><a href="#tab5"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:20%;"></a></li>    			<li class="active"><a href="#tab1"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:25%"></a></li><li><a href="#tab2"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:25%;"></a></li><li><a href="#tab3"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:25%;"></a></li><li><a href="#tab4"><img src="http://s7.postimg.org/i0qokrbh7/placeholder.png" style="width:25%;"></a></li>    		</ul>    		<br><br>    		<div class="tab-content">  			<div id="tab1" class="tab active">  				<p>veikiaz</p>  				<p>donec pulvinar neque sed semper lacinia. curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. donec blandit mauris eget aliquet lacinia! donec pulvinar massa interdum risus ornare mollis.</p>  			</div>    			<div id="tab2" class="tab">  				<p>tab #2 content goes here!</p>  				<p>donec</p>  			</div>    			<div id="tab3" class="tab">  				<p>tab #3 content goes here!</p>  				<p>donec pulvinar neque sed semper lacinia. curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. donec blandit mauris eget aliquet lacinia! donec pulvinar massa interdum ri.</p>  			</div>    			<div id="tab4" class="tab">  				<p>tab #4 content goes here!</p>  				<p>donec pulvinar neque sed semper lacinia. curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. donec blandit mauris eget aliquet lacinia! donec pulvinar massa interdum risus ornare mollis. in hac habitasse platea dictumst. ut euismod tempus hendrerit. morbi ut adipiscing nisi. etiam rutrum sodales gravida! aliquam tellus orci, iaculis vel.</p>  			</div>  			<div id="tab5" class="tab">  				<p>tab #5 content goes here!</p>  			</div>  		</div>  	</div>  </body>    </html>

here part images included. can see full html code, both in same divs , same ul. note replaced image source link in full html, snippet display images.

<li class="active"><a href="#tab1"><img src="placeholder.svg" style="width:20%"></a></li><li><a href="#tab2"><img src="placeholder.svg" style="width:20%;"></a></li><li><a href="#tab3"><img src="placeholder.svg" style="width:20%;"></a></li><li><a href="#tab4"><img src="placeholder.svg" style="width:20%;"></a></li><li><a href="#tab5"><img src="placeholder.svg" style="width:20%;"></a></li>          <li class="active"><a href="#tab1"><img src="placeholder.svg" style="width:25%"></a></li><li><a href="#tab2"><img src="placeholder.svg" style="width:25%;"></a></li><li><a href="#tab3"><img src="placeholder.svg" style="width:25%;"></a></li><li><a href="#tab4"><img src="placeholder.svg" style="width:25%;"></a></li>

so exact question why above 5 images not wide 4 below if both total 100% width , how around this?


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

ios - Possible to get UIButton sizeThatFits to work? -

-
i have been using method of resizing uibuttons depreciated, , not robust. , other reasons, want sizethatfits work uibuttons. i've read online, i'm not sure if should work (seems working some, not others, difference maybe between style, i'm using custom). here simple test code recreate issue (i put in viewdidload test, shouldn't matter, , real code part of large project): uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; [btn settitle:@"this test long title need word wrap more single line when displayed on tiny ipod in portrait view." forstate:uicontrolstatenormal]; btn.titlelabel.linebreakmode = uilinebreakmodewordwrap; // depreciated - nothing replace it? cgrect r = btn.frame; r.origin.x = 0; r.origin.y = 0; r.size.width = 320; r.size.height = [btn.titlelabel.text sizewithfont:btn.titlelabel.font constrainedtosize:cgsizemake(r.size.width,100000) linebreakmode:btn.titlelabel.linebreakmode].height; // returns approx 86 , changes correctly ...
Read more