[TriLUG] CSS question

[Brian McCullough]

I have been fighting an issue for some time, seeming to dig myself deeper with every attempt to fix things.

I have a series of nested Divs, producing a menu down the side of the page.  As usual, Firefox and Chrome behave just fine, but IE 8 is the target.

What is interesting to me is that although the HTML and CSS is identical for all of the menu items, one or more of the menu items is out of line with the others.

The structure is:

Body
  Div
  Div
    Div ( menu container )
      Div ( menu title )
      Div ( menu body )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
      Div ( menu title )
      Div ( menu body )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
      Div ( menu title )
      Div ( menu body )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
    Div ( main content )
    Div ( footer )


However, in the IE 8 page, it displays as:

Body
  Div
  Div
    Div ( menu container )
      Div ( menu title )
      Div ( menu body )
          Div ( menu item )
          Div ( menu item )
          Div ( menu item )
        Div ( menu item )
        Div ( menu item )
      Div ( menu title )
      Div ( menu body )
          Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
      Div ( menu title )
      Div ( menu body )
          Div ( menu item )
          Div ( menu item )
        Div ( menu item )
        Div ( menu item )
        Div ( menu item )
    Div ( main content )
    Div ( footer )


Any suggestions?

Obviously, I will be happy to show more specific content on request.


Thanks,
Brian