• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 948
  • Last Modified:

LI elements not on the same line

HI,

I wrote an ul li list. In the li tag, I out 2 img and 1 div. Div contains text with style="WHITE-SPACE: nowrap".
When I load it, on firefox evreything is ok, for each line, I see the 2 images and the texte.
On internet explorer, I see the 2 images and below the text.

Is there a solution, to see them on the same line ?

An example of my list :
<ul id="tree" style="display: block;">
  <li id="1" class="tree_node">
    <img id="icone_1" src="http:.../img1.gif">
    <img id="gadget_1" src="http:.../img2.gif">
    <div class="tree_text">Title 1</div>
    <ul id="sub_1" style="display:none">
      <li id="2" class="tree_node">
        <img id="icone_2" src="http:.../img1.gif">
        <img id="gadget_2" src="http:.../img2.gif">
        <div class="tree_text">Title 2</div>
        <ul id="sub_2" style="display:none">
          <li id="3" class="tree_node">
            <img id="icone_3" src="http:.../img1.gif">
            <img id="gadget_3" src="http:.../img2.gif">
            <div class="tree_text">Title 3</div>
            <ul id="sub_3" style="display:none">
              <li id="4" class="tree_node">
                <img id="icone_4" src="http:.../img1.gif">
                <img id="gadget_4" src="http:.../img2.gif">
                <div class="tree_text">Title 4</div>
                <ul id="sub_4" style="display:none">
                  <li id="5" class="tree_node">
                    <img id="icone_5" src="http:.../img1.gif">
                    <img id="gadget_5" src="http:.../img2.gif">
                    <div class="tree_text">Tilte 5</div>
                    <ul id="sub_5" style="display:none">
                      <li id="6" class="tree_node">
                        <img id="icone_6" src="http:.../img3.gif">
                        <div class="tree_text">Modalité d'adhésion</div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Thanks

sroz
0
sroz
Asked:
sroz
  • 3
  • 2
  • 2
1 Solution
 
rucky544Commented:
try using <span class="tree_text">Title 1</span>
instead of <div class="tree_text">Title 1</div>

Span is an inline element and div is a block element.
0
 
srozAuthor Commented:
I tried this. Now I have the same problem with ie and firefox. If the text is larger than panel, text is below images.
And now I get list where li of the same ul seem to be li of previous li.
0
 
edenmachineCommented:
what does the class "tree_text" include?  Please post that code from your stylesheet code.

Alternatively - you can always use tables to insure the format is correct:

<li id="2" class="tree_node">
        <table>
               <tr>
                   <td><img id="icone_2" src="http:.../img1.gif"></td>
                   <td><img id="gadget_2" src="http:.../img2.gif"></td>
                   <td><div class="tree_text">Title 2</div></td>
               </tr>
        </table>

This will work 100% of the time but it's not the most optimal.  Div's will always wrap if unless you specifically tell them not to by using style="float:left;" or something to that effect depending on your layout.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
rucky544Commented:
if you want the text to not go underneath then you are going to have to float the images to the left. This will allow the text to align with the top of the images.
0
 
srozAuthor Commented:
I use these styles :

.tree_text
{
    CURSOR: pointer;
    PADDING-TOP: 3px;
    HEIGHT: 15px;
    WHITE-SPACE: nowrap;
}
.tree_img
{
    FLOAT: left;
    display:in-line;
}

tree_img is used on tag img
0
 
edenmachineCommented:
either get rid of the div tag altogether or try my table method.
0
 
srozAuthor Commented:
it works fine with table. Thanks
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now