Padding not working well in IE9

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/

Here is CSS code:

.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.

I don’t have IE9 installed. What element (and where) is no padding showing up? Gonna eyeball it for now until I can grab an IE9 at work.

Hi,

The problem is that you are expecting padding + text-size to be the same cross browser and although padding is the same size cross browser, text size is not the same (taking into account half leading and line-height calculations).

Where dimensions are critical you need to specify the dimension exactly. You are moving your sub menus by an exact number of pixels (55px) so you need to make sure all your items add up exactly also.

If you give a height to the top level nav it should correct the display.

.navigationlink .menu> li > a{display:block;height:27px}

What about in Safari 8. Client is also complaining the menu is not displaying correctly in Safari 8.
and i am dam s shore that Safari 8 can only be use for MAC not for windows.
Please correct me if i am wrong ?

How can i solve Safari Problem

Note Paul’s answer above, which starts “The problem is …”. He’s told you what the problem is. Please acknowledge the help and give it a try.

This is a different issue.

Add vertical-align:top to .navigationlink ul li.

.navigationlink ul li {vertical-align:top}

if u have many users who use ie9 i suggest u create a seperate style sheet for ie9 the problem is that previously ie handled padding & margin differently from the other gecko based browsers but they later fixed it to be uniform with the other browsers

IE9 is a good enough browser to never need a stylesheet for it. I disagree that the OP should do this. Band-aid fixing the problem in an IE9 stylesheet doesn’t fix the underlying issue.

The problem was also evident in ie10 and IE11 so a conditional for IE9 is of no use here.

No they didn’t. Margin and padding (excepting known bugs) were always handled correctly in IE8+ (although there may have been different defaults for some elements but this is true in all browsers).

Thanks Guys IE issue fixed
But Unfortunately know he is having problem with Safari 8.
Only Home page is giving him the problem. Top navigation disturb but when they goto inner pages top navigation works with drop downs.

This mean slider creating the problem. This is a first time that i am facing this issue. Any one have idea about Safari8 on MAC and how can i fix that issue.

Have you tried the fix I gave in post #6 ?

Edit:: I just checked in Safari 8 on the mac and the menu is working ok for me now. Can you explain exactly what problem you (or your client) are seeing ?

Thanks you so much for all of you helping me in this difficult time. Know menu works perfectly
God Bless all of you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.