[dr_pez]

Hello All,
I have a subnav which does not display properly in Firefox. I found a solution to the indent problem elsewhere on the forum, but now I need to correct the colors. There is a test page at ************* where you can see the problem. The subnav is supposed to be gray background, but it is copying the same blue background of the list in which it is embedded. It displays properly in ie. Hope someone can help. The relevant css is:

#navigation {
	clear: left;
	float: 

left;
	width: 260px;
	color: #cccccc;
	

padding: 0;
	margin: 0;
	}



* html #navigation {
	height: 1%;
	

}
	


#navigation ul#nav1 {
	background-color: 

#6699cc;
	text-align: left;
	color: 

#cccccc;
	list-style: none;	width: 

260px;
	padding: 0;
	margin: 0;
	

}
	


* html #navigation ul#nav1 {
	margin: 

-5px 0 0 0;
	}
	


ul { list-style-type:none; overflow:hidden; 

padding-left: 0px;	 }


#navigation ul#nav1 li {
	background: 

#0033cc;
	border-top: 5px solid 

#6699cc;
	color: #cccccc;
	

font-size: 11px;
	font-weight: bold;
	

letter-spacing: 1px;
	margin: 0;
	

text-decoration: none;
	text-transform: 

uppercase;
	width: 260px !important;
	

list-style: none;
	display: block;
	}
	


#leftside #navigation ul#nav1 li a {
	

background: #0033cc;
	color: #cccccc;
	

font-weight: bold;
	text-decoration: 

none;
	padding: 5px 5px 5px 10px;
	

display: block;
	}

#leftside 

#navigation ul#nav1 li a:visited {
	

background: #0033cc;
	color: #cccccc;
	

font-weight: bold;
	text-decoration: 

none;
	padding: 5px 5px 5px 10px;
	

display: block;
	}
	
#leftside 

#navigation ul#nav1 li a:link {
	

background: #0033cc;
	color: #cccccc;
	

font-weight: bold;
	text-decoration: 

none;
	padding: 5px 5px 5px 10px;
	

display: block;
	}

#leftside 

#navigation ul#nav1 li a:hover {
	

background: #0033ff;
	color: #ffffff;
	

font-weight: bold;
	text-decoration: 

none;
	padding: 5px 5px 5px 10px;
	

display: block;
	}
	
#leftside 

#navigation ul#nav1 li a:active {
	

background: #0033ff;
	color: #ffffff;
	

font-weight: bold;
	text-decoration: 

none;
	padding: 5px 5px 5px 10px;
	

display: block;
	}

#leftside 

#navigation ul#nav1 li ul {
	margin: 0 0 0 0;
	

}
	


* html #leftside #navigation ul#nav1 li ul {
	

margin: 0 0 0 0;
	}



#leftside #navigation ul#nav1 li ul li {
	

background: #cccccc;
		border: 

0;
	font-size: 9px;
	font-weight: 

bold;
	margin: 0 0 -2px 0;
	

padding: 0;
	text-decoration: none;
	

text-transform: none;
	width: 240px;
	

list-style: none;
	}



#leftside #navigation ul#nav1 li ul li a:link {
	

background: #cccccc;
	color: #0033cc;
	

}
	


#leftside #navigation ul#nav1 li ul li a:visited 

{
	background: #cccccc;
	color: 
#0033cc;
	}



#leftside #navigation ul#nav1 li ul li a:hover {
	

background: #cccccc;
	color: #0033ff;
	

}



#leftside #navigation ul#nav1 li ul li a:active {
	

background: #cccccc;
	color: #0033ff;
	

}
	
	

#navigation ul#navinternal {
	

background-color: #cccccc;
	text-align: left;
	

width: 250px;
	padding: 5px 0 5px 10px;
	

margin: 5px 0 0 0;
	}
	


#navigation ul#navinternal li {
	color: 

#0033cc;
	font-size: 9px;
	

font-weight: bold;
	letter-spacing: 

0;
	text-decoration: none;
	

list-style: none;
	display: inline;
	}



#navigation ul#navinternal li a {
	color: 

#0033cc;
	font-weight: bold;
	

text-decoration: none;
	}
	
#navigation ul#navinternal li a:link, #navigation 

ul#nav1 li a:visited {
	color: #0033cc;
	

font-weight: bold;
	text-decoration: 

none;
	}



#navigation ul#navinternal li a:hover, 

#navigation ul#nav1 li a:active {
	color: 

#0033ff;
	font-weight: bold;
	

text-decoration: none;
	}

This post has been edited by JackOfAllTrades: 06 October 2010 - 03:46 AM
Reason for edit:: Link removed

[moopet]

dr_pez, on 03 April 2010 - 02:21 AM, said:

There is a test page at ************** where you can see the problem.

404.

This post has been edited by JackOfAllTrades: 06 October 2010 - 03:46 AM
Reason for edit:: Link removed

[dr_pez]

So sorry - there is an underscore, not a dash, in the url. *link removed*

Kathy

[moopet]

dr_pez, on 03 April 2010 - 09:57 PM, said:

So sorry - there is an underscore, not a dash, in the url. ************.

Kathy

I've looked at that page in chrome, FF and IE. I can't see any difference between them, and I don't know which bit you mean when you say the "subnav". Could you post a screenshot of what it looks like correct and incorrect or maybe just identify the element by its id or some of the text in it?

