#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    6
    Rep Power
    0

    CSS menu quirk in IE


    I made up a .css nav menu for my departments website. I'm trying to clean it up and there is one bug that i just can't get rid of in IE. I'm using a set of nested <ul> and the :hover with just a touch of javascrpit to get it working. It works fine, but when you mouse over one of the options in IE a 2px border appears at the bottom of the selection. I have been completely unable to figure out why or how to get rid of it. FYI, I am in the proccess of adding in the blue arrows so i know they don't work right in most browsers yet, but i'm not worried about that. Thanks in advance for any help.

    the site

    the nav.css

    the small chunk of javascript

    the relevent .html

    <div id="vertm" class="noprint">
    <ul id="vertnav" >
    <li><a href="/index.html">Home</a></li>
    <!-- Home -->
    <li><a href="/mission/mission.html">Mission<img src="/attributes/arrow_b.gif" /></a> <!-- Mission -->
    <ul>
    <li><a href="/mission/mission.html">Mission</a></li>
    <li><a href="/mission/advisory_board.html">Advisory Board</a></li>
    <li><a href="/mission/oversight_committee.html">Oversight Committtee</a></li>
    </ul></li>
    <li><a href=".news/news.html">News</a></li>
    <!-- News -->
    <li><a id="nested" href="/events/events.html">Events<img src="/attributes/arrow_b.gif" /></a> <!-- Events -->
    <ul>
    <li><a id="nested" href="/events/events.html">What We Provide</a></li>
    <li><a href="/events/conferences/conference.html">Conferences<img src="/attributes/arrow_b.gif" /></a>
    <ul>
    <li><a href="/events/conferences/conference.html">Conferences</a></li>
    <li><a href="/events/conferences/conference_2004.html">Conference 2004</a></li>
    <li><a href="/events/conferences/conference_2003.html">Conference 2003</a></li>
    <li><a href="/events/conferences/conference_archive.html">Conference Archives</a></li>
    </ul></li>
    <li><a href="/events/summer_institute/institute.html">Summer Institute<img src="/attributes/arrow_b.gif" /></a>
    <ul>
    <li><a href="/events/summer_institute/2004/institue_2004.html">Institute 2004</a></li>
    <li><a href="/events/summer_institute/2003/institute_2003.html">Institute 2003</a></li>
    <li><a href="/events/summer_institute/institute_archive.html">Institute Archive</a></li>
    </ul></li>
    <li><a href="/events/seminar_series/seminar_series.html">Seminar Series</a></li>
    <li><a href="/events/upcoming.html">Upcoming Events</a></li>
    </ul></li>
    <li><a href="/projects/projects.html">Projects<img src="/attributes/arrow_b.gif" /></a> <!-- Projects -->
    <ul>
    <li><a href="/projects/projects.html">What Are We Working On?</a></li>
    <li><a href="/projects/all_projects.html">The CASOS Projects</a></li>
    </ul></li>
    <li><a href="/computational_tools/menu.html">Tools, Models, Data<img src="../attributes/arrow_b.gif" /></a> <!-- Tools -->
    <ul>
    <li><a href="/computational_tools/tools.html">Tools, Models, Data</a></li>
    <li><a href="/computational_tools/libs.html">Libraries</a></li>
    <li><a href="/computational_tools/models.html">Statistical Network Models</a></li>
    <li><a href="/computational_tools/data.html">Network Analysis Data</a></li>
    <li><a href="/computational_tools/links.html">Related Links</a></li>
    </ul></li>
    <li><a href="/terrorism/terrorism.html">Networks and Terrorism<img src="/attributes/arrow_b.gif" /></a> <!-- Terrorism -->
    <ul>
    <li><a href="/terrorism/projects.html">Projects</a></li>
    <li><a href="/terrorism/phd_projects.html">Ph.D. Projects</a></li>
    <li><a href="/terrorism/publications.html">Publications</a></li>
    <li><a href="/terrorism/media.html">Interviews</a></li>
    </ul></li>
    <li><a href="/education/phd/phd_casos.html">Education<img src="/attributes/arrow_b.gif" /></a> <!-- Education -->
    <ul>
    <li><a href="/education/phd/phd_casos.html">Ph.D. Program<img src="/attributes/arrow_b.gif" /></a>
    <ul>
    <li><a href="/education/phd/phd_casos.html">Philosophy</a></li>
    <li><a href="/education/phd/phd_casos_apply.html">How To Apply</a></li>
    <li><a href="/education/phd/CASOSapplication.pdf">Application Form</a></li>
    <li><a href="/education/phd/curriculum.html">Curricula</a></li>
    <li><a href="/education/phd/course.html">Course Information</a></li>
    <li><a href="/education/phd/proposal_competition.html">Propostal Competition</a></li>
    </ul></li>
    <li><a href="/education/cos.html">COS Ph.D. Program</a></li>
    <li><a href="/education/network_certificate.html">Network Certificat</a></li>
    <li><a href="/events/conferences/conference.html">Conferences<img src="/attributes/arrow_b.gif" /></a>
    <ul>
    <li><a href="/events/conferences/conference.html">Conferences</a></li>
    <li><a href="/events/conferences/conference_2004.html">Conference 2004</a></li>
    <li><a href="/events/conferences/conference_2003.html">Conference 2003</a></li>
    <li><a href="/events/conferences/conference_archive.html">Conference Archives</a></li>
    </ul></li>
    <li><a href="/events/summer_institute/institute.html">Summer Institute<img src="/attributes/arrow_b.gif" /></a>
    <ul>
    <li><a href="/events/summer_institute/2004/institue_2004.html">Institute 2004</a></li>
    <li><a href="/events/summer_institute/2003/institute_2003.html">Institute 2003</a></li>
    <li><a href="/events/summer_institute/institute_archive.html">Institute Archive</a></li>
    </ul></li>
    <li><a href="/events/seminar_series/seminar_series.html">Seminar Series</a></li>
    </ul></li>
    <li><a href="/people/faculty.html">People<img src="/attributes/arrow_b.gif" /></a> <!-- People -->
    <ul>
    <li><a href="/people/faculty.html">Faculty (CMU/Pitt)</a></li>
    <li><a href="/people/phd.html">PHD Students</a></li>
    <li><a href="/people/staff.html">Staff</a></li>
    <li><a href="/people/alumni.html">Alumni</a></li>
    </ul></li>
    <li><a href="books.html">/publications/Publications</a> <!-- Publications -->
    <ul>
    <li><a href="/publications/books.html">Books</a></li>
    <li><a href="/publications/journals.html">Journals</a></li>
    <li><a href="/publications/papers.html">Papers</a></li>
    <li><a href="/publications/conference_proc.html">Conference Proceedings</a></li>
    <li><a href="/publications/a2c2.html">A2C2</a></li>
    </ul>
    </li>
    <li><a href="/links/links.html">Links</a></li>
    <!-- Links -->
    <li><a href="/contact.html">Contact Us</a></li>
    <!-- Contact -->
    <li><a href="/sitemap.html">Site Map</a></li>
    <!-- SiteMap -->
    </ul>
    <div style="clear:both;"></div>
    </div>
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    Just checked it out in Mozilla
    Maybe time for a wee re-check


    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    6
    Rep Power
    0

    blue arrows


    yeah.. the blue arrows don't do thing right at all at the moment. The way i'm doing them is gonna get changed real soon though. It was just a very quick fix that works in IE and netscape 7.0. The whole menu system i had to code up in just a couple hours since the student who was supposed to make a javascript version of the menu fell through. Gonna switch the arrows to a background image so that mozilla and netscape 7.1 look right again. I'm just really annoyed about the problem in IE 6.x. Where when i mouse over and the menus fly out, I get an extra 2px line below the mouse-over menu item. Purely and asthetic problem, but annoying none the less.
    Last edited by oluckboy; December 15th, 2003 at 04:37 PM.

IMN logo majestic logo threadwatch logo seochat tools logo