Navigation problem on IE

HTML & CSS
1

Hi,

Please have a look at this website first: Baby Blog and Resource Centre - Hello Baby Online Nursery shop, London UK

You will see on FF and Chrome the navigation is working fine but on IE navigation tabs on top are jumping … I think hover position is not working properly…

I really tried my best to find out the solution to fix it for IE but failed. What is actually going on?

Please help. Im working on this for so many days but not getting any result. But frustrated by now. Can you advice what really is happening on IE in this case?

2

Hi,

It actually looks ok to me in IE8 but jumps in Firefox 4?

The problem is that you have a fixed pixel width image and yopu are positioning the hover on top of the image using ems which are a rounded measurement and will vary with browers and font-size.

use pixels when you have a fixed width to work with.

Make these changes:


[B]#branding #header-menu{left:0}[/B]/* ie7 and under need co-ordinates*/
#header-menu .header-menu-tabs #header-menu-ul-left {
[B]  display: inline;/* double margin bug fix*/[/B]
  float: left;
  list-style: none ;
 [B] margin:0 0 0 16px;/* exact measurement needed */[/B]
  position: relative;
}
3

Paul,

I think it is working on IE 8 and as well as on firefox. A big thanks to you mate. THANK YOU!