?
Solved

I need help to display list inline

Posted on 2009-04-03
2
Medium Priority
?
833 Views
Last Modified: 2013-11-19
I try to put some list inline, 4 colum max and multirow, I can't use float attribute cause some short list to regroup on the top of each other , display: inline-table seems to work for firefox but it's doesnt ie6 and 7.

Can someone help ?
thx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.global{
	display:block;
	width:768px
	}
	
.row ul{
	display: inline-table;
     
	}
	
</style>
</head>
 
<body>
<div class="global">
	<div class="row">
        <ul>
          <li>firstlistelement1</li>
          <li>firstlistelement2</li>
          <li>firstlistelement3</li>
          <li>firstlistelement4</li>
          <li>firstlistelement5</li>
          <li>firstlistelement6</li>
        </ul>
        <ul>
          <li>secondlistelement1</li>
          <li>secondlistelement2</li>
          <li>secondlistelement3</li>
        </ul>
        <ul>
          <li>thirdlistelement1</li>
          <li>thirdlistelement2</li>
          <li>thirdlistelement3</li>
          <li>thirdlistelement4</li>
        </ul>
        <ul>
          <li>fourthlistelement1</li>
          <li>fourthlistelement2</li>
          <li>fourthlistelement3</li>
          <li>fourthlistelement4</li>
          <li>fourthlistelement5</li>
          <li>fourthlistelement6</li>
          <li>fourthlistelement7</li>
          <li>fourthlistelement8</li>
        </ul>
	</div>
    	<div class="row">
        <ul>
          <li>firstlistelement1</li>
          <li>firstlistelement2</li>
          <li>firstlistelement3</li>
          <li>firstlistelement4</li>
          <li>firstlistelement5</li>
          <li>firstlistelement6</li>
        </ul>
        <ul>
          <li>secondlistelement1</li>
          <li>secondlistelement2</li>
          <li>secondlistelement3</li>
        </ul>
        <ul>
          <li>thirdlistelement1</li>
          <li>thirdlistelement2</li>
          <li>thirdlistelement3</li>
          <li>thirdlistelement4</li>
        </ul>
        <ul>
          <li>fourthlistelement1</li>
          <li>fourthlistelement2</li>
          <li>fourthlistelement3</li>
          <li>fourthlistelement4</li>
          <li>fourthlistelement5</li>
          <li>fourthlistelement6</li>
          <li>fourthlistelement7</li>
          <li>fourthlistelement8</li>
        </ul>
	</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:untime
[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
2 Comments
 
LVL 5

Expert Comment

by:Pantalaim0n
ID: 24063337
And what about using floats anyway, and after every 4th row, insert a


<div style="clear:both;"></div>

Open in new window

0
 
LVL 13

Accepted Solution

by:
myderrick earned 1500 total points
ID: 24065990
The problem is simply that IE does not recognise display: inline-table

Try inline-block BUT after it has been set to display:inline-block, you overwrite the rule with a second rule to display:inline - and it will do

NOTE:
In IE 6 and 7 inline-block works only on elements that have a natural display: inline


Options and additional reads:
http://www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css/
http://www.quirksmode.org/css/display.html
http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm

MD
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

771 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