Getting this CSS to work in IE6
- by jerrygarciuh
Hi folks,
Working on this page: http://www.karlsenner.dreamhosters.com/about.php and having trouble with the navigation in IE6. It validates as XHTML 1.0 Transitional. Works great in FF, IE 8, Chrome, and Windows Safari. In IE6 and Opera 10 the drop menus appear too high.
I tried adding in the different versions of http://code.google.com/p/ie7-js/ but it did not solve the issue in IE.
The CSS looks like this:
#wrapper {
position: relative;
display: block;
background-color: inherit;
margin: 0px auto;
padding: 0;
width: 900px;
min-height: 900px;
}
#nav {}
.navImage {
position:relative;
display:inline;
height:102px; /* added in hopes of helping IE position but no dice */
}
.subMenu {
position:absolute;
z-index:10;
background-color:#FFF;
top: 14px;
left:0;
}
.subMenu a:link, .subMenu a:visited, .subMenu a:active{
display:block;
width:90%;
padding:6px;
margin:0;
color:#3CF;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
.subMenu a:hover{
display:block;
width:90%;
padding:6px;
margin:0;
color:#3CF;
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
}
jQuery rollovers:
$('#navcompany').hover(function () {
$('#companyMenu').css('display', 'block');
$('#companyImg').attr('src','g/nav/company_over.gif');
}, function () {
$('#companyMenu').css('display', 'none');
$('#companyImg').attr('src','g/nav/company.gif');
});
And one of the cells. Since the menu is coming out of PHP and IE was not respecting the widths I just use PHP to get the nav image widths and write them to styles on the fly. Solved the width issue as IE acted like they should inherit their width from the wrapper. This may be a clue as to why they don't appear below their nav images but I can't sort it.
<div id="navcompany" class="navImage" style="width:128px">
<a href="about.php">
<img src="g/nav/company_over.gif" name="companyImg" width="128" height="102" border="0" id="companyImg" alt="company" />
</a>
<div id="companyMenu" class="subMenu" style="display:none; width:128px">
<a href="about.php">About us</a>
<a href="location.php">Our location</a>
</div>
</div>
Any advice greatly appreciated!
JG
