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
srozAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
edenmachineConnect With a Mentor Commented:
either get rid of the div tag altogether or try my table method.
0
 
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
 
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
 
srozAuthor Commented:
it works fine with table. Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.