SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling a+a inside ordered lists

    I'm trying to do something for a company intranet but I'm having a small problem for their admin page. It uses ordered lists about three levels deep. For the admin page they want to have an "edit" link right after each section and subsection.

    I want to use an image replace for the edit link, but I can't set the second <a> to "display:block" and get it to sit behind the first link.

    HTML
    Code:
    <div id="documentNavigation" class="clearfix">
       <ol id="docNav">
          <li><a href="index.shtml">Introduction</a> <a href="#">edit</a>
             <ol>
                <li><a href="index.shtml#document-1.a">About this Awesome Company You've Chosen to Work For</a> <a href="#">edit</a>
                   <ol>
                      <li><a href="index.shtml#document-1.a.1">How We Work: The Creative Lowdown</a> <a href="#">edit</a></li>
                      <li><a href="index.shtml#document-1.a.2">How We Work: Process Overview</a> <a href="#">edit</a></li>
                   </ol>
                </li>
              </ol>
          </li>
       </ol>
    </div>
    CSS
    Code:
    #documentNavigation	{ float: right; margin: 10px 24px 0 12px; width: 300px; padding-top: 30px; }
    
    /* First Level List Styles */
    ol#docNav		{ }
    ol#docNav li			{ list-style: decimal; margin: 0 0 8px 22px; font: bold 11px georgia, times, serif; text-transform: uppercase; color: #4d5053; }
    ol#docNav li a			{ color: #4d5053; text-decoration: none;  }
    ol#docNav li a:hover	{ color: #111; }
    					
    /* Secondary List Styles */
    ol#docNav ol li			{ list-style: upper-alpha; margin: 4px 0 0 16px; font: normal 11px/14px "trebuchet ms", verdana, sans-serif; text-transform: none; }
    ol#docNav ol li a			{ color: #158ebb; }
    ol#docNav ol li a:hover		{ color: #26b5ea; text-decoration: none; }
    					
    /* Tertiary List Styles */
    ol#docNav ol li ol li	{ list-style: decimal; margin: 2px 0 0 24px; font-size: 10px; text-transform: lowercase; }
    ol#docNav ol li ol li a 		{ color: #4d5053; text-decoration: none; }
    ol#docNav ol li ol li a:hover	{ color: #111; }
    						
    /* Admin Edit Button Styles */
    #documentNavigation a+a			{ display: block; width: 25px; height: 11px; background: url(../_images/btn-admin-edit_sm.jpg) no-repeat; text-indent: -10000px; }
    #documentNavigation a+a:hover	{ width: 25px; height: 11px; background: url(../_images/btn-admin-edit_sm-hover.jpg) no-repeat; text-indent: -10000px; }

    Any help would be appreciated.
    Last edited by trampt; Feb 20, 2007 at 17:06.

  2. #2
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I got a work around .... in the a+a style I just added the padding I needed and then set the font-size to 0. Seems to have worked.

    Not sure if its compatible with IE ... thankfully since its an intranet it only has to work on FF and Safari.

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by trampt View Post
    thankfully since its an intranet it only has to work on FF and Safari.
    I'd kill for those conditions!
    Simon Pieters

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    If setting font-size to 0 solved the problem you may also find that overflow: hidden; would do the trick also - So nothing will burst out of the dimensions you set.

  5. #5
    SitePoint Wizard trampt's Avatar
    Join Date
    Jan 2003
    Location
    Los Angeles, CA
    Posts
    1,997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess that didn't work because safari doesn't handle zero for a font size.


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
  •