Line Height Issue

[mdisch]

I am having trouble with line height in Products navigation list where you click Products button on the left column (see the screenshot below). The problem occurs when a text link, Accessories & Networking/Cables/Routers is long it automatically wraps into 2 lines causing 2nd line to overlap with other link, Computers. Could anyone please help by identifying what is causing the problem in CSS and how to fix it? I use Animated Collapsible DIV v2.01 (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm) with my own CSS framework.

http://www.dischmedia.com/site/shot.jpg

Website: www.dischmedia.com/site (http://www.dischmedia.com/site)
CSS: www.dischmedia.com/site/css/style.css (http://www.dischmedia.com/site/css/style.css)

[jscheuer1]

Change:


#subnav li a, a:link, a:visited {
font-size: 11px;
font-weight: normal;
height: 16px;
background: transparent;
}

to:


#subnav li a, a:link, a:visited {
font-size: 11px;
font-weight: normal;
height: auto;
line-height:155%;
background: transparent;
}

You may want to add a line break tag here as well:


<div id="products" style="display: none">
<ul id="subnav" style="font-size:10px; line-height: normal">
<li><br><a href="products/keyboard.php">Keyboard</a></li>
<li><a href="products/devices.php">Devices</a></li>
<li><a href="products/accessories.php">Accessories &amp; Networking/Cables/Routers</a></li>
<li><a href="products/monitors.php">Monitors</a></li>
<li><a href="products/computers.php">Computers</a></li>
<li><a href="products/memory.php">Memory</a></li>
<li><a href="products/storage.php">Hard Drives</a></li>
</ul>
</div>

By the way, this selector:


#subnav li a, a:link, a:visited {

takes in all links and all visited links on the page. I think you mean for it to be:


#subnav li a, #subnav li a:link, #subnav li a:visited {

[mdisch]

Many thanks! Now that raises me another question how do I make Accessories & Networking/Cables/Routers' line height shorter with wrapped 2nd line for each links without applying line height for between each of the separated links?

I often get myself confused with difference between id and class for CSS rule. And when I should use specific tag that only applies with id or class (i.e. div.rule or div#rule) and when I should use id or class name with tag after the name (i.e. .rule div or #rule div). Any tips or tutorials that you can find for me to learn and understand about these CSS Advanced stuff? I usually just fool around until I get all looks right and the way I wanted them to be some of the time.

[jscheuer1]

First of all, after looking at this a little more, I decided that this part:


<div id="products" style="display: none">
<ul id="subnav" style="font-size:10px; line-height: normal">
<li><br><a href="products/keyboard.php">Keyboard</a></li>
<li><a href="products/devices.php">Devices</a></li>
<li><a href="products/accessories.php">Accessories &amp; Networking/Cables/Routers</a></li>
<li><a href="products/monitors.php">Monitors</a></li>
<li><a href="products/computers.php">Computers</a></li>
<li><a href="products/memory.php">Memory</a></li>
<li><a href="products/storage.php">Hard Drives</a></li>
</ul>
</div>

would be simpler, more straightforward, but would still produce the same result if it were like so:


<div id="products" style="display: none"><br>
<ul id="subnav">
<li><a href="products/keyboard.php">Keyboard</a></li>
<li><a href="products/devices.php">Devices</a></li>
<li><a href="products/accessories.php">Accessories &amp; Networking/Cables/Routers</a></li>
<li><a href="products/monitors.php">Monitors</a></li>
<li><a href="products/computers.php">Computers</a></li>
<li><a href="products/memory.php">Memory</a></li>
<li><a href="products/storage.php">Hard Drives</a></li>
</ul>
</div>

Now, basically what you want is for this part to appear closer together vertically, as though it is one choice or option (which it is):


<li><a href="products/accessories.php">Accessories &amp; Networking/Cables/Routers</a></li>

For that, you could do:


<li><a href="products/accessories.php" style="line-height:100%;">Accessories &amp; Networking/Cables/Routers</a></li>

Or you could give it a class or id and style it with that selector in your stylesheet.

Generally speaking, it is best to keep all styles in the stylesheet(s). A class may be given to one or more elements, and one or more classes may be given to an element. An id should be unique to only one element and only one id per element is allowed. You can also use other selectors, like the tag names, and/or an element's descendants.

For a full run down on available selectors, see:

http://www.eskimo.com/~bloo/indexdot/css/syntax/selectors/selectors.htm

or your favorite css reference. But be aware of the limitations. Not all selectors work in all browsers, the differences are noted in the above linked reference.

Some confusion can happen because just about all browsers will let you break certain style rules, others will allow certain rules to be broken that not all browsers allow to be broken, no browser will allow you to break all the rules. Any violations allowed by current browsers will likely not be allowed in the future. So for good cross browser support, it is best to just learn the rules and follow them.

Even that's not enough though, because some browsers need workarounds because they are not up to standards. However, once you have the basics down, these exceptions will be relatively few, and can usually be fairly easily dealt with. Often they will not come up at all.