esraaelsayed
esraaelsayed

Reputation: 39

css "display:table !important" And IE11 not working

"display: table !important" is working fine in chrome but not working in IE 11

Asking for solution or any other feature similar to substite

this is part of the css and html code and not all of it:

       <ul id="jMenu">
                   <li><a href="#" >Educational Services >> </a>    


            <!--------------------------------------------> 
                            <ul style="list-style: none; display:table;  ">

                                <li ><a href="#"  >For Institutions >></a>
                <ul style="list-style: none;  ">
                <li ><a href="#">Application Form</a>
                </li>
                <li ><a href="#" >Photo Gallery</a>
                </li>
                <li ><a href="#"  >Policy</a>
                </li>
                </ul></li>


            <!------------------------------------------>   

                <li ><a href="#"  >For Librarians >> </a>
                <ul style="list-style: none; ">
                <li ><a href="#" >BA International Librarianship Training Program</a>
                </li>
                <li ><a href="#" >Online Courses >> </a>
                <ul style="list-style: none; "><li ><a href="#" >Application Form</a></li>
                <li ><a href="#" >Schedule</a></li>
                <li ><a href="#" >Policy & Online code of ethics</a></li>

                </ul></li>
                <li ><a href="#" >Librarians' Orientation >> </a>
                <ul style="list-style: none; "><li ><a href="#" >Online Survey</a></li>

                </ul></li>

                <li><a href="#" >Internships & Study Visits >></a>
                <ul style="list-style: none; "><li ><a href="#" >Registration Form</a></li>

                </ul></li>  
                </ul></li>

            <!--------------------------------------------> 

                    <li ><a href="#"  >Public programs >> </a>
                    <ul style="list-style: none; "><li ><a href="#"  >Orientations >> </a>
                    <ul style="list-style: none; "><li ><a href="#" >Library Orientation Tour</a></li>
                    <li ><a href="#" >Nobel Section Tour</a></li>
                    <li ><a href="#" >Video orientations, interactive orientations</a></li></ul></li>
                    <li ><a href="#" >Classes >> </a>
                    <ul style="list-style: none; "><li ><a href="#" >IL courses by title</a></li>
                    <li ><a href="#" >DL courses</a></li>
                    <li ><a href="#" >IL courses by title</a></li></ul></li>
                    <li ><a href="#" >Schedule >> </a>
                    <ul style="list-style: none;  "><li ><a href="#"  >Schedule</a></li>

                    </ul></li>
                    <li ><a href="#" >Tutorials</a>
                    </li>
                    <li ><a href="#" >Classes Policy</a>
                    </li>


                </ul></li>      

            <!---------------------------------------------->   
                    </ul>
                   </li>
               </ul>

And the css

.jMenu{
display:table;
margin:0;
padding:10px 15px;
list-style:none; 
list-style-type: none;
}
.jMenu li{
display:table-cell;
background-color:#772728;
margin:0;
list-style:none;
list-style-type: none;
}
.jMenu li a{
padding:10px 15px;
display:block;
background-color:transparent;
color:#fff;
text-transform:uppercase;
cursor:pointer;
font-size:20px;
}
.jMenu li a:hover{
background-color:#923031 ;
}
.jMenu li:hover>a{
background-color:#923031 ;
}
.jMenu li ul{ /*display: table  ;*/  
position :absolute;
padding:0;
margin:0;
list-style:none ; 
list-style-type: none;
}
.jMenu li ul li{ 
background-color:#772728;
display:block ;
border-bottom:1px solid #923031;
padding:0;
list-style:none;
list-style-type: none;
 position:relative;
}
.jMenu li ul li a{
font-size:15px;
text-transform:none;
display:block ;
padding:7px;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
}
.jMenu li ul li a.isParent{
background-color:#923031;
}
.jMenu li ul li a:hover{  
background-color:#923031;
border-top:1px solid #772728;
border-bottom:1px solid #772728;
}

.jMenu li ul li ul {display: none;}
.jMenu li ul li ul li {display:block;}
.jMenu li ul li ul li a{display:block;}

I added the display:table !important in the second

Upvotes: 0

Views: 833

Answers (1)

Tariq
Tariq

Reputation: 402

jMenu is id u have used and you have used

.jMenu li ul{ /*display: table  ;*/  }

use below. and make sure ur selector properly used

#jMenu li ul{ /*display: table  ;*/  }

Upvotes: 1

Related Questions