Lineheight in CSS list

@absolutmgd13Nov 12.2008

Hey

Can anybody help me fix this line height issue?
if you notice my longer URL for testing in the nav, how can i keep that line-height for the block display and keep the text tight and justified?

[CODE] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> <style type=”text/css”>

body { font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:11px;}

a { color:#494949; text-decoration:none;}

.stmenuhead { background-image:url(‘box-header.gif’); background-repeat:no-repeat; min-height:34px; height:auto !important; height:34px; width:200px; color:#FFFFFF; font-size:14px; font-weight:bold; padding:5px; }

.stmenu { background-color:#e3e3e5; width:200px; font-size:12px; }

ul.navigation { list-style-type:none; margin: 0; padding: 0; font-weight:bold; display:block; line-height:30px; }

.navigation li { text-indent:5px; width:200px; }

.navigation li a { padding:0px; display: block; border-top:1px solid #c0cceb; width:200px; }

.navigation li a:hover { padding:0px; display: block; background-color:#dde6ed; }

.navigation li a:active{ background-color:#dde6ed; }

.greenArrow { border:0 none; position:absolute; left:185px; } </style> </head> <body> <div class=”stmenuhead”>Public, Government, and Regulatory Affairs</div> <div class=”stmenu”>

<ul class=”navigation”> <li><a href=”#”>Federal Affairs <span class=”greenArrow”><img src=”green-arrow.gif” /></span></a></li> <li><a href=”#”>State and Local Affairs</a></li> <li><a href=”#”>Public Affairs, longer URL for testing line <span class=”greenArrow”><img src=”green-arrow.gif” /></span></a></li> <li><a href=”#”>Contact Us</a></li> </ul>

</div> </body> </html>

[/CODE]

to post a comment

CSS

8 Comments(s) _↴

@KDLANov 12.2008 — #Apply top & bottom padding to the <a> string, rather than line-height.

@absolutmgd13authorNov 14.2008 — #thanks.. but now i have a bigger problem.

I have to use the existing CSS to overwride and cannot do this from scratch..

my new problem is only in IE. I can't get the rollover to work correctly, fix the spacing under the top 2 nav items, or align the header 'overview' to the middle! oy. Can you help me out?

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <style type="text/css";>
 body { font-family:Verdana, Arial, Helvetica, sans-serif;}
 
 .stmenu {
 z-index:1000;
 font-size:90&#37;;
 margin:0px;
 padding:0px;
 }
 
 
 /* remove all the bullets, borders and padding from the default list styling */
 .stmenu ul {
 padding:0px;
 margin:0px;
 list-style-type:none;
 width:200px;
 }
 .stmenuhead {
 background-image:url('box-header.gif');
 background-repeat:no-repeat;
 min-height:27px;
 height:auto !important;
 height:27px;
 z-index:1000;
 padding-top:7px;
 }
 
 .stmenuhead a {
 padding-left:5px;
 color:#FFFFFF;
 font-size:14px;
 font-weight:bold;
 text-decoration:none;
 }
 
 /* hack for IE5.5 */
 * html .stmenu ul {margin-left:-16px; margin-left:0;}
 /* position relative so that you can position the sub levels */
 .stmenu li {
 position:relative;
 background:#e3e3e5;
 height:26px;
 color:#494949;
 border-top:1px solid #c0cceb;
 }
 
 /* get rid of the table */
 .stmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 .stmenuhead table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 
 
 /* style the links */
 .stmenu a, .stmenu a:visited {
 background-color:#e3e3e5;
 font-weight:bold;
 font-size:11px;
 color:#3C6A91;
 display:block;
 text-decoration:none;
 height:25px;
 line-height:25px;
 width:200px;
 color:#000;
 text-indent:5px;
 }
 
 /* style the links */
 
 /* hack for IE5.5 */
 * html .stmenu a, * html .stmenu a:visited {
 background-color:#e3e3e5;
 color:#494949;
 width: auto;
 display:block;
 text-decoration:none;
 height:25px;
 width:200px;
 text-indent:5px;
 }
 /* style the link hover */
 * html .stmenu a:hover {color:#494949; 	background-color:#dde6ed; text-decoration:none;}
 * html .stmenu .arrowdiv{
 position: absolute;
 right: 4px;
 border: 0;
 }
 /* style the link hover */
 * html .stmenuhead a:hover {color:#fff;text-decoration:none; background-color:#dde6ed;}
 * html .stmenuhead .arrowdiv{
 position: absolute;
 right: 4px;
 border: 0;
 }
 
 .stmenu :hover > a {
 color:#494949;
 background-color:#dde6ed;
 text-decoration:none;
 }
 
 .stmenuhead :hover > a {
 color:#fff;
 text-decoration:none;
 }
 
 /* hide the sub levels and give them a positon absolute so that they take up no room */
 .stmenu ul ul {
 background-color:#e3e3e5;
 visibility:hidden;
 position:absolute;
 top:0;
 left:200px;
 color:#494949;
 }
 /* make the second level visible when hover on first level list OR link */
 .stmenu ul li:hover ul,
 .stmenu ul a:hover ul {
 visibility:visible;
 }
 
 /* keep the third level hidden when you hover on first level list OR link */
 .stmenu ul :hover ul ul{
 visibility:hidden;
 }
 /* keep the fourth level hidden when you hover on second level list OR link */
 .stmenu ul :hover ul :hover ul ul{
 visibility:hidden;
 }
 /* make the third level visible when you hover over second level list OR link */
 .stmenu ul :hover ul :hover ul{
 visibility:visible;
 }
 /* make the fourth level visible when you hover over third level list OR link */
 .stmenu ul :hover ul :hover ul :hover ul {
 visibility:visible;
 }
 
 .stmenu .arrowdiv{
 position: absolute;
 right: 4px;
 top:6px;
 border: 0;
 }
 
 img { border:none; }
 </style>
 </head>
 <body>
 
 <span id="menu">
 
 <div class="stmenuhead">
 <a href="index.html">Overview</a>
 </div>
 
 
 <div class="stmenu">
 <ul>
 <li class="sub"><a href="/root/resources/EBusiness/workwithus.html">Work With Us<span class="arrowdiv"><img src="green-arrow.gif" /></span></a> 
 
 <ul>
 <li><a href="/root/resources/EBusiness/web-contacts.html">Web Site Contacts</a></li>
 </ul>
 
 </li>
 
 <li class="sub"><a href="/root/resources/EBusiness/webTrendsNews.html">Web Trends & News<span class="arrowdiv"><img src="green-arrow.gif" /></span></a>
 
 <ul>
 <li><a href="/root/resources/EBusiness/web-two-o.html">Web 2.0 Explained</a></li>
 </ul>
 
 </li>
 
 <li><a href="/root/resources/EBusiness/ebiz-labs.html">eBiz Labs</a></li>
 
 <li><a href="/root/resources/EBusiness/about-us.html">About Us</a></li>
 
 <li><a href="/root/resources/EBusiness/contact-us.html">Contact Us Contact Us Contact Us Contact Us</a></li>
 
 </ul>
 </div>
 
 </span>
 
 </body>
 </html>
 
 [/CODE]

@KDLANov 14.2008 — #Can you send a link to the page? Without seeing the code in play with your images, it's hard to imagine the problems.

@absolutmgd13authorNov 14.2008 — #sorry, its an internal site.. let me attach the image.

[upl-file uuid=0bdcdb84-8464-4094-869d-e072728f8411 size=2kB]box-header.gif[/upl-file]

@KDLANov 14.2008 — #What are the dimensions of the greenarrow.gif?

@KDLANov 14.2008 — #

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style type="text/css";&gt;
 body { font-family:Verdana, Arial, Helvetica, sans-serif;}
 
 .stmenu {
 z-index:1000;
 font-size:90&amp;#37;;
 margin:0px;
 padding:0px;
 }
 
 
 /* remove all the bullets, borders and padding from the default list styling */
 .stmenu ul {
 padding:0px;
 margin:0px;
 list-style-type:none;
 width:200px;
 }
 .stmenuhead {
 background-image:url('box-header.gif');
 background-repeat:no-repeat;
 min-height:27px;
 height:27px;
 z-index:1000;
 padding-top:7px;
 text-align: center;
 width: 200px;
 }
 
 .stmenuhead a {
 /*padding-left:5px;*/
 color:#FFFFFF;
 font-size:14px;
 font-weight:bold;
 text-decoration:none;
 }
 
 /* hack for IE5.5 
 * html .stmenu ul {margin-left:-16px; margin-left:0;}*/
 /* position relative so that you can position the sub levels */
 .stmenu li {
 position:relative;
 background:#e3e3e5;
 /*height:26px;*/
 color:#494949;
 border-top:1px solid #c0cceb;
 }
 
 /* get rid of the table */
 .stmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 .stmenuhead table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 
 
 /* style the links */
 .stmenu a, .stmenu a:visited {
 background-color:#e3e3e5;
 font-weight:bold;
 font-size:11px;
 color:#3C6A91;
 display:block;
 text-decoration:none;
 /*height:25px;*/
 /*line-height:25px;*/
 padding: 6px 5px;
 width:190px;
 color:#000;
 /*text-indent:5px;*/
 }
 
 /* style the links */
 
 /* style the link hover */
 * html .stmenu a:hover {color:#494949; 	background-color:#dde6ed; text-decoration:none;}
 * html .stmenu .arrowdiv{
 position: absolute;
 right: 4px;
 border: 0;
 }
 /* style the link hover */
 * html .stmenuhead a:hover {color:#fff;text-decoration:none; background-color:#dde6ed;}
 * html .stmenuhead .arrowdiv{
 position: absolute;
 right: 4px;
 border: 0;
 }
 
 .stmenu :hover &gt; a {
 color:#494949;
 background-color:#dde6ed;
 text-decoration:none;
 }
 
 .stmenuhead :hover &gt; a {
 color:#fff;
 text-decoration:none;
 }
 
 /* hide the sub levels and give them a positon absolute so that they take up no room */
 .stmenu ul ul {
 background-color:#e3e3e5;
 display: none;
 position:absolute;
 top:0;
 left:200px;
 color:#494949;
 
 }
 /* make the second level visible when hover on first level list OR link */
 .stmenu ul li:hover ul,
 .stmenu ul a:hover ul {
 display: block;
 }
 
 /* keep the third level hidden when you hover on first level list OR link */
 .stmenu ul :hover ul ul{
 display: none;
 }
 /* keep the fourth level hidden when you hover on second level list OR link */
 .stmenu ul :hover ul :hover ul ul{
 display: none;
 }
 /* make the third level visible when you hover over second level list OR link */
 .stmenu ul :hover ul :hover ul{
 display: none;
 }
 /* make the fourth level visible when you hover over third level list OR link */
 .stmenu ul :hover ul :hover ul :hover ul {
 display: none;
 }
 
 .stmenu .arrowdiv{
 /*position: absolute;
 right: 4px;
 top:6px;
 border: 0;
 display: inline;*/
 }
 
 img { border:none; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;span id="menu"&gt;
 
 &lt;div class="stmenuhead"&gt;
 &lt;a href="index.html"&gt;Overview&lt;/a&gt;
 &lt;/div&gt;
 
 
 &lt;div class="stmenu"&gt;
 &lt;ul&gt;
 &lt;li class="sub"&gt;&lt;a href="/root/resources/EBusiness/workwithus.html"&gt;Work With Us&lt;span class="arrowdiv"&gt;&lt;!--&lt;img src="green-arrow.gif" /&gt;--&gt;&lt;/span&gt;&lt;/a&gt; 
 
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="/root/resources/EBusiness/web-contacts.html"&gt;Web Site Contacts&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;/li&gt;
 
 &lt;li class="sub"&gt;&lt;a href="/root/resources/EBusiness/webTrendsNews.html"&gt;Web Trends &amp; News&lt;span class="arrowdiv"&gt;&lt;!--&lt;img src="green-arrow.gif" /&gt;--&gt;&lt;/span&gt;&lt;/a&gt;
 
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="/root/resources/EBusiness/web-two-o.html"&gt;Web 2.0 Explained&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;/li&gt;
 
 &lt;li&gt;&lt;a href="/root/resources/EBusiness/ebiz-labs.html"&gt;eBiz Labs&lt;/a&gt;&lt;/li&gt;
 
 &lt;li&gt;&lt;a href="/root/resources/EBusiness/about-us.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
 
 &lt;li&gt;&lt;a href="/root/resources/EBusiness/contact-us.html"&gt;Contact Us Contact Us Contact Us Contact Us&lt;/a&gt;&lt;/li&gt;
 
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;/span&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

This won't work in IE6 because IE can't handle li:hover events. You'll have to implement some javascript for that.

Fixes:

"Visibility:hidden" was causing the spacing issue. IE holds a space for invisible elements. I changed it to display: none & display: block; to make it work and correct the spacing.

Last line:

I took out the line-height and height assignments, and instead applied the appropriate padding to make each link uniform in height (27px).

Heading in the middle:

You didn't have a width specified, so it was centering relative to the page, rather than the block. Once I applied a width, text-align: center worked.

Oh - I suggest you create a background for the links (having nested <ul>) using the arrow, rather than using a block image. You can apply the background-position to right top, and that should take care of that.

KDLA

@absolutmgd13authorNov 14.2008 — #Thank you so much, and thanks for your input. Unfortunately i had to put this together without adding/removing new styles, i had to keep the exact same structure as it originally was, trust me if i could build this from scratch it would probably be like 1/3 of the amount of css there is now.

@absolutmgd13authorNov 14.2008 — #so sorry again! i cant beleive i forgot that one...

[upl-file uuid=1c5e0afc-1efa-4418-8352-4c20bc772bce size=536B]green-arrow.gif[/upl-file]

Also in #CSS _↴

Span/stretch Background Image to Screen Divs with 2 columns?body{width:100%; height:100%;}

Success!

Help @absolutmgd13 spread the word by sharing this article on Twitter...

Tweet This

Lineheight in CSS list

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Lineheight in CSS list

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