jquery - vertical-align in div nightmare! Any way to just get it to work without knowing div's vertical height? -


so i've been struggling on rather weird problem. i've tried display:inline-block on spans etc., vertical-aligns set center , wrapping within div's display:table , child div table-cell, nothing seems have effect on vertical alignment!

i've added code on jsfiddle: http://jsfiddle.net/rtkra/6/ , if hover on li's you'll know mean if li content on single line should centered color box on it's left. if spans more 2 lines, doesn't seem matter since top of li aligned top of context box , bottom exceeds color box looks fine

the troublesome part 'space' below 'labeldescriptor' div - should in line color box on left. if come in line, content still remains aligned top of div!!

the issue hover's background - should same height color box on left. setting min-height works without table/table-cell display, still has lot of space bottom of content bottom of div , looks bit off.

simple padding doesn't cut it. although works small li's (with less content) looks off ones split on next line!

i've been working @ quite while , have given up!!! can't seem work!

i made div's content wrap in < p > tags adds way space (above , below) , makes whole thing total mess. don't want blow font size sake of either.

any ideas? can fixed using simple css or javascript/jquery have used?

the code of html+css bit long post here. if need it...

**update: ** here image description of should , have been able (the fiddle url 1 on right http://jsfiddle.net/rtkra/9/)

enter image description here

i wish replicate 'look , feel' of gmail's label menu on left. see how aligned text 'color box' (note don't need full hover on color box too). middle image shows how alignments off. text centered on div min-height:16px align well. not happening , looks visually appalling. image on right after changing font size 16px , making color box's (red) width , height = 1em , moving down 3px (top:3px) - question still have been avoided having content vertically center in div in first place. since irrespective of "number of lines" in bullet 'align well' without having hack around i've done. hope clarifies want :)

i think want like this. edit font size see working.

the key properties are:

.category {     position: relative; } .category .labelcolorpicker {     width: 16px;      height: 16px;      border: 1px solid black;     vertical-align: top;     padding: 0;     margin: 0; } .category .labeldescriptor {     border: 1px solid transparent;     display: inline-block;     vertical-align: middle;     line-height: 16px;     min-height: 16px; } .category .hovermenu {     position: absolute;     left: 100%;     top: 0; }

tested on win7 in ie8, ie9, opera 11.50, safari 5.0.5, ff 5.0, chrome 12.0. added 2 ie7 patch lines css, because inline-block not work in ie7.


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more