i have a div wich contains three children nodes
and another
in chrome all three divs appear inline and the parent divs height is 25px
in IE the div tags drop down because of the
tag below i have copy pasteable code that wil reproduce the problem for you
<style>
.left{
float:left;
}
.right{
float:right;
}
.grippie{
width:2px;
background:black;
display:inline-block;
z-index:200;
height:100%;
zoom:1;
z-index:200;
*display:inline;
}
.task P{
width:90%;
display:inline;
}
.task{
position:absolute;
z-index:50;
text-align:center;
vertical-align:center;
overflow:hiddesn;
}
/* task rag */
.task.red{
background: rgb(242,55,55); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2YyMzczNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjNhM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(242,55,55,1) 1%, rgba(255,58,58,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(242,55,55,1)), color-stop(100%,rgba(255,58,58,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(242,55,55,1) 1%,rgba(255,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(242,55,55,1) 1%,rgba(255,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(242,55,55,1) 1%,rgba(255,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(242,55,55,1) 1%,rgba(255,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f23737', endColorstr='#ff3a3a',GradientType=0 ); /* IE6-8 */
}
.task.green{
background: rgb(168,220,24); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E4ZGMxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ZmMzMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(168,220,24,1) 0%, rgba(143,195,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,220,24,1)), color-stop(100%,rgba(143,195,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(168,220,24,1) 0%,rgba(143,195,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(168,220,24,1) 0%,rgba(143,195,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(168,220,24,1) 0%,rgba(143,195,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(168,220,24,1) 0%,rgba(143,195,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8dc18', endColorstr='#8fc300',GradientType=0 ); /* IE6-8 */
}
.task.amber{
background: rgb(241,218,54); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZGEzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmRjNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(241,218,54,1) 0%, rgba(239,220,95,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,218,54,1)), color-stop(100%,rgba(239,220,95,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(241,218,54,1) 0%,rgba(239,220,95,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(241,218,54,1) 0%,rgba(239,220,95,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(241,218,54,1) 0%,rgba(239,220,95,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(239,220,95,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#efdc5f',GradientType=0 ); /* IE6-8 */
}
</style>
<div id="AEW1T3Task" class="task amber" style="height: 25px; width: 103px; top: 101px; left: 312px;">
<p>Style IT<p/>
<div id="AEW1T3Taskgrippie" class="grippie right"></div>
<div class="grippie left"></div>
</div>
Edit:
Here is a jsFiddle of the code above: http://jsfiddle.net/7R2uy/
This will solve your problem, place this code on the top of your html file:
Because of DOCTYPE div-s are rendered correctly inline with p.
To prove my point take a look here.
Also take note that inline-block has some problems with width. If possible use display: block; and float: left (right).