Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2004
    Location
    CT, USA
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css padding affecting rollovers in Netscape

    I have a column of navigation links which use the following CSS:

    .nav3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #2A6161;
    padding-top: 32px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-align: left;
    line-height: 16px;
    }

    It works fine in IE, but in Netscape 7 for both Mac and PC, when the cursor is over the link, the link that highlights is the next link down instead of the link I am hovering over. It is like the padding is being added to my cursor.

    What can I do to fix this?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sounds like your navigation bar isn't a list...

    Try making your navigation like so:

    <ul id="nav3">
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    <li><a href="#">Link Here</a></li>
    </ul>

    A tutorial here: http://www.alistapart.com/articles/taminglists/

    Otherwise, could you post a link or the markup for your menu?

  • #3
    New Coder
    Join Date
    Feb 2004
    Location
    CT, USA
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, you are correct that it is not a list. There are regular bulleted items in the body copy which have a list style, but this nav is set up as running items. It was the only way I could figure out to get the large double carrots that the art director wanted as the bullets.

    There are a ton of pages in this website, and I would prefer not to have to go in and make each nav a list if there is any other way around it. If not, I'll do it, because it does need to be fixed before going live... A list would also be better for when the text runs too long for the column, I could get rid of the spacers.

    <td rowspan="4" width="263" class=nav3a valign="top"><a class=nav3 href="ccs_cpoe.htm">&gt;&gt;CPOE</a><br>
    <a class=nav3 href="ccs_cardio.htm">&gt;&gt;Cardiology <br>&nbsp;&nbsp;&nbsp;&nbsp;Information System</a><br>
    <a class=nav3 href="ccs_dm.htm">&gt;&gt;Document Management</a><br>
    <a class=nav3 href="ccs_er.htm">&gt;&gt;Emergency Room</a><br>
    <a class=nav3 href="ccs_ep.htm">&gt;&gt;E-prescribing</a><br>
    <a class=nav3 href="ccs_ic.htm">&gt;&gt;Interdisciplinary Charting</a><br>
    <a class=nav3 href="ccs_lab.htm">&gt;&gt;Laboratory <br>&nbsp;&nbsp;&nbsp;&nbsp;Information System</a><br>
    <a class=nav3 href="ccs_ma.htm">&gt;&gt;Medication Administration</a><br>
    <a class=nav3 href="ccs_pacs.htm">&gt;&gt;PACs</a><br>
    <a class=nav3 href="ccs_pbpl.htm">&gt;&gt;Patient-based Problem List</a><br>
    <a class=nav3 href="ccs_pharmacy.htm">&gt;&gt;Pharmacy <br>&nbsp;&nbsp;&nbsp;&nbsp;Information System</a><br>
    <a class=nav3 href="ccs_radiology.htm">&gt;&gt;Radiology <br>&nbsp;&nbsp;&nbsp;&nbsp;Information System</a><br>
    <a class=nav3 href="ccs_rr.htm">&gt;&gt;Results Reporting</a><br>
    <a class=nav3 href="ccs_schedule.htm">&gt;&gt;Scheduling</a></td>

  • #4
    New Coder
    Join Date
    Feb 2004
    Location
    CT, USA
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That ALAP page is a great resource.

    I tried reworking my code to use an inline character as the bullet with hanging indents, as they demonstrate in that article, but I'm still getting regular bullets as well as the carrots. I'm guessing this is because I was altering the ccs for the nav3 rather than the <ul>, which I don't want to change because of the regular bullets in the body text. Is it even possible to have two different types of lists like this?

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure it is. If your list is inisde the .nav3-classed table cell, you can use CSS to select it, and it ONLY, like so:

    td.nav3 ul {
    list-style-type: none;
    }

    That will remove the bullets on any ul elements inside a table cell with the nav3 class.

  • #6
    New Coder
    Join Date
    Feb 2004
    Location
    CT, USA
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, that last bit of code did the trick for the bullets. Unfortunately, I am still left with the original problem- the hover is off on the list. Check it in Netscape here by trying to click on one of the single line entries, such as Document Management.

    Additionally, having the items in a list has spread them out. Compare them to one of the other pages in the list (I've only re-styled that first page).

    Thanks for all your help so far, I really appreciate it!

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You have an error in your list where you have a <br /> where the </li> should be.

    Here's your menu, using an image for the bullet (images/bullet.gif):

    http://offtone.com/scripts/mnu.html

    Additionally, you should take the time to work out as many of the validation errors on the page that you can:

    http://validator.w3.org/check?verbos...804184/ccs.htm

    You do not need a class for each <li>, as you can select each li using "ul#nav3 li".

  • #8
    New Coder
    Join Date
    Feb 2004
    Location
    CT, USA
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I can see I'll have to work on this for a bit


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •