2 replies [Last post]
lauras2008
lauras2008's picture
Offline
newbie
Last seen: 8 years 43 weeks ago
Timezone: GMT-4
Joined: 2008-12-17
Posts: 2
Points: 2

I am having trouble getting my submenus to work properly in IE7. I'm using Wordpress with the NAVT navigation plugin.

You can see the essential part of the navigation bar here:
http://www.bytegraphics.com/navtest/about-jcds.html

In IE7, there is a gap between the submenu items. I attached a screenshot.

I really can't start over with suckerfish at this point (some people on other forums have suggested this). I'm hoping there is something reasonably simple I can do just to get rid of the gap.

I've fixed all the errors in the HTML and CSS.

Here's the HTML (I removed some of the items since they are redundant):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nav test</title>
 
<link rel="stylesheet" href="http://jcdsboston.localweb.com/dev/wp-content/themes/JCDS-theme/style.css"  />
</head>
 
<body>
    <div style="display: inline;"><ul id="topmenu"><li>
 
    <!-- NAVT v1.0.34 -->    
    <ul class='menu home firefox v3-5-3 en-US'>
 
        <li class='erow home_item page_item hometab'><div class='navt_gl'><a href='http://jcdsboston.localweb.com/dev' title='Home' class='navt_glink'><img src='http://jcdsboston.localweb.com/dev/wp-content/plugins/wordpress-navigation-list-plugin-navt/images/blank.gif' alt='' class='home-img  topnav-home'/><span style='margin-left:-5000px;'>Home</span></a></div></li>
    </ul>        
    <!--/NAVT-->
 
 
    <!-- NAVT v1.0.34 -->    
    <ul class='menu about-jcds firefox v3-5-3 en-US'>
        <li class='erow about-jcds_item current_page_item item_parent about-jcds-page pagetab'><div class='navt_gl'><a href='http://jcdsboston.localweb.com/dev/about-jcds/' title='About JCDS' class='navt_glink current_item'><img src='http://jcdsboston.localweb.com/dev/wp-content/plugins/wordpress-navigation-list-plugin-navt/images/blank.gif' alt='' class='about-jcds-img  topnav-about'/><span style='margin-left:-5000px;'>About JCDS</span></a></div>
        <ul class='about-jcds about-jcds-sublevel-1'>
            <li class='orow about-jcds_item page_item our-mission-page pagetab'><a href='http://jcdsboston.localweb.com/dev/about-jcds/our-mission/' title='Our Mission' class='navt_plink'>Our Mission</a></li>
 
            <li class='erow about-jcds_item page_item leadership-page pagetab'><a href='http://jcdsboston.localweb.com/dev/about-jcds/leadership/' title='Leadership' class='navt_plink'>Leadership</a></li>
            <li class='orow about-jcds_item page_item accreditations-page pagetab'><a href='http://jcdsboston.localweb.com/dev/about-jcds/accreditations/' title='Accreditations' class='navt_plink'>Accreditations</a></li>
            <li class='erow about-jcds_item page_item location-and-directions-page pagetab'><a href='http://jcdsboston.localweb.com/dev/about-jcds/location-and-directions/' title='Location and directions' class='navt_plink'>Location and directions</a></li>
        </ul>
        </li>
    </ul>        
    <!--/NAVT-->
 
    <!-- NAVT v1.0.34 -->    
    <ul class='menu academics firefox v3-5-3 en-US'>
        <li class='erow academics_item page_item item_parent academics-page pagetab'><div class='navt_gl'><a href='http://jcdsboston.localweb.com/dev/academics/' title='Academics' class='navt_glink'><img src='http://jcdsboston.localweb.com/dev/wp-content/plugins/wordpress-navigation-list-plugin-navt/images/blank.gif' alt='' class='academics-img  topnav-academics'/><span style='margin-left:-5000px;'>Academics</span></a></div>
        <ul class='academics academics-sublevel-1'>
            <li class='orow academics_item page_item lower-school-page pagetab'><a href='http://jcdsboston.localweb.com/dev/academics/lower-school/' title='Lower School' class='navt_plink'>Lower School</a></li>
            <li class='erow academics_item page_item middle-school-page pagetab'><a href='http://jcdsboston.localweb.com/dev/academics/middle-school/' title='Middle School' class='navt_plink'>Middle School</a></li>
            <li class='orow academics_item page_item support-services-page pagetab'><a href='http://jcdsboston.localweb.com/dev/academics/support-services/' title='Support services' class='navt_plink'>Support services</a></li>
 
            <li class='erow academics_item page_item after-school-program-page pagetab'><a href='http://jcdsboston.localweb.com/dev/academics/after-school-program/' title='After school program' class='navt_plink'>After school program</a></li>
        </ul>
        </li>
    </ul>        
    <!--/NAVT-->
 
 
</li>
    </ul></div>
    <div style="clear: both;"></div>
 
 
</body>
</html>

and here is the CSS (I tried to strip out whatever wasn't relevant -- hopefully I didn't take out too much!):

