Solved

IE7 Navigation problems

Posted on 2011-02-17
17
385 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
  • 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now