Issues with subnavigation menus changing positions when using CSS in IE7

Posted by Jacinda Littlefield on Stack Overflow See other posts from Stack Overflow or by Jacinda Littlefield
Published on 2010-05-23T23:43:39Z Indexed on 2010/05/23 23:51 UTC
Read the original article Hit count: 200

Filed under:

The subnavigation menus (located just below the blue tabbed navigation) are showing up in a different position in IE7--they display correctly in Firefox and IE8:

https://www.diservio.com/newsite/vehicle/auto-insurance.html

I created a separate IE7 CSS file and added conditional comments in the HTML. Here are the properties I modified:

topnav {padding-bottom: 10px;}

subnavbg h3 {margin: -663px 0 0 -340px;}

subnavmenu ul {margin: -663px 0 0 -340px;}

leftsubnav {MARGIN: -601px 0 0 -550px;}

Here's a portion of what the HTML looks like--all of the divs are nested inside the main div #container (not displayed):

 <div id="subplacement">
        <div id="maincontent">          
 ...        
                <h1>Auto Insurance</h1>
    <p>At Tony DiServio Insurance we know how important it is for you to protect yourself and your loved ones when you get behind the wheel.</p>

        </div>
    </div>
 ...
 <div id="subnavmenu">
        <ul>
            <li><a href="auto-insurance.html" id="autolink" title="Auto Insurance Link"><span>Auto</span></a></li>
            <li><a href="motorcycle-insurance.html" id="cyclelink" title="Motorcycle Insurance Link"><span>Motorcycle</span></a></li>
            <li><a href="boat-insurance.html" id="boatlink" title="Boat Insurance Link"><span>Boat</span></a></li>
        </ul>   
 </div>
 <div id="leftsubnav">
            <ul>
            <li><a href="auto-coverage.html" id="coverlink" title="Coverage Link"><span>Coverage</span></a></li>
        </ul>
        </div>
 </div>

The submenus are also bounced into different positions on the Home > Vehicle page and Vehicle > Auto Insurance > Auto Coverage page. I can't figure out why. Any suggestions on what I need to fix for IE7?

© Stack Overflow or respective owner

Related posts about css