Solved

IE7 Navigation problems

Posted on 2011-02-17
17
389 Views
Last Modified: 2013-12-08
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

0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 2
17 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34919862
Hi again, nsitedesigns...

Where did the nav come from?
0
 

Author Comment

by:nsitedesigns
ID: 34919923
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34919937
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nsitedesigns
ID: 34920153
let me see if i can find it....
0
 

Author Comment

by:nsitedesigns
ID: 34920166
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
 

Author Comment

by:nsitedesigns
ID: 34920174
0
 

Author Comment

by:nsitedesigns
ID: 35002544
thanks
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 35048752
1. add height for header ( height: 139px;)
add left padding for main-nav ( padding-left: 40px; )
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 500 total points
ID: 35048901
2. add to rule "ul#main-nav li a" new property ( white-space:nowrap; )
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 500 total points
ID: 35048952
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
 
LVL 16

Expert Comment

by:SSupreme
ID: 35048954
4. I hope it will be sorted.
0
 

Author Comment

by:nsitedesigns
ID: 35057167
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
 

Author Comment

by:nsitedesigns
ID: 35057173
0
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 500 total points
ID: 35059474
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
 

Author Closing Comment

by:nsitedesigns
ID: 35072868
perfection!
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question