Member Avatar for kuhashmi

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:

.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
  • 101 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

reported extra vertical space in IE9 while the same menu looked fine in IE8. correctly pointed at the UL being forced into an inline formatting context, and 's conditional-comments suggestion will work as a last resort. A more robust approach is to remove the fragile inline/negative-margin hacks and make the layout explicit so all browsers compute the line box and vertical alignment consistently.

A practical, cross‑browser fix is to let the UL shrink to its content using inline-block, kill the inter-element whitespace rather than using negative margins, and explicitly set vertical alignment and font metrics on the children. Example (concept only — adjust selectors/values to match the theme):

.navigationlink { text-align: center; }
.navigationlink ul { display: inline-block; margin: 0; padding: 0; font-size: 0; vertical-align: middle; }
.navigationlink li { display: inline-block; vertical-align: middle; }
.navigationlink a { font-size: 12px; line-height: 1; /* restore text size */ }

Notes and quick checks: explicit vertical-align on the inline-block LIs removes baseline/descender gaps; font-size:0 on the parent removes the usual 4px whitespace between inline-blocks and then font-size is restored on the text elements. If a fixed height is preferred, set an explicit line-height equal to that height for vertical centering. Confirm a standards DOCTYPE is present and use browser devtools to inspect the computed box model (padding + line-height) — IE9 can expose gaps caused by line boxes or default UA stylesheet differences. Conditional comments can be used to target legacy IE, but fixing the layout this way avoids browser-specific rules and is forward-compatible.

Relevant reference reading: the CSS display and vertical-align behaviors are documented at MDN: display and MDN: vertical-align.

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

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.

Member Avatar for almostbob

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]-->
Edited by almostbob
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.