Navigation in the wrong place

[BigAl75]

I took the suggestion and looked at a couple of sites online to change from javascript navigation to CSS navigation. Now I'm running into a new problem, and was wondering if you could help. When you roll-over my nav, the menu that pop-ups out in the wrong location on some screen resolutions. What can I do to fix this?http://www.ny-outdoors.com/tester/index.htmlHere's the CSS:

#navmenu {	width: 135px;	position: static;	font: 12px Arial, Helvetica, sans-serif;	margin: 0px 0px 0px 0px;}#navmenu a {	width: 135px;	height: auto;	padding-left: 2px;	border: 1px solid #000;	background: #003366;	line-height: 20px;	font-size: 12px;	color: White;}#navmenu ul {	padding: 0px;	margin: 0px;}#navmenu ul li {	list-style-type: none;}#navmenu ul li a:visited {	display: block;	text-decoration: none;	color: #EEEEEE;}#navmenu ul li a {	display: block;	text-decoration: none;	color: #FFFFFF;}#navmenu ul li a:hover {	background: Yellow;	color: Black;}#navmenu li ul {	display: none;} #navmenu li:hover > ul#a3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#a3b {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}

Here's the html:

<div id="navmenu">				<div class="navhead">Navigation</div>						<ul>							<!-- Home Navigation -->							<li><a href="index.html">Home</a></li>							<!-- End Home Nav -->							<!-- Begin About Us Nav -->							<li><a href="#nogo">About Us</a>								<ul id="a3">								<li><a href="about/index.html">About the Website</a></li>								<li><a href="about/staff.html">About the Staff</a></li>								</ul>							</li>							<!-- End About US Nav -->							<!-- Begin Interact Nav -->							<li><a href="#nogo">Interact With Us</a>								<ul id="a3">									<li><a href="forums/">Forums</a></li>									<li><a href="gallery/">Photo Gallery</a></li>								</ul>							</li>							<!-- End Interact Nav -->							<!-- Begin Attractions Nav -->							<li><a href="attractions/index.html">Local Attractions</a>								<ul id="a3">									<li><a href="attractions/automotive.html">Automotive</a></li>									<li><a href="attractions/theater.html">Theater & Plays</a></li>									<li><a href="attractions/food_beverage.html">Food & Beverages</a></li>								</ul>							</li>							<!-- End Attractions Nav -->							<!-- Begin Events Nav -->							<li><a href="events/index.html">Events</a>								<ul id="a3">									<li><a href="events/fund_raisers.html">Fund Raisers</a></li>									<li><a href="events/community/index.html">Community Events</a>										<ul id="a3b">											<li><a href="events/community/mara_maple.html">Marathon Maple Festival</a></li>										</ul>									</li>									<li><a href="events/sports.html">Sports</a>										<ul id="a3b">											<li><a href="events/sports/baseball.html">Baseball</a></li>											<li><a href="events/sports/hockey.html">Hockey</a></li>											<li><a href="events/sports/golf.html">Golf</a></li>											<li><a href="events/sports/other.html">Other Sports</a></li>										</ul>									</li>								</ul>							</li>							<!-- End Events Nav -->							<!-- Begin Concerts Nav -->							<li><a href="#nogo">Concerts & Gatherings</a>								<ul id="a3">								<li><a href="shows/concerts.html">Concerts</a></li>								<li><a href="shows/gatherings.html">Gatherings & Get Togethers</a></li>								</ul>							</li>							<!-- End Concerts Nav -->							<!-- Begin Music Nav -->							<li><a href="localmusic/index.html">Local Music</a>								<ul id="a3">									<li><a href="music/events.html">Music Events</a></li>									<li><a href="music/rock.html">Rock/Metal</a></li>									<li><a href="music/country.html">Country</a></li>									<li><a href="music/classic.html">Classic Rock</a></li>									<li><a href="music/other.html">Other Genres</a></li>								</ul>							</li>							<!-- End Music Nav -->							<!-- Begin Contact Us Nav -->							<li><a href="#nogo">Contact Us</a>								<ul id="a3">								<li><a href="contact/index.html">Contact Us</a></li>								<li><a href="contact/submit.html">Submit Stuff</a></li>								</ul>							</li>							<!-- End Contact Us Nav -->						</ul>				</div>

[jlhaslip]

Couple of things here.firstly, there are Id's being duplicated in the code. classes can be repeated on a page, but not named Id's.secondly, the Ul/li/a's have a sequence for the Css code to be specified, which when they are not in the correct order might affect how they act. LoV HA... like Lover with a southern drawl ... Link, Visited, Hover, Active. There is a focus in there too, but it is rarely used...So have a go at fixing these problems and then post back when you are ready to proceed. Fixing these might take care of the problems. Never know.*edit*and now for the bad news. try that menu in IE6 and it doesn't work at any resolution...http://www.w3schools.com/css/css_pseudo_classes.asp

[iyeru42]

The menus (Both) look fine at 1024x768 to me.

[jlhaslip]

The menus (Both) look fine at 1024x768 to me.

Checking it at 800 wide and 1280 wide produces different results on the fly-outs. Sometimes they fly-out all the way right, othertimes they partially cover the originally hovered item and don't move right all the way.

[BigAl75]

Checking it at 800 wide and 1280 wide produces different results on the fly-outs. Sometimes they fly-out all the way right, othertimes they partially cover the originally hovered item and don't move right all the way.

Yeah, that's why I'm here asking for help.

and now for the bad news. try that menu in IE6 and it doesn't work at any resolution...

