IE7 Navigation problems

I have numerous problems with the navigation on the below site.  I don't know if it is an easy fix for all or if I should itemize them out and list them separately.  I was concerned in listing separately since a suggestion to fix one problem might lead to other problems that I am also trying to fix.

http://nsitedesigns.com/nsitedesigns/siebkens/index.html
http://nsitedesigns.com/nsitedesigns/siebkens/siebkens.css

1. Two toned gray background on nav bar is not full site width on IE 7.  When I increase width to make it work in IE, it extends over margins in all other browsers.

2. Drop down buttons that are longer convert to double width drop down buttons, See dining button drop down Coffee/Ice Cream.

3. The drop downs in IE don't have the same width as the main navigation.  They are only as wide as the letters. All other browsers have the same width on the drop downs as the main nav bar

4. Ideally, I would like the nav bar centered.
/* **************  NAVIGATION  ***************** */

ul#main-nav {
	margin:0;
	float:left;
	width:787px;
	background-image:url(img/back_button.gif);
background-repeat:repeat-x;

}


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:#fff;
	padding:4px 15px 6px;
font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	border-right:1px solid #666;
	}

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

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

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

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

ul#main-nav li ul li a {
	font-size:14px;
text-decoration:none;
background-color:#414a2f;
color:#fff;
margin:0;
height:20px;
text-align:left;
}

ul#main-nav .firstbutton a {
	border-left:none;
	padding-left:8px;
	}

ul#main-nav li.lastbutton a {
	border:none;
	padding-right:8px;}
	
	
ul#main-nav li:hover {background: none repeat scroll 0 0 #414A2F;} /*needed to keep green effect on main nav button when drop downs appear*/

Open in new window

nsitedesignsAsked:
Who is Participating?
 
SSupremeConnect With a Mentor Commented:
1. add height for header ( height: 139px;)
add left padding for main-nav ( padding-left: 40px; )
0
 
Jason C. LevineNo oneCommented:
Hi again, nsitedesigns...

Where did the nav come from?
0
 
nsitedesignsAuthor Commented:
Hi Jason 1178,

I think there was a site that provided the code for free.  I used the skeleton of this nav for other sites and it worked fine.  Just had to tweak it a bit to get to work for this project.  Thought it was fine until I tested it in the dreaded evil 'shall not be named" browser. (IE7).

Did you want me to break up my questions into multiple questions?  It doesn't cost me any more since I have the wonderful yearly plan.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Jason C. LevineNo oneCommented:
No, all of the issues are related to CSS and IE 7's less than compliant handling of it.  I was asking because if we knew the source of the code, it may be easier to Google a fix for it instead of line-by-line troubleshooting.
0
 
nsitedesignsAuthor Commented:
let me see if i can find it....
0
 
nsitedesignsAuthor Commented:
p.s.  I am ok with using a method that you like.  I have tried suckerfish but found that to be a bit difficult to modify.
0
 
nsitedesignsAuthor Commented:
0
 
nsitedesignsAuthor Commented:
thanks
0
 
SSupremeConnect With a Mentor Commented:
2. add to rule "ul#main-nav li a" new property ( white-space:nowrap; )
0
 
SSupremeConnect With a Mentor Commented:
3. Add new border property for ul#main-nav li ul li a ( border: 0 none; )
Add apply background for ul#main-nav li ul ( background-color: #414A2F; )
0
 
SSupremeCommented:
4. I hope it will be sorted.
0
 
nsitedesignsAuthor Commented:
Perfect except for one little thing.  On IE7, the mouseover effect on the drop down buttons isn't the same width on all buttons.  For example, on a shorter button Resort/Events, the light green mouseover ends right after the "s" in Events.  This happens on all shorter buttons on drop downs but only in IE7.  Not terrible but if there is a fix, I would like to implement.  Please advise.
0
 
nsitedesignsAuthor Commented:
0
 
SSupremeConnect With a Mentor Commented:
Well, IE7 specifies width of link as little as possible so you have to specify width for it!
*ul#main-nav li ul li a {min-width:90px;}  <add this to CSS file, it should work only for IE7
0
 
nsitedesignsAuthor Commented:
perfection!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.