I'm having trouble with my CSS menu. The last two sections are disappearing on rollover and the dropdown menus are working for the last two. But the code looks the same for all the menu items to me. What am I doing wrong? If you can help me get this to work, I'll rep and if it will take a while, I'd send paypal, just let me know a fair quote. The CSS and HTML are here (I know the CSS file is messy, I'll clean it up once I figure this problem out): http://www.thisismojave.com/navtest/ Thanks to anybody who helps me out. - R
Hey Mojave, I saw your thread on SitePoint about this. I'm still looking at it, but I do recommend combining all the lists into a single nested list. Is that ok with you? Also, would you like me to cross-post my solution here as well as at SitePoint?
Oh there is a problem, all right. I can see it in both IE 7 and my IE 6 standalone. (Mojave, I'm going to be out of town today, but I'll take my stab at it tomorrow if that's ok with you. Bear in mind that I may end up re-writing the page as a last resort though. But I'll do my best to avoid having to do that.)
soulscratch, thanks - I caught that last night, but I'm still getting the issue. thanks for looking, though.
Ok, I'm taking my stab at it now. One thing I noticed right away is that the link state order isn't being followed (should be :link :visited :hover :active). Not only that, but the dropdowns aren't appearing in IE 6 at all (checking IE 7 now). Another being that the list menus themselves can be consolidated into a single nested list of lists. Re-write is in progress.
http://205.209.146.76/nimblefish/index.html This is what I have so far, not everything is the same though, styling the dotted borders was a b!tch because I knew they would mess up in IE, tried using background images and just got fed up, so I left them out. Also, the background color of the primary nav anchors isn't the same, but I'm too tired to look into it again so hopefully someone can spot the error. I did have to use 1 hack for IE.. I'm wondering how Dan is going to do his.
I just noticed that the right hand featured clients area is messed up, I think you want the white background to go all the way down, the way to do it would be to take the color of the bottom most gradient on the left, and white on the right, and apply like a 700x1 gif background to #content with repeat-y, this is known as faux columns.
I'm hardly touching the HTML code (as much as I wanted to get rid of the tables), but I did toss the entire stylesheet. As for the dotted border, just use 2px instead of 1 and IE will be fine.
Ok, it's a (kinda) dirty job since I don't like to mess with "layout tables" but here you go. I nested the menu lists and cleaned up your whole stylesheet for you as well. Had to remove an inline style from the footer area and set the main content table to a fixed width, but at least it's working cross-browser. Tested in IE 6, IE 7, Firefox 2.0.4, Opera 9.1, and Safari 3 (Windows) Public Beta. I did re-use part of your stylesheet, so it's not as "optimal" or "clean" as it could be (I'll leave that up to you). If you want the dropdown menu to work in IE 6, let me know and I'll show you how to do that as well. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nimblefish - get relevant. get results.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <base href="http://www.thisismojave.com/navtest/" /> <style type="text/css"> body { background: #E4E4E4 url('images/body-bg.jpg') left top repeat-x; color: #818181; font: normal 12px/16px Arial, Helvetica, sans-serif; margin: 0 auto; padding: 0; width: 809px; } .main-table { margin: 12px auto 80px; } .index-header-bg { background: url('images/index-header-bg.gif') left top no-repeat; height: 122px; padding: 0 6px 0 4px; } #menu, #menu ul { list-style: none; margin: 0; padding: 0; } #menu { height: 35px; } * html #menu { overflow: hidden; } #menu li { border-left: 1px dotted #F7F7F7; display: inline; float: left; height: 35px; margin: 0; padding: 0; position: relative; text-align: center; width: 106px; } * html #menu li { border-left: 2px; } #menu li:hover ul { left: 0; } #menu ul { background: url('images/nav_bottom.gif') bottom left repeat-x; border-left: 1px dotted #F7F7F7; border-right: 1px dotted #F7F7F7; margin: 0; min-height: 1%; padding: 0 0 41px 0; position: absolute; top: 36px; left: -999em; } * html #menu ul { border-left: 2px dotted #F7F7F7; border-right: 2px dotted #F7F7F7; } #menu ul li { border-left: 0; display: block; height: auto; margin: 0; padding: 0; text-align: left; width: 106px; } #menu a { background: url('images/menu-normal-bg.gif') left top repeat-x; color: #C9E4F6; display: block; font: bold 13px/30px Arial, Helvetica, sans-serif; margin: 0; padding-top: 10px; text-decoration: none; text-transform: uppercase; width: 100%; } #menu a:hover { /* background: url('images/menu-hover-bg.gif') left top repeat-x; */ color: #FFF; padding: 0; } #menu ul a { background: #3AB0FD; color: #C9E4F6; display: block; font: bold 11px/10px Arial, Helvetica, sans-serif; padding: 15px 0 15px 7px; text-align: left; text-decoration: none; text-transform: none; width: 99px; } #menu ul a:hover { background: #3AB0FD; color: #FFF; padding: 15px 0 15px 7px; } .body-left-bg { background: url('images/body-left-bg.jpg') left top repeat-y; width: 4px; } .body-banner { background: url('images/body-banner.jpg') left top no-repeat; padding-top: 303px; } .body-inside-bg { background: #FAFAFA url('images/body-inside-bg.gif') left top repeat-x; border-right: 1px solid #FFF; padding: 34px 26px 50px 30px; } .fretured-client-bg { background: #FFF url('images/featured-client-bg.gif') left top no-repeat; padding-left: 27px; width: 225px; } .blue-title { background-color: inherit; color: #0089E5; font-size: 15px; font-weight: bold; line-height: 20px; text-decoration: none; } .body-link { background: transparent; color: #0984D7; font-weight: bold; text-decoration: none; } .body-link:hover { background: #0984D7; color: #FFF; text-decoration: underline; } .body-right-bg { background: url('images/body-right-bg.jpg') left top repeat-y; width: 4px; } .footer-bg { background: url('images/footer-bg.gif') left top no-repeat; color: #FAFAFB; height: 76px; padding: 14px 33px 10px 33px; } .footer-link { background-color: transparent; color: #FAFAFA; font: normal 12px/16px Arial, Helvetica, sans-serif; text-decoration: none; } .footer-link:hover { background-color: transparent; color: #D9F0FF; text-decoration: underline; } </style> </head> <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"> <table width="809" border="0" cellpadding="0" cellspacing="0" class="main-table"> <tr> <td align="left" valign="top"> <table width="809" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="index-header-bg"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="86" align="left" valign="bottom"> <img src="images/logo.jpg" alt="" width="169" height="58" hspace="30" /> </td> </tr> <tr> <!-- Start Main Navigation --> <td width="779" height="35" style="padding-left:240px;"> <ul id="menu"> <li><a href="/company">Company</a> <ul> <li><a href="/company/index.html">Mission</a></li> <li><a href="/company/team.html">Team</a></li> <li><a href="/company/board.html">Board Members</a></li> <li><a href="/company/careers.html">Careers</a></li> </ul> </li> <li><a href="/solutions">Solutions</a> <ul> <li><a href="/solutions/index.html">Overview</a></li> <li><a href="/solutions/handraiser.html">Hand-Raiser</a></li> <li><a href="/solutions/crosssell.html">Cross-sell</a></li> <li><a href="/solutions/salesdriven.html">Sales-driven</a></li> </ul> </li> <li><a href="/services">Services</a> <ul> <li><a href="/services">Overview</a></li> </ul> </li> <li><a href="/technology">Technology</a> <ul> <li><a href="/technology">Overview</a></li> <li><a href="/technology/PURL.html">PURL</a></li> <li><a href="/technology/print.html">Individualized Print</a></li> <li><a href="/technology/email.html">Individualized Email</a></li> <li><a href="/technology/dashboard.html">Dashboard</a></li> </ul> </li> <li><a href="/casestudies">Case Studies</a> <ul> <li><a href="/casestudies/index.html">Overview</a></li> <li><a href="/casestudies/sony.html">Sony</a></li> <li><a href="/casestudies/hp.html">HP</a></li> <li><a href="/casestudies/adobe.html">Adobe</a></li> <li><a href="/casestudies/backroads.html">Backroads</a></li> </ul> </li> </ul> </td> <!-- End Main Navigation --> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" valign="top"> <table width="809" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="body-left-bg"> <img src="images/left-bar.gif" alt="" width="4" height="97" /> </td> <td align="left" valign="top" bgcolor="#FFFFFF"> <table width="801" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" class="body-banner"> <table width="801" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="27" align="left" valign="top"> </td> </tr> <tr> <td align="left" valign="top" class="body-inside-bg"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" align="left" valign="top" class="blue-title">Meet the Industry Leader in Micromarketing Engines</td> </tr> <tr> <td align="left" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="113" align="left" valign="top"> <img src="images/project-screen.jpg" alt="" width="90" height="113" /> </td> <td align="left" valign="top"> <strong>Nimblefish is the world's premier provider of <a href="#" class="body-link">automated micromarketing engines</a> for customer-centric enterprises. Our customized micromarketing engines enable large and leading-edge organizations to leverage the latest technology-powered relevant-messaging capabilities to significantly increase sales and win hearts and minds by providing the best customer experience. </strong> <br /> <a href="#" class="body-link">Learn More</a><img src="images/orange-arrow.gif" alt="" width="6" height="6" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> <td align="left" valign="top" class="fretured-client-bg"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="27" align="left" valign="middle" class="blue-title"> Featured Clients </td> </tr> <tr> <td align="left" valign="middle"> <table width="100%" border="0" align="left" cellpadding="10" cellspacing="0"> <tr> <td align="left" valign="middle"> <img src="images/apple.gif" alt="apple" width="34" height="33" /> </td> <td align="left" valign="middle"> <img src="images/at&t.gif" alt="at&t" width="71" height="32" /> </td> </tr> <tr> <td align="left" valign="middle"> <img src="images/hp.gif" alt="hp" width="43" height="34" /> </td> <td align="left" valign="middle"> <img src="images/lowe's.gif" alt="LOWE's" width="73" height="32" /> </td> </tr> <tr> <td align="left" valign="middle"> <img src="images/kodak.gif" alt="KODAK" width="61" height="19" /> </td> <td align="left" valign="middle"> <img src="images/adobe.gif" alt="Adobe" width="28" height="37" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> <td align="left" valign="top" class="body-right-bg"> </td> </tr> </table> </td> </tr> <tr> <td align="left" valign="top" class="footer-bg"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="height="20px" align="left" valign="middle"> <a href="#index.html" class="footer-link">Home</a> | <a href="#company.html" class="footer-link">Company</a> | <a href="solutions.html" class="footer-link">Solutions</a> | <a href="#services.html" class="footer-link">Services</a> | <a href="#technology.html" class="footer-link">Technology</a> | <a href="case-studies.html" class="footer-link">Case Studies</a> | <a href="#contact-us.html" class="footer-link">Contact Us</a> </td> </tr> <tr> <td style="font-size:10px;" height="20" align="left" valign="middle"> © 2007 Nimblefish Technologies, Inc. All Rights Reserved </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> Code (markup):
It was an assorted collection of "hasLayout" issues that was causing him problems. I got them fixed though.
I think your nested UL is off by a pixel from the left, and the background color of the primary nav anchor should change on hover, and this is why I just gave up on the dotted borders, because they went ALL the way down and the bottom part of the nested UL doesnt look "right". I tried using a background image on the nested LIs that's equal to their width, and then put a class on the last nav item and give it the background image of the nav_bottom.gif IMO, you should use a very light blue solid border instead of dotted white.
Well, for starters, I was in excruciating pain (ended up calling 911 because of it), and two, I wanted to preserve as much of the OP's code as possible (since this was free help, not a contract job). If the OP wants to hire me for contract work (which would include re-coding to MY specifications), he knows how to contact me. Now if you'll excuse me, I have to head off to the pharmacist so I can get my vicodin.