Horizontal Navbar not working in IE.

Neurologique · 12th February 12, 08:53 PM

I realize there was another thread going on simultaneously pertaining to this, but please bare with me. I think my problem is quite different (plus there didn't seem to be enough information presented by the previous poster to really resolve the issue.)

I have a site I'm working on that includes a horizontal navigation bar with a drop-down menu. This nav bar works just fine in Firefox and Google Chrome - but when I try to open it in Internet Explorer, it shows up as a vertical bar and does NOT have its drop-down function. I cannot for the life of me figure out -why- this doesn't work.

I am still fairly new to CSS in particular. So I'm sorry if this is just basic ignorance.. Heh. But I've done several searches and can't seem to find the problem.

Here is my CSS for the navbar:

Code:

#navstrip {
					position: relative;
					top: 380px;
					margin: auto;
					}
					
#navstrip li {
	list-style: none;
	float: left;
		padding-left: 15px;
}

#navstrip li a {
	font-family: arial, sans-serif;
	font-size: 90%;
	letter-spacing: 2px;
	display: block;
	padding: 3px 8px;
	color:#5B6A6D;
	background-color: #ffffff;
	height: 25px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

#navstrip li a:hover {
	font-size: 95%;
}

#navstrip li ul {
	display: none;
	width: 20em;
}

#navstrip li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
}

#navstrip li:hover li {
	float: none;
}

#navstrip li:hover li a {
	background-color: #ffffff;
	border-bottom: 1px dashed #898556;
	color: #595A5B;
	body-weight: none;
}

#navstrip li li a:hover {
	background-color: #F2F2E8;
	color: #183B42;
}

And the accompanying HTML:

Code:

<div id="header">
<ul id="navstrip">
<li><a href="Index.html">Home</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="location.html">Hotel & Location</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Volunteering</a></li>
</ul>
</li>
<li><a href="#">The Con</a>
<ul>
<li><a href="#">Guests</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contests</a></li>
</ul>
</li>
<li><a href="#">Vendors & Artists</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

And here's my header with doctype/meta/etc...

Code:

<!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" lang="en" xml:lang=
"en">
<head>
<title>Encounters Convention!</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<link type="text/css" rel="stylesheet" href="style2.css" media=
"screen" />
</head>

Any help would be much appreciated!

chrishirst · 13th February 12, 08:41 AM

A URL please to where the problem can be seen in situ:

Oh and by the way, it's bear with me, "bare with me" would involve mutual nakedness

Neurologique · 15th February 12, 07:09 PM

Sorry for the delay!

I uploaded the site to my test server, and it can be seen here:
www.neurologiquedesign.com

I'm also having issues with positioning in general it seems. (Looked at it on different resolutions and found lots of issues), and could use some tips there if anyone's got em. I need to figure out how to set it so the sidebars remain -beside- the main body div no matter what, and will either shrink to fit the browser/resolution or force them to sidescroll if nothing else. (Between the two: I'd much rather force a side-scroll than have this weird over-lap thing I'm dealing with now.)

As for the mutual nekkedness.... Maybe that's where I was going with it! Hah. ~_^

chrishirst · 15th February 12, 09:01 PM

Absolute postioning is THE worst possible thing you could use, get rid of it.

http://welovecss.com/showpost.php?p=31931&postcount=5

http://webmaster-talk.eu/component/k...ot-to?Itemid=0

Forget positioning completely, learn floats and margins NOT positioning.

13th February 12, 08:41 AM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Horizontal Navbar not working in IE. A URL please to where the problem can be seen in situ: Oh and by the way, it's bear with me, "bare with me" would involve mutual nakedness

15th February 12, 07:09 PM	#3
Neurologique WLC Member Join Date: Feb 2012 Posts: 2	Re: Horizontal Navbar not working in IE. Sorry for the delay! I uploaded the site to my test server, and it can be seen here: www.neurologiquedesign.com I'm also having issues with positioning in general it seems. (Looked at it on different resolutions and found lots of issues), and could use some tips there if anyone's got em. I need to figure out how to set it so the sidebars remain -beside- the main body div no matter what, and will either shrink to fit the browser/resolution or force them to sidescroll if nothing else. (Between the two: I'd much rather force a side-scroll than have this weird over-lap thing I'm dealing with now.) As for the mutual nekkedness.... Maybe that's where I was going with it! Hah. ~_^

15th February 12, 09:01 PM	#4
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Horizontal Navbar not working in IE. Absolute postioning is THE worst possible thing you could use, get rid of it. http://welovecss.com/showpost.php?p=31931&postcount=5 http://webmaster-talk.eu/component/k...ot-to?Itemid=0 Forget positioning completely, learn floats and margins NOT positioning.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode