navigation gone wild

nsitedesigns
nsitedesigns used Ask the Experts™
on
My programmer is struggling to figure out how to get the navigation to appear when he adds the carousel animation.  For some reason, it goes missing.

Missing navigation with animation
http://nsitedesigns.com/nsitedesigns/miller/index_missingnav.html

Navigation working when placeholder displayed as an image and not navigation
http://nsitedesigns.com/nsitedesigns/miller/index_backupNav.html

Help!  
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Easy task but extremely common:
<div id="main-nav" style="overflow:hidden;">
OR
#main-nav {overflow:hidden;}
Hi,

Your "carousel-divs" are positioned relative and therefore cover your navigation underneath them. You could try adding "top: 100px;" to the style of the divs

Commented:
Actually, your main-nav is 0px height, if you add overflow:hidden; to your CSS  it will get height of content inside.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
where do you see the height set to 0px?  
*ul#main-nav li ul li a {min-width:90px;}   /*needed to manage width of IE7 drop down buttons*/


ul#main-nav {
	margin:0px 0px 10px 170px;
	width:935px;
padding-top:70px;
height:80px;
	position:absolute;
}


ul#main-nav li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	display:inline; /*needed for ie bug*/
}

ul#main-nav li a {
	text-decoration:none;
	display:block;
	color:#333; /*main button text color no activity*/
	padding:4px 15px 6px;
font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	border-right:1px solid #666;
	white-space:nowrap;
	
	}

ul#main-nav li a:hover, ul#main-nav	li a:focus {
	text-decoration:none;
background-color:#14174f;
color:#fff;
	}

	
	
ul#main-nav li ul {
	padding:0;
	margin:0;
	display:none;}

ul#main-nav li:hover ul {/*needed so mouseovers float over main image*/
	display:block;
position:absolute; 
}

ul#main-nav li ul li {float:none;}

ul#main-nav li ul li a { /*drop down menu buttons w/o mouseover*/
	font-size:14px;
text-decoration:none;
background-color:#fff;
color:#000;
margin:0;
height:20px;
text-align:left;
border:0 none;
}




/*THIRD LEVEL BUTTONS*/
ul#main-nav li ul ul {
	margin: -1em 0 0 10em;
}


ul#main-nav li.lastbutton a {
	border:none;
	padding-right:8px;}

Open in new window

Author

Commented:
duh, was looking at an old test page.  sorry

Commented:
It's auto if not set, auto div height is 0px, if there is no content like text.
Add #main-nav {overflow:hidden;} to your css and you will be fine.

Commented:
You won't find "height set to 0px", browser apply it automatically.

Author

Commented:
i have asked my programmer to try all suggestions.  no word yet if he has had any luck.

Commented:
It works for me so should for you. Good luck! it works

Author

Commented:
is this ie7?

Commented:
no, Why would I check IE7, it might have different issues which don't connect with what you asked.

Author

Commented:
Sorry, IE7 is where we are having tons of problems.

Commented:
I suggest you select solution for question you have asked, and ask other new questions, Experts will be happy to help you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial