Again, I thank this mailing list for the fast, excellent responses to my questions. Tonight, I have another bug that I cannot squash through Google alone. (Trust me, I've been applying independent study for most of this, my first genuine attempt at web design with, or even without, CSS.) Also, sorry in advance for this *long* message, but I wanted to make sure I spelled out my problems thoroughly.
I've read that IE6 has some "issues" with nested lists (lists within a line item of another list). Of course, I'm complicating things with links as well. I've gotten quite far (with some CSS that confuses me now that its written), and it works perfectly in FF. But, IE6 shows some definite quirks. I didn't want to mess with popup menus, so I tried to work with more standard markup. Here's the "Welcome" page ( http://www.unemployedhelp.on.ca/clientswelcome.html). The stylesheet is at "images/clientstyle.css". My site has a left-side navigation panel, made up of an unordered list of links to other main pages. For three of these list items ("Services", "Workshops", and "Resources"), there are sublists of items that link to pages related to the subject in question. These sublists are only to be visible when the "main" subject is selected (only one sublist visible at any one time). With little elegance, I've simply omitted the non-relevant sublists from the XHTML markup on the appropriate pages, so I don't have to "hide" anything with CSS. I'll figure out a more graceful method of showing a navigation bar on my *next* website :-) My desired effect is to create a "raised button" look around the currently-displayed page on the navigation list (using a class called "displayed"). 1st small IE6 problem: when viewing the three pages that contain nested sublists, the "button" surrounds not only the displayed page's link, but also the entire sublist. Odd looking, but not showstopping. I also have a hover effect of a "pressed button" look for each item on the list. 2nd small IE6 problem: whereas the hover activates over the entire area of the "button" in FF, IE6 only activates the hover when the cursor is over the text. A bit annoying, but again, I'll live with it if necessary. Finally, my 3rd (and biggest) IE6 problem. When I select one of the pages in the small (2 line item) sublists under "Services" or "Workshops", I get strange results from the nested list. There seems to be a bunch of bottom padding added to the list items. The first of the two items seems to otherwise display correctly when selected. But when the second item is selected ("Resource Centre" and "Job Search Workshop"), strangeness indeed! Initially the "raised button" look is absent (save a grey line). The hover "pressed button" effect works, but if you move the cursor to the *next* (and *only* the next) main line item ("Online Guide to Employment"), the "raised" effect finally appears, but around *both* sublist line items (not just the one with class="displayed"). It then disappears again if you hover over the offending currently-displayed page link. WTF? (To add even more intrigue, the 3rd nested sublist, under "Resources" line item, shows absolutely *none* of the problems from the above paragraph. Other than the fact that there are four sublist items rather than two, they are identically formatted in their XHTML and I can see no reason why this list comes out swimmingly while I have problems with the other two.) Oh, yeah, and I quick glance through a friend's computer with IE7 shows the exact same issues :-( Here is a snip of the code from "clientjobworkshop.html" (the page for "Job Search Workshop" above): <div id="supplemental"> > <div id="navList1"> > ...... > <ul> > ...... > <li><a href="clientworkshops.html">Workshops</a></li> > <ul class="sublist"> > <li class="sublist"><a href="clientjobclub.html">Job > Club</li> > <li class="sublist displayed"><a > href="clientjobworkshop.html">Job Search Workshop</li> > </ul> > <li><a href="clientguide.html">Online Guide to > Employment</a></li> > ...... > </ul> > </div> > ...... > </div> > And here's the relevant CSS: #supplemental { > position: absolute; > } > > #navList1 { > width: 155px; > padding: 200px 0 40px 2px; > font-size: small; > font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; > font-weight: bold; > } > > #navList1 ul { > margin: 0 0 0 0; > padding: 0 0 0 0; > } > > #navList ul.sublist { > margin: 0 0 0 15px; > padding: 0 0 0 0; > } > > #navList1 li a { > width: 142px; > display: block; > padding: 6px 5px 6px 5px; > list-style-type: none; > } > > #navList1 li.sublist a { > width: 126px; > display: block; > padding: 2px 3px 2px 23px; > list-style-type: none; > font-weight: normal; > } > > #navList1 li a:hover { > padding: 3px 4px 5px 2px; > border-top: 3px solid #666666; > border-right: 1px solid #cccccc; > border-bottom: 1px solid #cccccc; > border-left: 3px solid #666666; > } > > #navList1 li.sublist a:hover { > padding: 0px 2px 0px 20px; > border-top: 3px solid #666666; > border-right: 1px solid #cccccc; > border-bottom: 1px solid #cccccc; > border-left: 3px solid #666666; > } #navList1 li a, #navList2 li a { > text-decoration: none; > } > > #navList1 li.displayed, #navList2 li.displayed { > border-top: 1px solid #cccccc; > border-right: 3px solid #666666; > border-bottom: 3px solid #666666; > border-left: 1px solid #cccccc; > } > Any ideas? I'd appreciate any/all suggestions that can solve my issues, but *particularly* my 3rd problem (I can live with the other two). Thanks in advance. Darren Best ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