This post has been edited by JackOfAllTrades: 06 October 2010 - 03:47 AM
Reason for edit:: Link removed

[dr_pez]

Hi Moopet,

Thanks for getting back with me. The subnav only shows when you click on a category that has a subnav. Then it is supposed to be right below the main category, with a gray background. In ie, it looks perfect, but Firefox does not display it right. The subnav items are indented so much that they abut the content box, and the gray background does not show up at all.

This page has the subnav open:

*link removed*

-- if you use this one, you will see the problem I am talking about. Under the main category of "Education and Training," there is a list of 5 items that appear in the gray box, no left margin, in ie. In firefox, they look exactly the same as the main categories. I should have posted this link in the first place. I am sorry. I am not any kind of web developer -- just a volunteer who agreed to maintain my professional association website.

Kathy

This post has been edited by KYA: 05 October 2010 - 06:58 PM

[jrm402]

Hi again! It looks like in the html file you need to put <li></li> around your subcategory lists.

Also, just make one list instead of a new list for each element.

Looks like this now:

.....
<li><a href="http://w************/test_site/training/index.shtml">Education and Training</a></li>
<ul><li class="subCat"><a class="subCat" href="http://www.************/test_site/full/index.shtml">Psychoanalytic Training</a></li></ul>
<ul><li class="subCat"><a class="subCat" href="http://**************/test_site/acad/index.shtml">Non-Clinical Psychoanalytic Training</a></li></ul> 
.....

Should look something like this

.....
<li><a href="http://****************/test_site/training/index.shtml">Education and Training</a></li>
<li>
  <ul><li class="subCat"><a class="subCat" href="http://*****************/test_site/full/index.shtml">Psychoanalytic Training</a></li>
    <li class="subCat"><a class="subCat" href="http://***************/test_site/acad/index.shtml">Non-Clinical Psychoanalytic Training</a></li></ul> 
</li>
.....

It's another thing thats hard to explain w/o actually showing you but I hope that helped.

This post has been edited by JackOfAllTrades: 06 October 2010 - 03:48 AM
Reason for edit:: Link removed

[dr_pez]

Hi JRM402,

I'm still working on this. I tried to make the template change in the html, as you suggested, but that method only works on a sample page I have on my desktop. The template is hooked up to a template from a content management system, and the CMS is going to add those <li> items one at a time no matter what I do, with the <ul> and </ul> pair between items each time. So I went to plan B and found somewhere else that I could add some extra lines to the subnav css which would take care of the background color problem for the subnav. How it did this, I don't know, but the background color is now displaying properly. But now I am back to the OTHER problem, which is that the subnav list indents in Firefox. It is fine in ie. Below is the code that I added:

#leftside #navigation ul#nav1 li ul {
	margin: 0 0 0 0;
	}

* html #leftside #navigation ul#nav1 li ul {
	margin: 0 0 0 0;
	}

/this is the new entry to the old list/

ul#nav1 li ul { 	list-style: none
margin:0px; padding:0px;	background: #cccccc; }

#leftside #navigation ul#nav1 li ul li {
	background: #cccccc;
	border: 0;
	font-size: 9px;
	font-weight: bold;
	margin: 0 0 -2px 0;
	padding: 0;
	text-decoration: none;
	text-transform: none;
	width: 240px;
	list-style: none;
	}

If you have any ideas about this, I would greatly appreciate it.

Kathy

This post has been edited by dr_pez: 09 April 2010 - 06:21 AM

[jrm402]

Hi

After a little work, I think we've come up with a solution.

Take this code that works fine in ie7 only, from what I've seen, and put it in a new style sheet called ie7.css. That will preserve what is good in ie.

Now in the main style sheet page, do this:

#leftside #navigation ul#nav1 li ul li {

needs to be:

#leftside #navigation ul#nav1 ul li {

And inside that same selector, you need to change some style:

margin: 0 0 -2px -20px;
width: 240px !important;

The margin moves it over to the left and the !important makes that width the last one to be used.

Now to re-enable the original styles for ie7 only, you need to include an ie7 conditional statement in your html files:

<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="path/to/css/ie7.css" /><![endif]--> 

Remember, before you edit any css, copy any css that has to do with the menu system into the ie7.css file. I don't know exactly what styles are being pulled from where so just copy the whole menu css into the ie7.css file.

[dr_pez]

Hi jrm402,

Well, we are almost there! This pulled the indent over so that the right edge of the subnav is lined up with the right edge of the higher level category. The text is lined up properly too. That's exactly how it is supposed to be. But there is a weird geometric pattern on the left edge, where the color from the leftside navigation is showing through. I think I need to change THAT margin too, but I don't know which one it is.

I won't have time to work on it further until tomorrow and in the meantime I uploaded the wrong file. So I will get back to you.

Thanks for all you help.

Kathy

This post has been edited by dr_pez: 10 April 2010 - 06:39 AM

[dr_pez]

Hi jrm402,

Well, it is perfect now! I found the template in the content management system for the menus and submenus, and this time I was able to follow your initial advice to put my subnavs between <li> and </li> tags. I modified the css file as you recommended, took out the earlier fixes that I had applied, and it worked exactly as it was supposed to. I don't know if it is calling that second template for ie7 or not, but it doesn't matter because it is all working and I couldn't be happier.

Thank you so much for your help!

Kathy