convert list into table row using css

ive got the following code:

<table cellspacing="0" cellpadding="3" style="border: 1px solid #666666">
  <tr>
    <td align="center" class="border"><a target="_blank" href="a">joe schmoe wheels</a></td>
    <td align="center" class="border"><a target="_blank" href="b">free dogs</a></td>
    <td align="center" class="border"><a target="_blank" href="c">original windows cds</a></td>
    <td align="center" class="border"><a target="_blank" href="d">ad</a></td>
    <td align="center" class="border"><a target="_blank" href="e">fat abots bikes</a></td>
    <td align="center" class="border"><a target="_blank" href="f">door repairs</a></td>
    <td align="center" class="border"><a target="_blank" href="g">crooks anonymous</a></td>
  </tr>
  <tr>
    <td align="center" class="border"><a target="_blank" href="a"><img src="/images/adverts/a.jpg"></a></td>

    <td align="center" class="border"><a target="_blank" href="b"><img src="/images/adverts/b.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="c"><img src="/images/adverts/c.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="d"><img src="/images/adverts/d.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="e"><img src="/images/adverts/e.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="f"><img src="/images/adverts/f.jpg"></a></td>
    <td align="center" class="border"><a target="_blank" href="g"><img src="/images/adverts/g.jpg"></a></td>
  </tr>
</table>

its a table with ads, a 7x2 table which displays them very nicely (for my purpose).

now im transitioning to css because i love the way everything is structured, and that lists can be used with so much flexibility

i want to change that table into a list. exactly that table, not a compromise, i want a simple:

<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
..
..
..
</ul>

sort of list which displays like the table above.

i got somewhere with display:table-cell

but of course that dies in IE

so I need a solution that works in IE as well

thanks
LVL 7
maUruAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
You can use:
display:block; float:left.

Then make sure that you either give your ul a defined height, or add a clearing div below the </ul>:
<div style="clear:both;">

-r-
0
maUruAuthor Commented:
got some code?
0
maUruAuthor Commented:
also, i think a clearing div will break my site layout.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RoonaanCommented:
<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
..
..
..
</ul>

<style type="text/css">
ul {display:block;margin:0;padding:0;height:150px;}
li {display:block;margin:0;padding:0;float:left;
</style>

-r-
0
maUruAuthor Commented:
works good except for the fact i cant align it to the middle using margin-left / right or even center
0
RoonaanCommented:
You can if you set a width to the ul.

-r-
0
RoonaanCommented:
I mean:

ul {display:block;height:150px;width:600px;margin:0 auto;padding:0;}

-r-
0
maUruAuthor Commented:
nope aint working.
0
maUruAuthor Commented:
<head>
<style type="text/css">
 ul {display:block;height:150px;width:600px;margin: auto;padding:0;}
 li {width:80px;text-align:center;border: solid 1px #000;display:block;margin:0;padding:0;float:left;
</style>
</head>
<ul>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
  <li>joe schmoe wheels<br><img src="a.jpg"></li>
</ul>
0
maUruAuthor Commented:
misprint, thats a ;margin 0 auto; but still not working.
0
maUruAuthor Commented:
0
GranModCommented:
PAQed with points refunded (250)

GranMod
Community Support Moderator
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

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.