http://www.northstar-emerg.com/main6.html

#1. the Internet Explorer rendition of the main menu has white lines
between the menu links....arg.

Hmm, it appears that the line is coming from the following bit of CSS:

/*********** #navBar link styles ***********/

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

I don't know what this "hack" is fixing, but it appears to be causing the
lines under each menu item. Removing should fix your problem.

You are correct Ron....now in IE the menu items have huge gaps between them...ah well.

Which is exactly what the hack was fixing to begin with. This is IE refusing to ignore white space between list items. Adding a border-bottom is one of the more obscure fixes for the problem. You can do the same thing by removing the white space between the list items in the markup. A popular way to do this is to place the carriage returns inside the li tags, like so:

<div id="navBar"><div id="sectionLinks">
  <ul>
    <li><a href="#">Home</a></li
    ><li><a href="#">About Us</a></li
    ><li><a href="#">Biographies</a></li
    ><li><a href="#">Announcements</a></li
    ><li><a href="#">Health News</a></li
    ><li><a href="#">Contact Us</a></li
    ><li><a href="#">Login</a></li>
    </ul><br /><br />
</div></div>

A little odd to read at first, but effective and completely avoids the need for the underline.

BTW, I'd remove those <br /> tags, too. Use bottom margin or padding to get the spacing you need.

HTH,
--

-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to