Solved

I need help to display list inline

Posted on 2009-04-03
2
830 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 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 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