LogoWrapper is overlaping NavMain (Only in dreaded IE)

[flipjargendy]

I created some icons to use instead of plain text on my navMain. All looks and works well in Firefox. I've started making changes for all of the bugs in IE though. This one I cannot quite figure out on my own.

I've attached a screen shot. I've shortened the width of LogoWrapper so that you can see what is under it. Here is the CSS for both of those objects:

#logoWrapper{
    border: 0px;
    background-color: #FFFE9A;
    height: 77px;
    width: 755px;
    }

#navMainWrapper {
    margin: 0em;
    background-color: #FFFE9A;
    padding: 0px;
    font-weight: bold;
    color: #000;
    height: 8px;
    border: 0px;
    }

#navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

[econcepts]

Make sure the combined width of your images do not exceed the total width of the section they are in (including padding) or you'll get things "moving themselves around" under various browsers.

You'll also want to check your "floats" and position elements to determine which is causing the problem.

I always tell people to create a different colored "border" around each of the elements in question (maybe more if needed). Then, view your site in the browser it is messed up to determine which element may have the settings incorrect.

This is one way to begin debugging the CSS.

[flipjargendy]

Thanks, I usually do that but it did not occur to me to do it in this case.

To fix it I just moved the nav icons to the logo wrapper. They are floated right. It's displaying in IE and firefox just how I want it to.

[econcepts]

Glad to hear you got it working.