CSS - Dropdowns Not Showing Up In Ie8

The infamous z-index/select problem in ie6 has become a pain for me now. I have read countless articles and yet to find an understandable and stillworking example of how to get around this.

Apprently there is an iframe method which seems to do the trick, however all sample code that is provided never works.

IE 6 only problem:

I have a list (like a good programmer) for my navigation that generates a drop down via css and some js. Selects stay above it regardless of z-index. I have countless selects scattered throughout my site.

Can someone give me a WORKING example of how to get around this...i don't want to go down the road of hidding all the selects.

Hello everyone,

Thanks in advance for any help you can offer.

I have a single page for a site I'm creating located he

simplethoughts.com/test/index.html

The css file for the page is located he

simplethoughts.com/test/css/screen.css

The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why.

Thanks again for any help...it's extremely appreciated!

-Neil

We've implemented a slightly modified form of suckerfish dropdowns...apparently I can't post links, but it's at jlfurnishings.com

Here's the markup and javascript:

Code:

<ul id="nav-bar" class="nav-bar">
	<li><a href="/jlf/pages/facility" >Facility</a></li>
	<li><a href="#" >About Us</a>				
		<ul>
			<li><a href="/jlf/pages/aboutjlf" >JLF</a></li>
			<li><a href="/jlf/pages/aboutlm" >Lone Meadow</a></li>
		</ul>
	</li>
	<li><a href="/jlf/pages/designerresources" > Designer Resources</a></li>
	<li><a href="#" >Projects / Clients</a>								<ul>
			<li><a href="/jlf/pages/hotels" >Hotels</a></li>
			<li><a href="/jlf/pages/restaurants" >Restaurants</a></li>

		</ul>
	</li>
	<li><a href="/jlf/pages/links" >Links</a></li>
	<li><a href="/jlf/pages/newsevents" >News / Events</a></li>
	<li><a href="/jlf/pages/calendar" >Calendar</a></li>
	<li class="nav-bar-white">			
		<a href="/jlf/pages/contactus"><font style="color:#2E350A;">Contact Us</font></a>
	</li>
</ul><!--end nav-bar -->


<script type="text/javascript"><!--//--><![CDATA[//><!--

	sfHover = function() {
		var sfEls = document.getElementById("nav-bar").getElementsByTagName("LI");
		if (!sfEls) sfEls = document.getElementById("nav-bar-products").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);

//--><!]]></script>

Here's the CSS:
Code:

#nav-bar {
	position:relative;
	float:left;
	width:595px;
	height:25px;
	
	text-align:left;
	padding-left:6px;
	margin-left:30px;
	line-height:25px;
	
}

.nav-bar {
	position:relative;
	float:left;
	width:595px;
	height:25px;
	background:url(../img/content-nav-bg.jpg) #FFF no-repeat;
	text-align:left;
	padding:0px;
	margin:0px;
	padding-left:6px;
	margin-left:30px;
	line-height:25px;
	color:#FFF;

}

.nav-bar li {
	position:relative;
	list-style:none;
	display:inline;
	margin:0px;
	margin-left:-4px;
	padding:0px;
}

.nav-bar a {
	color:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:0px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	border-right:solid 1px #FFF;
	margin:0px;
	margin-left:-4px;
	
}

.nav-bar a:hover {
	position:relative;
	color:#2E350A;
	background:#FFF;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

.nav-bar li.nav-bar-highlight {
	position:relative;
	color:#FFF;
	background:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

.nav-bar li.nav-bar-highlight a {
	position:relative;
	color:#2E350A;
	background:#FFFFFF;
	font-size:11px;
	font-weight:normal;
	padding:7px;
	padding-left:12px;
	padding-right:8px;
	margin:0px;
	margin-left:-4px;
}

/** this is for the "contact us" item that has a white background **/
.nav-bar-white {
	background:#FFFFFF;
}

.nav-bar li ul, .nav-bar-products li ul { /* second-level lists */
	position: absolute;
	background: #E1E1E1;
	z-index:9;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

.nav-bar li ul li, .nav-bar-products li ul li {
	border:0px;
	float:left;
	clear:left;
	margin-left:5px;
	z-index:900;
}

.nav-bar li ul li a, .nav-bar-products li ul li a {
	color:#4C4C4C;
	border:0px;
	width: 10em;
}

#nav-bar li:hover ul, #nav-bar li.sfhover ul, #nav-bar-products li:hover ul, #nav-bar-products li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	left:-20px;
	top:10px;
	z-index:900;
	width: 10em;
}

They work fine in Firefox (for the most part...feels a little unstable), but in IE6 (and 7, I believe), the dropdowns are all jacked. Can anyone shed any light on this? I've played with it, but I'm not making any progress. My client is freaking out because this is overdue and my css guy is MIA and I'm about to rip my hair out. Any insight at all would be welcome...

(URL address blocked: See forum rules)

(dropdowns for 'About Us' and 'Projects / Clients')

On a sidenote: how do you guys do this? I'm a PHP developer and CSS is like black magic to me :-) I can usually get things working fine in non-IE browsers, but then I pull up the site in IE and I'm completely mystified. Kudos to you all...

I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh?

Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery).

Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu

I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated!

You can find the sample at:
http://www.myztacia.com/animated-menu2.html
I figured it was easier to post the link than force you to create the webpage yourself

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa.

For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item).

