html - How to remove the extra white space at the bottom of the panels -


i have drop down menu system. drop down panels contains list menu , 3 images.

#menu {width:1000px;margin:0px auto 0px auto}  #menu #holder{  	display: block;  	width: 100%;  	list-style:none;margin:0px;padding:0px;  }  #menu .menuaholder{margin:0;padding:0;display:inline-block;width:auto}  #menu .menudropdown{z-index: 3;position:absolute;display:none;background-color:#ffffff;-moz-box-shadow: 0 0 6px #c4c4c4;  -webkit-box-shadow: 0 0 6px #c4c4c4;  box-shadow: 0 0 6px #c4c4c4;}  #menu .menuaholder .full{padding:10px;width:980px;text-align:left;}  #menu .menuitem{display:block;padding:5px;color:#000000;}  #menu .menuitem:hover{background-color:#edf0f1;color:#b7b67e;}  #menu .menuaholder:hover .menudropdown{display:table;}  #menu a.item{  list-style-type: none;  list-style-image: none;  color: #999999;  padding: 5px 6px 6px 6px;  height: 15px;  font-size: 12px;  width: 100%;  margin: 0px 0px 0px 0px;  height: 30px;  line-height: 30px;  text-transform: uppercase;  	}  .menudropdown .fourblocks .block{width:25%;margin:0px 0px 0px 0px;float:left}  .menudropdown .fourblocks .block:last-child{margin-right:0px}  .menudropdown .fourblocks{display:inline-block;margin-bottom:0px;width:980px}  .twoblocks img, .fourblocks img, .menudropdown .fourblocks img, .threeblocks img, .unevenblocks img, .unevenblocks2 img{display:block;width:100%;height:auto;}
<div id="menu">  <div id="holder">  <div class="menuaholder even"><a href="index.html" class="item">lighting</a><div class="menudropdown full">  <div class="fourblocks">  <div class="block">  <a href="wall-lights.html" class="menuitem" title="wall lights">wall lights</a>  <a href="spot-lights.html" class="menuitem" title="spot lights">spot lights</a>  <a href="pendant-lights.html" class="menuitem" title="pendant lights">pendant lights</a>  <a href="chandeliers.html" class="menuitem">chandeliers</a>  </div>  <div class="block">  <img src="http://lorempixel.com/200/200/" alt="link" title="link" width="200" height="200"></div>  <div class="block">  <img src="http://lorempixel.com/200/200/" alt="link" title="link" width="200" height="200"></div>  <div class="block forie">  <img src="http://lorempixel.com/200/200/" alt="link" title="link" width="200" height="200"></div>  </div>  </div></div>  </div>  </div>

here http://jsfiddle.net/s7yr93hj/ show you.

the panels have 10px padding around contents, @ bottom of panels, seem have gap larger 10px, remove.

my first thought images display:inline, styling includes display:block remove unwanted white space beneath them, problem still exists.

the outer div seems have height greater contents. drop down panels have varying heights, not want add height styling drop down panels

does have solution remove white space?

thank you.

browser renders white space on inline elements, quick fix set container font-size:0 , reset font-size:16px on items.

but in case remove .menudropdown .fourblocks {display:inline-block;} together, , set float:left if want.

updated demo: http://jsfiddle.net/s7yr93hj/1/


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more