body {
	margin: 0px;
	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
	font-size: 13px;
	color: #4f2b0d;
	}
 
#outer_container {
	margin: 0px auto;
	width: 1002px;
	}
 
a:link {
	color: #666c22;
	text-decoration: underline;
	}
 
a:visited {
	color: #666666;
	text-decoration: none;
	}
 
a:hover {
	color: #666c22;
	text-decoration: none;
	}
 
a:active {
	color: #999c22;
	text-decoration: none;
	}
 
/* NAVT */
ul#topmenu {
	margin: 0px;
	padding: 0px;
	list-style: none;
	list-style-type: none;
	}
 
li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	list-style-type: none;
	}
 
 
ul.home {
	margin: 0px;
	padding: 0px;
	list-style: none;
	list-style-type: none;
	float: left;
	width: 126px;
	}
 
ul.about-jcds {
	margin: 0px;
	padding: 0px;
	list-style: none;
	list-style-type: none;
	float: left;
	width: 125px;
	}
 
ul.about-jcds.about-jcds-sublevel-1 {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 1px 0 0 0;
	padding: 0px;
	min-height: 1%;
}
 
ul.about-jcds:hover ul {
	left: auto;
	}
 
li.orow.about-jcds_item.current_page_item, li.orow.about-jcds_item.page_item, li.erow.about-jcds_item.current_page_item, li.erow.about-jcds_item.page_item {
	width: 160px;
	background-color: #d4d98a;
	border-bottom: 1px solid #999258;
	}
 
ul.academics {
	margin: 0px;
	padding: 0px;
	list-style: none;
	list-style-type: none;
	float: left;
	width: 125px;
	}
 
ul.academics.academics-sublevel-1 {
	z-index: 9998;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 1px 0 0 0;
	padding: 0px;
	min-height: 1%;
	}
 
ul.academics:hover ul {
	left: auto;
	}
 
li.orow.academics_item.current_page_item, li.orow.academics_item.page_item, li.erow.academics_item.current_page_item, li.erow.academics_item.page_item {
	width: 160px;
	background-color: #d4d98a;
	border-bottom: 1px solid #999258;
	}
 
a.navt_plink {
	display: block;
	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
	font-size: 13px;
	color: #653915;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	padding: 4px 6px 4px 12px;
	line-height: 15px;
	}
 
a.navt_plink:hover, a.navt_plink:active {
	display: block;
	font-family: Tahoma, Arial, Helvetica, Verdana, sans-serif;
	font-size: 13px;
	color: #653915;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	background-color: #bbb582;
	}
 
.navt_gl {
	display: block;
	height: 41px;
	}
 
img {
	border: 0px;
	}
 
.topnav-home {
	background-image: url('images/nav/nav_home.gif');
	width: 126px;
	height: 42px;
	background-color: #b3ba66;
	background-repeat: no-repeat;
	border: 0px;
	top: 0px;
	left: 0px;
	}
 
a.navt_glink:hover img.topnav-home {
	background-image: url('images/nav/nav_home_on.gif');
	}
 
.topnav-about {
	background-image: url('images/nav/nav_about.gif');
	width: 125px;
	height: 42px;
	background-color: #b3ba66;
	background-repeat: no-repeat;
	border: 0px;
	top: 0px;
	left: 0px;
	}
 
a.navt_glink:hover img.topnav-about {
	background-image: url('images/nav/nav_about_on.gif');
	}
 
.topnav-academics {
	background: url('images/nav/nav_academics.gif');
	width: 125px;
	height: 42px;
	background-color: #b3ba66;
	background-repeat: no-repeat;
	border: 0px;
	top: 0px;
	left: 0px;
	}	
 
a.navt_glink:hover img.topnav-academics {
	background-image: url('images/nav/nav_academics_on.gif');
	}

Thanks in advance for any help!

Laura S.

AttachmentSize
jcds-ie7a.png8.33 KB
lauras2008
lauras2008's picture
Offline
newbie
Last seen: 8 years 43 weeks ago
Timezone: GMT-4
Joined: 2008-12-17
Posts: 2
Points: 2

answer found!

and here it is: I needed to add a float:left to the #topmenu li.

Was:
li {
margin: 0px;
padding: 0px;
list-style: none;
list-style-type: none;
}

Is now:
#topmenu li {
margin: 0px;
padding: 0px;
list-style: none;
list-style-type: none;
float: left;
}
}

Phew!!

Laura S.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 40 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Glad you found an answer. I

Glad you found an answer.

I would assume, looking at your code, that folks suggested Suckerfish at least partially because you have a lot, lot, lot of extra, unnecessary code... and suckerfishes are simple to write and read.

Though your spaces were likely an IE whitespace bug due to the li's not have Haslayout. Floating things is one way to give them haslayout. If this was the reason, the spaces would have also disappeared if you had given the li's a height or a width or some other Haslayout-setting property.

I say this because you may see this in a regular non-dropdown menu some day and maybe it's a menu you don't want to float the li's in.

I'm no expert, but I fake one on teh Internets