Why do my rollover menus on [URL=”http://www.zluth.org/”]http://www.zluth.org[/URL] have about 2 or 3 pixels transparent at the right border?? Could someone help me fix that?
@CentauriAug 21.2008 — #This is due to the <li>s being set to 100% width and having the side borders as well, which pushes the width further. If the side borders are done on the <ul>s instead it should fix that up: [CODE].main-navigation .nav,.main-navigation .nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width: 198px; [COLOR="Red"]border: 1px solid rgb(200,200,200); border-width: 0 1px 1px;[/COLOR] }
.main-navigation .nav li { /* all list items */ float: left; width: 100%; position: relative; background:transparent url(/images/left_nav_shadow.png) repeat-y; border: 1px solid rgb(200,200,200); [COLOR="Red"]border-width: 1px 0;[/COLOR] } .main-navigation .nav li:hover ul,.main-navigation .nav li.sfHover ul { left: [COLOR="Red"]198px[/COLOR]; z-index: 101; }[/CODE]
The IE6 hover problem has something to do with the function looking for a class name. I would dispense with that and just let the suckerfish search through an id of "main-navigation" :[CODE]sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("[COLOR="Red"]main-navigation[/COLOR]").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);[/CODE]
@jrthor2authorAug 21.2008 — #I have 2 different menus that have rollovers, one above the email signup, and the menu below that has a rollover as well. That's why I opted to use a class name instead of an id, so I didn't have to have 2 different menu css styles. Is there a better way to accomplish this, and have it work in IE6?
@CentauriAug 21.2008 — #The suckerfish script is only required on the main navigation div menus, so changing the javascript as I noted above would not involve any changes to class names or styling.
@jrthor2authorAug 21.2008 — #I would need to change my main wrapper div around the left nave to be an id="main-navigation" versus a class="main-navigation", right? I'd then need to change all my styles in my css for .main-navigation to #main-navigation as well, wouldn't I?
@CentauriAug 21.2008 — #Now I [B]am[/B] confused..... I thought the "main-navigation" name [B]was[/B] an id, but looking back at the css I posted above it looked like a class, but looking at the site again it is an id, and the css has both class and id ....?!??
The rules should be #main-navigation, so it should simply be a matter of swapping periods with hashes.
Rule of thumb - if a name is only going to be used once on a page, make it an id (and any javascript can then reference it).
@jrthor2authorAug 21.2008 — #Yes, I know that rule of thumb. I just added all the id's and changed the div from a class to an id, but it still does not work in IE6.
@CentauriAug 22.2008 — #Just noticed that the class name referenced in the css is "sfHover", but the class attached in the javascript is "sfhover" - note the capital "H".
@CentauriAug 22.2008 — #Think I found it. You have the overflow of #main-navigation set to hidden for IE6 (why?), which hides everything outside the set size of the div - that includes the sub menus.[CODE]#main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; [COLOR="Red"]overflow:hidden /*IE6*/;[/COLOR]padding-bottom: 325px; z-index: 1; position: relative;}[/CODE]
@CentauriAug 22.2008 — #Do have have some sort of pngfix script running on that page? - I suspect so, as I can see a couple of transparent png graphics, but cannot see a reference to such a script - maybe a .htc file?
Trouble with any of the javascript-based fixes is that they target ALL png files whether transparent or not, which gives the browser a lot of work to do unnecessarily updating all the png's when it is not necessary. If most graphics are png's but only a few are transparent, then it would be better to target just the transparent ones via a filter expression in a conditionally linked separate css file.
@jrthor2authorAug 24.2008 — #I just put a pngfix.js file on my site, but I don't have IE6 here. If someone could test, or I will test when I get to a computer with IE6.
@CentauriAug 24.2008 — #The only png file with transparency is the RSS feed icon, and it is an 8bit indexed file, which IE6 is fine with. Therefore, you don't need a pngfix at all. The problem is definitely a javascript one, though - disabling javascript cures the menu graphics issue.