ordered list won't display correctly?

link to image

The ordered list is supposed to look like this: link

EDIT: Weird, the code won't display properly here...

<table width="1098">  <tr>
<td width="479" height="147"><img src="NYPLogo.png" width="459" height="100" /></td>
<td width="29" id = "name">Products</td>
<td width="574开发者_运维问答">&nbsp;</td></tr>  <tr>
<td>&nbsp;</td>
<td colspan="2"><div id = "words">Announcements<br />
  <br />
  GSM Registrration Round 1 : xx-Apr-2011 to xx-Apr-2011<br />
  <br />
GSM Registration Round 2: xx-Apr-2011 to xx-Apr-2011<br />
<br />
<ul id = "courselist">
<li><img src = "NYPLogo.png" alt = "" width= "200" height="44" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200" height="43" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200" height="41" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200"  /></li>
</ul>
</div>      
  <p><br />
</p></td> </tr></table>

Try setting the li to display:inline; like so:

#courselist li{
 display:inline;  
}

That way they appear next to each other instead of on new lines.

The last image has no specified height? I assume you want the images to line up?

Instead of using a table to get the 3x2 layout, try floating div blocks:

    <style>
     .box{ float:left; height:100px; width:100px;
    </style>
    <div class=box>box 1</div>
    <div class=box>box 2</div>
    <div class=box>box 3</div>
      <br>
    <div class=box>box 4</div>
    <div class=box>box 5</div>
    <div class=box>box 6</div>
>/pre<

display: inline; will ignore width and height variables. You have to use display: inline-block; instead.

I created a quick fiddle for you. You will get the idea. http://jsfiddle.net/hobobne/gq9e8/