Solved

LI elements not on the same line

Posted on 2007-11-22
7
933 Views
Last Modified: 2013-11-19
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
Comment
Question by:sroz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 5

Expert Comment

by:rucky544
ID: 20335131
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
 

Author Comment

by:sroz
ID: 20335190
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
 
LVL 1

Expert Comment

by:edenmachine
ID: 20335678
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 5

Expert Comment

by:rucky544
ID: 20336170
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
 

Author Comment

by:sroz
ID: 20337829
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
 
LVL 1

Accepted Solution

by:
edenmachine earned 250 total points
ID: 20338942
either get rid of the div tag altogether or try my table method.
0
 

Author Closing Comment

by:sroz
ID: 31410578
it works fine with table. Thanks
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question