0

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.

3
Contributors
2
Replies
13
Views
2 Years
Discussion Span
Last Post by almostbob
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.