IE8 JavaScript in IE7

Question

A website I'm working on has sidebar with expandable/collapsible entries. Some of the items on this sidebar have a bullet next to them that, when clicked on, reveals a second level of sidebar items. We are using an onclick event to call this function to do this. Here is the script:

<script type="text/javascript">
function menuClick(menu)
{
    if(menu.nextSibling.nextSibling.nextSibling.style.display == "inline")
    {
        menu.nextSibling.nextSibling.nextSibling.style.display = "none";
    }
    else
    {
        menu.nextSibling.nextSibling.nextSibling.style.display = "inline";
    }
}
</script>

This works in IE8, but doesn't work in IE7. In IE7, when these bullets are clicked, the menu will expand like normal, but doesn't show the next level of links. Also in IE7 these bullets are above their respective links on a separate line. If you'd like to take a look a the site it's www.triptac.org. If you have IE8 you can see how it doesn't work in compatability view. I'd greatly appreciate any help.

Try alerting menu.nextSibling.nextSibling.nextSibling.style.display. It may need INLINE to be in caps. — wajiw
– wajiw, Commented Dec 13, 2010 at 23:15

mu is too short · Accepted Answer · 2010-12-14 03:20:26Z

1

display: inline really isn't what you want to show the hidden lists, display: block (the default for lists) is what you want. I suspect that will help with the show/hide but it is hard to say without an editable example.

You'll have to mess around with the padding and margins on the arrows to get them in the right place in IE7; set up an IE7-specific stylesheet and load it using an IE7 conditional comment, that will keep the IE7 nonsense from polluting everything else. Then start adjusting the margins and padding on the list, list items, and the arrows until IE7 behaves itself. I'd like to be able to offer better advice but getting IE7 to render things sensible is generally a simple process of fiddling with the margins and padding (and sometimes display) until it works (and then the drinking (or your equivalent) starts).

Matt Ball is right, jQuery would make a lot of this cleaner. OTOH, you'd still have to beat IE7 into submission so jQuery won't make all the pain go away.

answered Dec 14, 2010 at 3:20

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brendan Over a year ago

Thanks, using block instead of inline fixed this up no problem. However, I don't know if you noticed the "About Us" section of the sidebar. The bullet appears on the line above "About Us". I was already using a conditional stylesheet to fix the position of all the menu items. Is there something I could add to this stylesheet to make sure these menu items are on the same line as their respective bullets?

mu is too short Over a year ago

Cool, half way there. I saw the positioning mess around "About Us", could be a width issue forcing a line break. I noticed that at least one of the lists was being indented as well. Trying starting the margins and paddings to zero on the <ul> and <li> and anything else in the menu, then tweak them up or down until it work. Working with IE7 is often a "fiddle with it 'till it works" job.

Brendan Over a year ago

Yeah I figured it was the widths forcing it down. I just could figure out why, but I've been tweaking them and it seems to be working. Thanks a lot.

mu is too short Over a year ago

Nice. We all need a bit of help and support when dealing with IE7. I'm glad you could parse that awful English in my last comment, no more commenting before coffee for me!

Collectives™ on Stack Overflow

IE8 JavaScript in IE7

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related