CSS navlist class differences between IE & Firefox

[Wynnefield]

I need some quick help please with an unordered list navigation bar defined in a css style sheet. The navigation bar displays correctly with hovering, onclick, etc. The problem exists when I apply a "class='reverse'" to reverse the background color and text on the navigation element to identify the current page, i.e. on the Contacts page, I apply the class-"reverse" to the "Contact Information" element on the navigation bar.

Please see the following code for more details. The only active links are Contact Information and Home (on the contact page):

XHTML home page: http://www.wynnefields.com/let/index.html
CSS style sheet: http://www.wynnefields.com/let/styles/stylesheet.css

I appreciate any input to resolve this as quickly as possible. I would like to pubish these initial pages this weekend.

thank you,

Wynne

 

[Winterchase]

I need some quick help please with an unordered list navigation bar defined in a css style sheet. The navigation bar displays correctly with hovering, onclick, etc. The problem exists when I apply a "class='reverse'" to reverse the background color and text on the navigation element to identify the current page, i.e. on the Contacts page, I apply the class-"reverse" to the "Contact Information" element on the navigation bar.

Please see the following code for more details. The only active links are Contact Information and Home (on the contact page):

XHTML home page: http://www.wynnefields.com/let/index.html
CSS style sheet: http://www.wynnefields.com/let/styles/stylesheet.css

I appreciate any input to resolve this as quickly as possible. I would like to pubish these initial pages this weekend.

thank you,

Wynne

Wynn:

I'm a certified, card carrying computer idiot so I can't help you, but I would like to ask what program you used to get that slide show of the houses up.

Those homes, BTW, are impressive! Do any of 'em come with indoor plumbin'?

 

[StephanieCordray]

Every time I looked at it yesterday, I was called away and didn't get a chance to ask a question. I looked at the two pages in IE and Firefox but didn't see the problem. Everything does exactly what the css tells it to do.

 

[Wynnefield]

Sorry if I wasn't clear Stephanie. When you select "Contact Information" from the navigation bar on the home page, you will be taken to a contacts page (contact.html). On that page, I used the class="reverse" to identify the option on the navigation bar as being on the contacts page, i.e. changed the background, changed the text to black and added the right and left borders (similar to the "hover" behavior").

In IE this change does not render; however, in FF it works fine. I hope this was a bit clearer.

thank you,

wynne

 

[StephanieCordray]

I see what you mean now... yesterday and this morning when i looked at it in the different browsers it looked the same...I'm not 100% expert on css. Learning as I go along and that's piecemeal learning. I can't think why it won't work in IE.

I can suggest something else, however. When viewing the pages, your home link is not visible on the home page but is visible on the other page... you have only two pages linked right now. Instead of changing the background on the active page, why not have the link disappear like you've done for the home page? It would provide a more consistent look between the pages because you start out with one less link than the other pages will have.

 

[Wynnefield]

thank you for the suggestion, stephaie. actually, that option never occurred to me as all the web sites i develop exclude a home page link directly from the home page. occassionally, if there is a logo placed in the top left of each page or as a footer beneath the copyright statement, i will convert all of the logo images into home page links.

however, with this particular design, i prefer to have a conspicuous home page link on the navigation bar on all pages except the home page. for consistency, i replicate the same navigation bar across the site (except for the home page).

I had this option working without a problem on another site; however, i had to separate the "reverse" into two classes: 1) a <li> level class="fill" to change background color and borders (top & bottom); and 2) a <li a> level class="reverse" to reverse the type color. (I tried that method in this situation, and i did not work either.)

CSS:

#navcolumn ul {
list-style: none;
text-indent: 12px;
}
#navcolumn ul li {
margin-left: -2em;
padding-bottom: .5em;
padding-top: .4em;
border-bottom: 1pt solid #BFCCE1;
}
#navcolumn ul li a:link {
font-weight: bold;
color: #656565;
text-decoration: none;
}
#navcolumn ul li a:visited {
font-weight: bold;
color: #656565;
text-decoration: none;
}
#navcolumn ul li a:hover {
font-weight: bold;
color: #656565;
text-decoration: none;
}
#navcolumn ul li a:active {
font-weight: bold;
color: #656565;
text-decoration: none;
}
#navcolumn ul li.fill {
background-color: #4D7390;
border-top: #4D7390;
border-bottom: #4D7390;
}
#navcolumn ul li a.reverse {
color: #D1D1D1;
}
#navcolumn ul li a.reverse:visited {
color: #D1D1D1;
}
#navcolumn ul li.indent {
text-indent: 20px;
}
#navcolumn ul li.indentedfill {
text-indent: 20px;
background-color: #4D7390;
border-bottom: #4D7390;
}

HTML:

<div id="navcolumn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="programs.html">Programs</a></li>
<li><a href="careers.html">Careers</a></li>
<li class="fill"><a href="contact.html" class="reverse">Contact Us</a></li>
</ul>
</div>

I may tri to separate them again, and see if i missed something the first time i tried ... ??

Wynne

 

[StephanieCordray]

Well, you know more about coding css than I do, lol... I'll have to take your word for it.

 

[Kiwiberry]

I justed checked it out in Firefox and IE and both look fine. Did you resolve the issue?

 

[Wynnefield]

maybe it's one of my IE settings or something? i am still getting the same different results on the contacts page: IE is not rendering the "reverse" of background, text and the left and right border on the "Contact Information" element, and when i view in FF it looks like i am "hovering" over the element, which is what it is supposed to do ... ??

 

[StephanieCordray]

No, the first time I looked at the pages, everything looked the same. The second time I looked it was as you said so it's not a setting in IE... but I don't know how to fix it.

 

[Wynnefield]

I found the solution on another forum. Replacing the first line of CSS code defining the "reverse" class with the following solves the problem:

#navlist ul li a.reverse ,#navlist ul li a.reverse:visited {

A need by IE6 for proper css rendering ...

 

[StephanieCordray]

Well... that's good to know if i ever use that method... thanks for posting the solution, Wynne. Whether we like to or not, we have to pander to IE.