View Full Version : css padding affecting rollovers in Netscape

09-28-2004, 05:13 PM
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?


09-28-2004, 05:16 PM
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>

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

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

09-28-2004, 05:35 PM
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>

09-28-2004, 07:08 PM
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?

09-28-2004, 07:45 PM
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.

09-28-2004, 08:20 PM
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 (http://www.hehassociates.com/0804184/ccs.htm) 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!

09-28-2004, 09:04 PM
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):


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


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

09-28-2004, 09:26 PM
Thanks, I can see I'll have to work on this for a bit :)