IE 7 Issues

[imsoper]

I’ve noticed that on a website I’m working on, some of the dropdown menu items are not being displayed in IE 7.

For this site:
http://fulleryouthinstitute.org/

Under the "college transition" link, it shows only the "link" page drop down, but if you look at this in Firefox or examine the HTML, it should be showing: "Resesarch", "Articles & Audio" and "Links"

Any ideas or solutions to why IE 7 is not showing everything?

Ian

[imported_Ryan]

Nice looking menu you have there!

But you have done too much hacking for me to find a quick solution to your problem. I don’t mind bug fixing my own code, but you have so much of your own code in there that it will take me a long time to figure out what the problem is.

[imsoper]

Gotcha. I didn’t change the JS, just the CSS. What do you recommend I can do? I’m pretty much at a loss to get this to work.

I originally had problems with the CSS, because I needed the top level nav to be different widths, not the same width (as it is by default)

[imported_Ryan]

This is too time consuming for me to provide for free, but I do this type of integration for our premium members … https://geek.hellyer.kiwi/premium_support/

I’m not sure what is causing your problem, so there is not much I can do to help beyond spending a whole bunch of time on it. However I don’t have much time spare so if you need me to help then you will need to upgrade to our premium membership option sorry.

[imsoper]

I just upgraded to premium support, how do we proceed?

[imported_Ryan]

Thanks.

I’ll have time to work on it tonight. I’ll hopefully post back within the next 12 hours with some new code for you.

[imsoper]

Thanks! I appreciate it.

[imported_Ryan]

I’m taking a look now. You sure do have a lot of CSS files in there!

[code:14motph8]<style type="text/css">
</style>
<link rel="alternate" type="application/rss+xml" title="Podcast: FullerYouthInstitute.org &Acirc;&raquo; Audio/Podcast " href="http://fulleryouthinstitute.org/feed/podcast/" />
<link rel="stylesheet" href="http://fulleryouthinstitute.org/wp/wp-content/plugins/wp-stats/stats-css.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/style.css" type="text/css" media="screen, print" title="no title" charset="utf-8" />
<link rel="stylesheet" href="http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/css/topnav.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/css/iehacks.css" type="text/css" media="screen" title="ie hacks" charset="utf-8" />
<link rel="stylesheet" href="http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/css/ie6.css" type="text/css" media="screen" title="ie hacks" charset="utf-8" />[/code:14motph8]

[imported_Ryan]

I’ve rebuilt the menu using wrapper tags which display the menus background, with a skinny block in the middle which holds the menu. Due to the central section being skinnier than before, I’ve edited the topnav-sprites.png image and will send it to you via email shortly.

If you place the following codes around the suckerfish() function like so:
[code:154qd0pu]
<div id="mainmenu_wrapper">
<div id="mainmenu">
<?php suckerfish(); ?>
</div>
</div>
[/code:154qd0pu]

The replace your current CSS with the following, then the menu should appear correctly:
[code:154qd0pu]
#mainmenu_wrapper {background:#729348 url(‘http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/images/topnav-bg.png’) repeat-x;width:100%;height:67px}
#mainmenu {margin-top:25px;left:20px;float:left;position:relative;text-align:left;height:15px}
#mainmenu ul {position:relative;margin:0;padding:0;list-style:none}
#mainmenu li {letter-spacing:0em;background:#729348 url(‘http://fulleryouthinstitute.org/wp/wp-content/themes/fyi/images/topnav-bg.png’) repeat-x;font-weight:bold;font-size:0.9375em;margin:0;padding:0;margin:0;float:left;font-family:verdana,sans-serif;position:relative;list-style-type:none}
#mainmenu li:hover {background:#AEE16E}

#mainmenu li.page_item {background:url(‘images/topnav-sprites.png’);background-position:0 0}

#mainmenu li.page-item-7 {width:64px;background-position:0 top}
#mainmenu li.page-item-7:hover {width:64px;background-position:0 15px}
#mainmenu li.page-item-9 {width:96px;background-position:-64px top}
#mainmenu li.page-item-9:hover {width:96px;background-position:-64px 15px}
#mainmenu li.page-item-11 {width:66px;background-position:-159px top}
#mainmenu li.page-item-11:hover {width:66px;background-position:-159px 15px}
#mainmenu li.page-item-13 {width:152px;background-position:-225px top}
#mainmenu li.page-item-13:hover {width:152px;background-position:-225px 15px}
#mainmenu li.page-item-15 {width:114px;background-position:-528px top}
#mainmenu li.page-item-15:hover {width:114px;background-position:-528px 15px}
#mainmenu li.page-item-17 {width:148px;background-position:-378px top}
#mainmenu li.page-item-17:hover {width:148px;background-position:-378px 15px}

#mainmenu li a {text-indent:-999em;text-decoration:none;display:block;padding:0 15px;line-height:15px;color:#FFFFFF}
#mainmenu li a:hover {text-decoration:none;color:#004160}

#mainmenu ul ul {position:absolute;left:-999em;top:15px;width:138px;padding-top:10px}
#mainmenu ul ul ul {padding-top:0}

#mainmenu li:hover ul,#mainmenu li.sfhover ul {left:auto}
#mainmenu ul ul li a {text-indent:0;padding:14px 10px;;text-transform:normal}
#mainmenu ul ul li.page_item {z-index:10;width:138px;background:#666666;font-family:verdana,sans-serif;font-size:0.8em;font-weight:normal;font-style:normal;background:#729348;}

#mainmenu ul ul li a {line-height:1.5em;color:#FFFFFF}
#mainmenu ul ul li:hover a,#mainmenu ul ul li.sfhover a {color:#004160}
#mainmenu ul ul li:hover li a,#mainmenu ul ul li.sfhover li a {color:#FFFFFF}
#mainmenu ul ul li:hover li a:hover,#mainmenu ul ul li.sfhover li a:hover {color:#004160}
#mainmenu ul ul li:hover,#mainmenu ul ul li.sfhover {background:#AEE16E}
#mainmenu ul ul ul li.page_item {font-size:1em}
#mainmenu ul ul ul, #mainmenu ul ul ul ul, #mainmenu ul ul ul ul ul {position:absolute;margin-left:-999em;top:0;width:138px}
#mainmenu li li:hover ul,#mainmenu li li.sfhover ul,#mainmenu li li li:hover ul,#mainmenu li li li.sfhover ul,#mainmenu li li li li:hover ul,#mainmenu li li li li.sfhover ul {margin-left:138px}
[/code:154qd0pu]

[morix]

I’ve the same problem. The menu sub menu is not displayed under ie 7…
I did not made any hacks, I used the default style and just changed Colors and heights.
You can see it here: http://newco.9zwanzig.de.

Safari, Chrome and firefox 3 work fine.

Thanks for any help provided…

[imsoper]

Btw, your code worked great! I had to make a couple modifications, but definitely better then the nightmare code I had, now I know the proper way to do dropdowns with different width buttons/text on the top row.

[imported_Ryan]

Glad to hear you got it working imsoper ” title=”Smiley” />

morix – I’m a little busy right now. I’ll try to reply by tomorrow. If I don’t, then post back again as it means I probably forgot.

[imported_Ryan]

Morix – Perhaps try removing the <div class="menu "> tag which is wrapped around the menu. Some templates wrap the menu in tags which style lists, hence mess up the menu inside them.

If that doesn’t work, or if removing it causes other problems you can’t fix, then let me know and I’ll take a closer look for you.

[imported_Ryan]

BTW Morix, your site looks pretty slick!

Not the same boring old blog designs most people add the menu to.

[morix]

Hi Ryan,

thanks, the hint with the enclosing div helped.. Problem solved. Thanks for the compliment, it’s a project we are developing for a customer and we like to use wordpress as a CMS core system and then to code and develop a lot of stuff around it…

[Author]

Posts