So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell?

I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths:
http://webdesignerwall.com/tutorials/css3-dropdown-menu

Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page.
I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets.

I've tried adjusting z-index in each li, ul.
I'm still really new at this, so I'd appreciate any help and specific guidance you can offer.

Website: crossfit-hr.com

CSS code (source from CSS MENU MAKER):
.menu{
width:945px;
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
font-color:#FF0000;
z-index:200;
}
.menu ul{
background:url(removed for thread) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
z-index:200;
}
.menu li a{
color:#000000;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#FF0000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:150px;
z-index:10000;
/*top:.5em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:150px;
z-index:200;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 8px 0px 8px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#FF0000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
z-index:200;
}
.menu #current{
background:url(removed for thread) top left repeat-x;
color:#FFFFFF;
}
=========================

HTML code for Widget:
<div class="menu">
<ul>
<li><a id="current" href="(removed for thread)" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Methods & Results</a>
<ul>
<li><a href="(removed for thread)" target="_self">Our Methods</a></li>
<li><a href="(removed for thread)" target="_self">See the Results</a></li>
</ul>
</li>
<li><a href="" target="_self" >How to Start</a>
<ul>
<li><a href="(removed for thread)" target="_self">Starting Options</a></li>
<li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li>
</ul>
</li>
<li><a href="" target="_self" >Schedule & Prices</a>
<ul>
<li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li>
<li><a href="(removed for thread)" target="_self">Prices</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Coaches</a>
</li>
<li><a href="" target="_self" >Admin & Media</a>
<ul>
<li><a href="(removed for thread)" target="_self">Online Payments</a></li>
<li><a href="(removed for thread)=0" target="_self">Release Form</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Photos</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Videos</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Contact</a>
</li>
</ul>
</div>

===================

Hi,

I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6.

Here is the link: http://www.caillouette.com/NewCatsMeow/

I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy.

Here's the iframe code in the index page: Code:

<div id="bodyInfo"> 
<iframe name="mainBody" width="770" height="602" src ="body.html"  scrollbars="NO" border="0"> </iframe> 
<!-- end #bodyInfo --></div> 

Hi, I have a site that works fine on most computers, but the homepage needs to be refreshed in IE6 and 7. Unless you type in "index.php" after the domain name, you have to refresh the page to see all the content.

I have the correct doctype, and I believe my code is clean. I posted about this weeks ago, resolved the problem, now the site is having similar issues.

Here is the site:: http://www.catskaraoke.com

Any advicde or suggestions are greatly appreciated.


thanks
-

Thanks for taking the time to read my question.

I have an <ol> that shows up in FF but not IE7. I have no idea why. I've tried a bunch of different things in my css but none of them work.

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" /> 
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>

<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><img class="Banner" src="Images/ChampBanner.jpg" /></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<p class="COC1">Two Nations Female Hockey League dedicates itself to the advancement of female hockey for all individuals through progressive leadership by ensuring meaningful opportunities and enjoyable experiences in a safe sportsmanlike environment. </p>
<p class="COC">Two Nations Female Hockey League has adopted this "Code of Conduct" in which all members are expected to follow. The intent of this <strong>"Code of Conduct"</strong> is to maintain a fun, competitive respectful experience for all who attend any function of this league.</p>
<p class="COC">Two Nation Female Hockey League "Code of Conduct" simply places an emphasis on respect:<br />
<strong>Respect</strong> the game.<br />
<strong>Respect</strong> the rules.<br />
<strong>Respect</strong> the opponents.<br />
<strong>Respect</strong> the Coaches, Officials, Parents, Executives, Players, Arena Staff, Volunteers and their decisions.<br />
<strong>Respect</strong> the facility.<br /></p>
<p class="COC"><strong>Maintain self-control at all times.</strong> In order to reduce the number of abusive and harassing incidents in hockey, we all have a monumental responsibility to model pro-social behaviors. We are role models for our children and youth, therefore it is vital we act accordingly.</p>
<p class="COC">As such, any excessive profanity, harassment, bullying, or aggression directed at a game official, executive member, team official, parent, child, arena staff, or volunteer will not be tolerated and appropriate disciplinary action will be result from these actions.</p>
<p class="COC">Appropriate disciplinary action is outlined in the Two Nations Female Hockey League Policies and Procedures, and follows a strict set of rules and guidelines to ensure confidentiality, neutrality and fairness.</p>
<p class="COCTitle">Code Of Conduct</p>
<p class="COC">All members of the League and all invitees, including spectators, shall abide by the following code of conduct. Failure to do so may result in disciplinary measures, including suspension and/or expulsion.</p>
<ol class="COCOL">
	<li class="COCLI">Win or lose, players shall congratulate their team-mates and coaches as well as the players and coaches of the opposing team in a genuine and positive manner. Derogatory comments are absolutely forbidden.</li>
	<li class="COCLI">The referees are in charge of the game. Only the captains and alternate captains of the team shall address the referees and then shall do so only in a civil tone. Use of foul or abusive language is absolutely prohibited. While explanations of a referee's call may be legitimately sought, questioning the referee's judgment is forbidden. Accept the call and get on with the game.</li>
	<li class="COCLI">Spectators shall provide only a positive encouragement for the players, coaches, and referees. Derogatory comments aimed at any player, coach, or referee from a spectator shall be addressed with a strong warning on the first offence at any game. Upon the commission of a second offence by the same spectator, that spectator shall be removed form the Arena and forbidden re-entrance during the game and spectator's identity shall be properly noted. Should any spectator be removed from any two games, that spectator's removal shall be accompanied by a (one-month) ban from attendance at any games held by the league. Upon a third offence, that spectator shall be banned for the balance of the season. </li>
	<li class="COCLI">The coaching staff shall lead by example and shall adhere in all respects to this code of conduct. In addition, coaching staff shall address their own players the referees and the coaching staff of the other team only in a civilized and respectful tone. Coaching staff of the team may not address the players of the opposing team except to provide positive encouragement or congratulations. Discouraging or humiliating remarks, gestures or other communications to players, referees and the opposing team shall be absolutely forbidden. In addition, coaching staff shall at all times, both in practices and games, treat their own players with respect and dignity. Humiliation, belittlement and embarrassment through words, actions or conduct are inappropriate forms of punishment and ineffective instructional methods and shall be absolutely prohibited. </li>
	<li class="COCLI">Play hard but play fair. Hockey by its nature is a physically tough game; it shall be played with maximum effort in a sportsmanlike manner within the rules from time to time endorsed by the Two Nations Female Hockey League. Players shall not set out to intentionally maim or injure another player and the coaching staff, by their actions, words, conduct or inaction, shall not encourage or endorse such behavior.</li>
	<li class="COCLI">Last in the spirit of this league get to know the players, families and coaches involved with all eight teams.  This is an elite group of players who love the game and seek to play at a higher level.  Reach out and welcome each other and help all enjoy and benefit from the experience of the competition and travel.  Hockey is a small world and an opportunity for all of us to help our kids prepare for the game of life.</li>
</ol>
</div>
<div class="BottomNavDiv">
	<div class="BottomNavDivCont">
		<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
	</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.LogoDiv {
background-image:url("Images/WOMENSHOCKEY CHOICE 1Small.jpg");
background-repeat: no-repeat;
background-position: top left;
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}

img.Banner {
float: right;
}

.NavDiv {
background-image: url(Images/N2NavBar.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}

.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}

.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}

.TNFHLTW{
width: 281px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeek.jpg);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}

.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.COCLI {
margin-top: 10px;
}

.COCOL {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 650px;
float: left;
}

.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}

p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -9px 0px 0px 0px;
}

.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}

.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}

/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/

.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}

.BottomNavLink {
font-size: 10px;
color: #ff0000;
}

a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}

p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}

Thanks,

Brad

Hey all i am trying to figure out why my search box results shows up just fine in IE, Safari but not FF or Chrome.

Here is my code for the search box:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//********************************************
// Search Function
//********************************************
var count = 0;

function set2Show()
{
	//document.getElementById("productLine_wrap").style.visibility = "visible";
	//document.getElementById("contactInner").style.visibility = "visible";	
	$('#suggestions').fadeOut();
}

function delayType(theValue)
{
	count = count + 1;
	$('#suggestions').fadeOut();
	setTimeout("searchGo(" + count + ",'" + theValue + "')", 1000);
}

function searchGo(currCount, currValue){
	if(currCount == count){
		count = 0;
		lookup(currValue);
	}
} 

google.setOnLoadCallback(function()
{
	 $("input").blur(function(){
	 	$('#suggestions').fadeOut();
		//document.getElementById("productLine_wrap").style.visibility = "visible";
		//document.getElementById("contactInner").style.visibility = "visible";
	 });
});

function lookup(inputString) {
	if(inputString.length == 0) {
		$('#suggestions').fadeOut();
		//document.getElementById("productLine_wrap").style.visibility = "visible";
		//document.getElementById("contactInner").style.visibility = "visible";
	} else {
		$("#loading").bind("ajaxSend", function(){
			$(this).show();
			document.getElementById("inputString").disabled = true;
			$('#inputString').fadeTo("fast", 0.5);
		}).bind("ajaxComplete", function(){
			$(this).hide();
			document.getElementById("inputString").disabled = false;
			$('#inputString').fadeTo("fast", 1);
		});
		
		$.post("fetchSearch.asp", {queryString: ""+inputString+""}, function(data) {
			$('#suggestions').fadeIn();
			$('#suggestions').html(data);
			//document.getElementById("productLine_wrap").style.visibility = "hidden";
			//document.getElementById("contactInner").style.visibility = "hidden";
		});
	}
}
</script>
<style type="text/css">
/* COMMON CLASSES */
.break { clear:both; }
a img { border:0 }

/* SEARCHRESULTS */
#searchresults {border: 1px #000 solid; width:250px; background-color:#FC6; font-size:10px; line-height:14px; text-align:left; z-index: 99;}
#searchresults a { display:block; background-color: #FFE2C6; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color: #FFF;}
#searchresults a img { float:left; padding:3px 4px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:1px; color:#000; border-top: 1px dotted #000;  }
#searchresults a:hover span.searchheading { color:#000; }
#searchresults a span { color:#000; }
#searchresults a:hover span { color:#000; }
#searchresults span.category { font-size:11px; margin:5px; width:250; color:#000; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;}
#searchresults span.seperator a { background-color:transparent; display:block; margin:1px; height:5px; color:#000; }

#loading {position:absolute;width:16px;height:11px;z-index:3;left: 70px;top: 7px;display: none;	z-index: 1000;}

#suggestions {position:absolute;width:16px;	height:11px;z-index:60;left: -72px;top: 23px;}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<body onfocus="set2Show();">
<div id="searchBox" align="center">
<div id="loading"><img src="ajax-loader.gif" alt="" width="16" height="11" align="left" /></div>
	<ul id="searchForm">
		<li><span class="fieldbox">
        	<input type="text" name="inputString" maxlength="27" id="inputString" value="" onmousedown="set2Show();" onkeyup="delayType(this.value);" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;font-weight:bold; vertical-align: text-top; text-transform:lowercase;"/>
        </span></li>
    </ul>
    <div id="suggestions"></div>
</div>
</body>
</html>

I can not seem to find out why it doesnt want to display in FF or Chrome... Any help would be great!

David

Hi,

I have tested on various browsers and platforms. Unfortunately, my div does not appear in IE7.

Here's the <div> code:: Code:

<div id="mardiGras"> <a onclick="updateWithParty()" href="#"><img src="images/nav/MardiGras.gif" border="0"></a> </div>

Here's the style sheet for the mardiGras <div>
Code:

#mardiGras{
position:absolute;
z-index:999;
top:331px;
width:260px;
height:221px;
background-image:url(http://www.catskaraoke.com/images/nav/MardiGras.png);
display:block;
}

I tried to use a gif instead of a png, but that didn't work.
Can anyone tell me what I'm doing wrong?

thanks

I'm trying to get my navigation to work, but I can't get it to work in IE. Works great in all other browsers.

Look at this in firefox, chrome, safari:

0000qx5.previewcoxhosting.com/resources.php

When you mouseover "resources" or "about us", a sub navigation bar appears. But not in IE 7 or 8.

Does anyone have suggestions?

I have a div that is positioned absolute at 88px from the top. In both IE6 and IE7 this comes out decently. However, in FF the div is being put at the top of the page. You can take a look at this he

www.dvolve[REMOVE].org/ktt/

Any pointers on what's going on here?

-DeV