0

When I show a hidden div that is stored inside an <li> tag the icons are pushing down to the bottom of the <li>. How can I prevent this?

Here's the HTML:

<ul>
<li>Utah
   <ul>
      <li>Park City
         <ul>
             <li>Park Cat 1
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
             <li>Skiing
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
         </ul>
      </li>
   </ul>
</li>
</ul>

Here's the li css:

li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
.portf_edit{
float:right;
position: relative;
right:50px;
display:block;
}
.portf_archive{
float:right;
position: relative;
right:-5px;
display:block;
}
.portf_delete{
float:right;
position: relative;
right: -60px;
display:block;
}

Here's a screen shot prior to expanding which shows the icons how I want them to line up:

alt text http://www.redsandstech.com/css_layout_problem1.jpg

Here's the screen shot prior to expanding which shows where the icons are being pushed to:

alt text http://www.redsandstech.com/css_layout_problem2.jpg

2
  • Might need to post a bit of code. Mar 26, 2010 at 20:17
  • sorry, forgot to include...it's there now.
    – Ronedog
    Mar 26, 2010 at 20:23

2 Answers 2

1

If you're right-floating the EDIT/ARCHIVE/DELETE buttons, specify them BEFORE the text. Like this:

<li>
   <div><img class="edit" /></div>
   <div><img class="archive" /></div>
   <div><img class="delete" /></div>
   Park Cat 1
</li>

Also, you may need to specify a width on the LI; something like "100%".

2
  • I think the problem is more about the images shifting left rather than down, but this will be the next problem to surface. Mar 26, 2010 at 21:02
  • This fixed it without having to add the width. Thanks!
    – Ronedog
    Mar 26, 2010 at 21:10
1

You need to make the <li> as tall as your images.

<li class="with-icons">Skiing
    <div><img class="portf_edit" /></div>
    <div><img class="portf_archive" /></div>
    <div><img class="portf_delete" /></div>
</li>

and

li .with-icons {
    height: 32px; // adjust according to your image size
}

You may be able to omit the div around each image, too. Not sure they're necessary.

2
  • thanks for the reply. the div's have some onclick events I took out for simplicity in reading the code. The problem ended up being the order which I placed the divs. Thanks for your reply anyway.
    – Ronedog
    Mar 26, 2010 at 21:12
  • I had the right answer then I edited it away. Always trust your gut! Mar 26, 2010 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.