CODEWITHSUNDEEP
htmlcss
Khamidulla
Khamidulla

Reputation: 2975

Mozilla does not recognize display:inline-block inside display:table-cell container

I am trying to build fluid layout using CSS with following code. (Sorry If I include to much).

Here is code for reset.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

Here is code for mycss.css

.border
{
/*
    border-color:#000000;
    border-style: solid;
    border-width: 1px;
*/  
    background-color: #000000;
}

.border-aqua
{
/*
    border-color: #13eded;
    border-style: solid;
    border-width: 1px;
*/  
    background-color: #12eded;
}

.border-red
{
/*
    border-color: #ff0404;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #ff0404;
}

.border-green
{
/*
    border-color: #008100;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #008100;
}

.border-blue
{
/*
    border-color: #0000fd;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #0000fd;
}

.border-blue:hover
{
    background-color: #ff0404;
}

#title
{
    margin: 10px;
    height: 40px;
    width:auto;

    display: block;

}

#ide
{
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 80%;

    width: auto;


    display: block;
}

#container
{
    width:100%;
    height: 100%;
    display:table;
}

#tasks
{
    height: 100%;
    width:250px;
    display:table-cell;
}


#selectedView
{
    height: 100%;
    width: 200px;
    display: table-cell;
}

.selectedTasks
{   
    height:30px;
    width: 150px;
    display: block;


    display:-moz-inline-stack;
    display:block;


    background-color: #878787;

}

#selectedViewExpander
{
    height: 100%;
    width: 15px;
    display: table-cell;
}


#area
{
    width: auto;
    height: 100%;
    display: table-cell;
}

and here is html:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <link href="./css/reset.css" rel="stylesheet" type="text/css" media="all">
        <link href="./css/mycss.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <div id="title" class="border"></div>
        <div id="ide">
            <div id="container" class="border">
                <div id="tasks" class="border-red"></div>
                <div id="selectedView" class="border-green">
                    <p class="selectedTasks">Copy</p>
                    <p class="selectedTasks">Past</p>
                    <p class="selectedTasks">Cut</p>
                </div>
                <div id="selectedViewExpander" class="border-blue"></div>
                <div id="area" class="border-aqua">

                </div>
            </div>          
        </div>
    </body>
</html>

I have problem with displaying this page in Mozilla. However in Chrome and Safari everything work properly. I am new at css and html. If somebody gives me advice on this it will be really appreciated. Or give some idea how I can figure out this kind of problems in future. Thank you in advance.

Link to Fiddle

Upvotes: 0

Views: 3209

Answers (2)

sarfaraj
sarfaraj

Reputation: 158

please check out some updates like float property in mycss.css 

#tasks
    {
        height: 100%;
        width:250px;
        display:table-cell;
        float:left;
    }
    #selectedView
    {
        height: 100%;
        width: 200px;
        display: table-cell;
        float:left;
    }
    #selectedViewExpander
    {
        height: 100%;
        width: 15px;
        display: table-cell;
        float:left;
    }

Update: I have check the first answer and it works perfectly chrome but not in mozila. try to apply above code and let me know.

Upvotes: 2

gaynorvader
gaynorvader

Reputation: 2657

Stick vertical-align:top; into #selectedView like this: http://jsfiddle.net/TEy2p/1/

At the moment, Firefox is placing your text along the bottom of the table cell.

Upvotes: 2

Related Questions