Thu, 2005-12-01 19:07
I searched and found some similar topics, but nothing has worked for me yet. 
This is the nav bar I'm testing.
The white-space above the links is by design and the links don't go anywhere yet. The problem is the services tab should expand out into three additional links in a block to the right.
Edit: I just noticed, the positioning is off as well. Not sure why that is.
It looks and works just fine in Firefox and Safari.
I ran the CSS and HTML through the W3C validators and only have warnings on the CSS.
I'm looking for any help I can get to make this work in IE. I'm thinking I might need some Javascript for this to work? Is there some CSS I'm using that isn't compatible with IE?
For reference, the CSS file can be found here.
http://www.chupon.net/test/scripts/main.css
Thanks for any help you all can offer. 
Thu, 2005-12-01 19:38
#1
Re: Expandable nav bar; works in FF and Safari, not in IE
Chupon wrote:
Expandable nav bar; works in FF and Safari, not in IE
If you want your font-size to increase in IE, you cannot use px. Try using a % or an em for your font-size.
edit: I misread your question, disregard this.
Thu, 2005-12-01 19:42
#2
Expandable nav bar; works in FF and Safari, not in IE
For starters you are trying to show the nested ul using li:hover > ul
IE does not recognize the child selector so that will be a big stumbling block secondly IE does not understand :hover on anything but anchor elements so for these menus to work a small bit of JavaScript is required or the hover.htc file neither of which I can see at the moment.
Best thing is probably to study the "Son of suckerfish" examples to see how they are done.
Hugo.
Thu, 2005-12-01 19:47
#3
Expandable nav bar; works in FF and Safari, not in IE
Thank you both, I will take a look at those examples.
Sat, 2005-12-03 19:50
#4
Expandable nav bar; works in FF and Safari, not in IE
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
is needed for IE rollovers to work
you may need this too
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: 155px;
}
ul li a.bg{background-image:url(images/sub.gif) no-repeat;}
That is what I used in my sites that have the same css rollovers