I need to be universal baby :)

November 8, 2006 7:10 AM

Can you help me recode one part of my blog / website so that it works in all browsers? (I think its an easy fix that I am over looking)

I have a blog at www.mentaldribble.com. I love the new theme I found but there’s one problem. On the upper right hand corner where it says PAGES, CATEGORIES, ARCHIVES, when you mouse over it there is suppose to be a drop down list. It works in IE 7 but not 6, and I believe it works correctly in Firefox too but I would like it to work in all the browsers.

What can I change so the code works in IE 6?

Also - I recently added a few more categories and the drop down is interfering with the links on the left of the page and I cant seem to select any of the categories that overlap those permanent links on the left. Namely "virgin islands" category on the drop down overlaps the search box, and when I try to select that link the drop down list just disappears..

If you can suggest a better way to accomplish this drop down list, or can just fix the way it currently works, that would be AWESOME.

Thanks hive mind.

posted by crewshell to computers & internet (5 comments total)

IE6 "Differences"

in case no one feels like doing this for you.
posted by shownomercy at 7:23 AM on November 8, 2006

Yea - Umm that doesn't really address my issue, I already know IE6 is reading it diffrently hat sire does not tell me what needs to be changed to fix the problem. I tried searching online myself already and with limited CSS knowledge was unable to figure out what was wrong. Thanks for the link though.
posted by crewshell at 7:39 AM on November 8, 2006

If you do a google code search for "fucking IE", "Hack for IE" or similar strings, you can find some hints, and even if you don't, it will at least make you feel better.
posted by Mr. Gunn at 7:47 AM on November 8, 2006

These do not work in IE 6:

• :hover, except on links
• The > selector.

Thus, this key CSS rule will not work:

  #topmenu ul li:hover>ul {
    visibility:visible;
  }

I recommend that you (a) get rid of the > selector and either (b) wrap your lists in <a> tags so you can use :hover or (c) use JavaScript.
posted by Khalad at 9:19 AM on November 8, 2006

Here is a site that is a run down on how to use a little javascript to enable you list in IE6.
htmldog
Using this I came up with something that might work for you, but I'm not the most knowledgeable when it comes to CSS. So heres a fix that is pretty close to want you want, besides the blue line under the 'pages', 'categories' and 'archives' when you mouseover.

First add this into your index.html or whatever your index page is:

< script text/javascript>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; 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>

Then, you need this
< ul id="nav"> after < div id="topmenu"> so it looks like:


< div id="topmenu">
< ul id="nav">
< li>< a href="#">Pages< /a>

Then you need to change your style.php, which is just a css file, and add

#nav, #nav ul {
padding: 0;
margin:0 0 0 5px;
list-style: none;
}

#nav a {
display: block;
}

#nav li {
float: left;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Almost done!!! Now, remove "visibility:hidden;" from "#topmenu ul li ul" and also remove " border-bottom:2px solid #8dc2e2;" from "#topmenu ul li a:hover" and you should be good to go.
posted by trueluk at 9:33 AM on November 8, 2006