Top navigation menu with drop down works perfectly in IE8 but in IE 9 it didn't support padding or height as it has to be. When i adjust it according to IE9 then in IE8 extra height appear.
check this link:
http://moghulweb.com/KLB/

.navigationlink{margin-left:10px; font-family:Arial;}

.navigationlink ul {
  /*text-align: left;*/
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;

}
.navigationlink ul a {color:#fff; text-decoration:none; font-size:12px;}
.navigationlink ul span{display:block; text-align:center; font-size:9px;}
.navigationlink ul li {


  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 14px 13px;
  /*background: #fff;*/
  /*cursor: pointer;*/
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-align:center;
  border-right:1px solid #000;
}
.navigationlink ul li:last-child {border-right:none;}
.navigationlink ul li:hover {
  background: #8f4201;
  color: #fff;
}
.navigationlink ul li ul {
  padding: 0;
  position: absolute;
  top: 55px;
  left: 0;
  width: 200px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;

}
.navigationlink ul li ul li { 
  background: #8f4201; 
  display: block; 
  color: #fff;
text-align:left !important;
  /*text-shadow: 0 -1px 0 #000;*/
}
.navigationlink ul li ul li:hover { background: #c66202;}
.navigationlink ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

You can see there is extra space appear in IE9.
Does anybody have solution of that. Its Urgent plz help me.

Recommended Answers

All 2 Replies

I can't check easily in IE9, but it has probably to do with the display: inline you've set on .navigationlink ul. I see you did that to center the menu items (incl. the span) vertically, but I guess you will have to find another way to do this. Paddings and margins on inline elements will only push elements horizontally away.... well, at least that should be the default behavior.

look up IE conditional comments

<!--[if lt IE 9]>
style for ie 4-8
<![endif]-->

or

<!--[if gt IE 8]>
style for ie 9 +
<![endif]-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.