SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Icons in left nav not centering

    Hello,

    I'm trying to the icons in my left navigation menu to center vertically, but I just can't do it. The site is: http://www.bigiowa.com/design/

    The HTML is as follows:

    HTML Code:
            <dl class="leftnav">
              <dt><a href="/design/"><img src="img/icons/home.png" />Home</a></dt>
    		  <dt><a href="/history/"><img src="img/icons/notepad.png" />History Project</a></dt>
              <dt><a href="/forum/"><img src="img/icons/user_comment.png" />Forum</a></dt>	
              <dt><a href="/about/"><img src="img/icons/information.png" />About</a></dt>
            </dl>
    and the CSS is:

    HTML Code:
    /* LEFT NAVIGATION */
    .leftnav {width:199px; border-bottom:solid 1px rgb(200,200,200); vertical-align:middle;}
    .leftnav dt img {border:none; vertical-align:middle; }
    .leftnav dt a, .leftnav dt a:visited {display:block; min-height:2.1em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.1em; padding:0px 10px 0px 15px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:#336399; font-weight:bold; font-size:120%; vertical-align:middle}
    .leftnav dd a, .leftnav dd a:visited {display:block; min-height:1.6em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.6em; padding:0px 10px 0px 30px; border:none; font-weight:normal; text-decoration:none; color:#336399; font-size:120%;}
    .leftnav dt a:hover, .leftnav dd a:hover {background-color:#E6F0C1; color:#336399; text-decoration:none;}
    Any idea what I'm doing wrong? I thought this line would take care of it:

    HTML Code:
    .leftnav dt img {border:none; vertical-align:middle; }

  2. #2
    SitePoint Zealot trickyjw's Avatar
    Join Date
    Nov 2006
    Location
    Melbourne, Australia
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They appear ok to me. I'm viewing the site in IE6. Is the problem happening in a particular browser?

  3. #3
    SitePoint Addict caser85's Avatar
    Join Date
    May 2002
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I should have mentioned it's happening in Firefox 2.0.0.3.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try setting the line-height to the same as the height. Why are you using a definition list though? You've got no <dd>s in your menu. With your structure, you'd be better using an unordered list.


Bookmarks

Posting Permissions

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