Yeah, I know. I'm not unveiling the site until late this summer, so I have time to get something done up in javascript for IE 6.0 using IE conditional statements. Not sure if I'm going to try and have the js nav on the same page, or redirect it to a sub-directory.Thanks.

[BigAl75]

OK, I think I get what jlhaslip is talking about with he 'id' thing, but as far as getting the LVAH in order, I guess it's just not clicking right now (half asleep).CSS:

#navmenu {	width: 135px;	position: static;	font: 12px Arial, Helvetica, sans-serif;	margin: 0px 0px 0px 0px;}#navmenu a {	width: 135px;	height: auto;	padding-left: 2px;	border: 1px solid #000;	background: #003366;	line-height: 20px;	font-size: 12px;	color: White;}#navmenu ul {	padding: 0px;	margin: 0px;}#navmenu ul li {	list-style-type: none;}#navmenu ul li a:visited {	display: block;	text-decoration: none;	color: #EEEEEE;}#navmenu ul li a {	display: block;	text-decoration: none;	color: #FFFFFF;}#navmenu ul li a:hover {	background: Yellow;	color: Black;}#navmenu li ul {	display: none;} #navmenu li:hover > ul#a3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#b3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#c3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#d3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#e3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#f3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#g3 {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#a3a {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}#navmenu li:hover > ul#a3b {	display: block;	position: absolute;	margin-top: -22px;	left: 135px;	text-align: left;}

HTML:

<div id="navmenu">				<div class="navhead">Navigation</div>						<ul>							<!-- Home Navigation -->							<li><a href="index.html">Home</a></li>							<!-- End Home Nav -->							<!-- Begin About Us Nav -->							<li><a href="#nogo">About Us</a>								<ul id="a3">								<li><a href="about/index.html">About the Website</a></li>								<li><a href="about/staff.html">About the Staff</a></li>								</ul>							</li>							<!-- End About US Nav -->							<!-- Begin Interact Nav -->							<li><a href="#nogo">Interact With Us</a>								<ul id="b3">									<li><a href="forums/">Forums</a></li>									<li><a href="gallery/">Photo Gallery</a></li>								</ul>							</li>							<!-- End Interact Nav -->							<!-- Begin Attractions Nav -->							<li><a href="attractions/index.html">Local Attractions</a>								<ul id="c3">									<li><a href="attractions/automotive.html">Automotive</a></li>									<li><a href="attractions/theater.html">Theater & Plays</a></li>									<li><a href="attractions/food_beverage.html">Food & Beverages</a></li>								</ul>							</li>							<!-- End Attractions Nav -->							<!-- Begin Events Nav -->							<li><a href="events/index.html">Events</a>								<ul id="d3">									<li><a href="events/fund_raisers.html">Fund Raisers</a></li>									<li><a href="events/community/index.html">Community Events</a>										<ul id="a3a">											<li><a href="events/community/mara_maple.html">Marathon Maple Festival</a></li>										</ul>									</li>									<li><a href="events/sports.html">Sports</a>										<ul id="a3b">											<li><a href="events/sports/baseball.html">Baseball</a></li>											<li><a href="events/sports/hockey.html">Hockey</a></li>											<li><a href="events/sports/golf.html">Golf</a></li>											<li><a href="events/sports/other.html">Other Sports</a></li>										</ul>									</li>								</ul>							</li>							<!-- End Events Nav -->							<!-- Begin Concerts Nav -->							<li><a href="#nogo">Concerts & Gatherings</a>								<ul id="e3">								<li><a href="shows/concerts.html">Concerts</a></li>								<li><a href="shows/gatherings.html">Gatherings & Get Togethers</a></li>								</ul>							</li>							<!-- End Concerts Nav -->							<!-- Begin Music Nav -->							<li><a href="localmusic/index.html">Local Music</a>								<ul id="f3">									<li><a href="music/events.html">Music Events</a></li>									<li><a href="music/rock.html">Rock/Metal</a></li>									<li><a href="music/country.html">Country</a></li>									<li><a href="music/classic.html">Classic Rock</a></li>									<li><a href="music/other.html">Other Genres</a></li>								</ul>							</li>							<!-- End Music Nav -->							<!-- Begin Contact Us Nav -->							<li><a href="#nogo">Contact Us</a>								<ul id="g3">								<li><a href="contact/index.html">Contact Us</a></li>								<li><a href="contact/submit.html">Submit Stuff</a></li>								</ul>							</li>							<!-- End Contact Us Nav -->						</ul>				</div>

[iyeru42]

Yeah, that's why I'm here asking for help.Yeah, I know. I'm not unveiling the site until late this summer, so I have time to get something done up in javascript for IE 6.0 using IE conditional statements. Not sure if I'm going to try and have the js nav on the same page, or redirect it to a sub-directory.Thanks.

I was using IE6.

[BigAl75]

I was using IE6.

There's supposed to be a fly-out menu that you won't see in IE 6.0 because it doesn't handle the CSS hover like IE 7.0, FF and Opera do.

[iyeru42]

IE6 handles float attributes properly though (unless float left is invoked on something to be put left of main content, then both IE6 and IE7 won't word wrap to the left floating content unlike FF and Opera.)

[jlhaslip]

http://www.brunildo.org/test/#iefNotice all the tests for IE and IE Floats? Those are all due to not handling Floats properly. If you look carefully, you notice an occasional reference to Mozilla or Opera, but most of the tests on this page are due to IE and its non-standard behaviour.IE floats has its own section, for gawd's sakes. IE does NOT handle floats at all properly.

[BigAl75]

The layout I had wasn't showing up correctly in any browser. I decided to not have a definitive width and just chane the body margins instead. Thanks for the help anyway.