Issues with subnavigation menus changing positions when using CSS in IE7
- by Jacinda Littlefield
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?
