view messed up in IE but not mozilla

[code=]<div align = "left"

style="margin:20px;width:680px;border:5px

solid black;background:#282;padding:5px;

font-family: sans-serif;font-weight: bold;text-transform:capitalize">

<p style="background:white;">Attention: You are viewing the <font
color="crimson">Course Register</font><br>

This page lists all the course information that are currently in the
system<BR>

</div>

<BR>

<BR>

<div id="banner2">

    <table width="100%" cellpadding="5" cellspacing="0">

      <td>

        <b><%= @page_title || "Course Register" %><br />

        <%= @page_title || @discipline.name -%><br />

      </td>

    </table>

</div>

Users who use Internet Explorer will see a blank space here. Please
ignore this blank space and scroll down to look at the course details.

<table border="1" width = "230%">

    <tr>

      <TH rowspan="2">Course<BR>Code

      <TH colspan="5">Course<BR>Name

      <TH rowspan="2">Credit<BR>Unit

      <TH rowspan="2">First<BR>Presentation

      <TH rowspan="2">Jul 08

      <TH rowspan="2">Jan 09

      <TH rowspan="2">Jul 09

      <TH rowspan="2">Jan 10

      <TH rowspan="2">Jul 10

      <TH rowspan="2">Jan 11

      <TH rowspan="2">Jul 11

      <TH rowspan="2">Final<BR>Presentation

      <TH rowspan="2">Scheduled<BR>Review

      <TH rowspan="2">Pre-Requisite

      <TH rowspan="2">Excluded<BR>Combination

      <TH rowspan="2">Remarks

      <TH rowspan="2">Day

      <TH rowspan="2">Week

      <TH rowspan="2">Term

      <TH rowspan="2">Master<BR>Dev.

      <TH colspan="20">Course Outline

      <TH rowspan="2" colspan="2">Lab

      <TH rowspan="2">Grouping

    </tr>

<% @discipline.courses.each do |d| %>

  <tr>

  <tr>

    <td align="center"> <dt><%= link_to h(d.course_code), :controller
=>"admin", :action => "show", :id => h(d.id) %></dt>

    <td align="center" colspan="5"> <dt><%= d.course_name %></dt>

    <td align="center"> <dt><%= d.creditunit.cu %></dt>

    <td align="center"> <dt><%= d.pmonth.month %> <%= d.pyear.year
%></dt>

    <td align="center"> <dt><%= d.jul08 %></dt>

    <td align="center"> <dt><%= d.jan09 %></dt>

    <td align="center"> <dt><%= d.jul09 %></dt>

    <td align="center"> <dt><%= d.jan10 %></dt>

    <td align="center"> <dt><%= d.jul10 %></dt>

    <td align="center"> <dt><%= d.jan11 %></dt>

    <td align="center"> <dt><%= d.jul11 %></dt>

    <td align="center"> <dt><%= d.lmonth.month %> <%= d.lyear.year
%></dt>

    <td align="center"> <dt><%= d.smonth.month %> <%= d.syear.year
%></dt>

    <td align="center"> <dt><%= d.pre_requisite %></dt>

    <td align="center"> <dt><%= d.excluded_combination %></dt>

    <td align="center"> <dt><%= d.remark %></dt>

    <td align="center"> <dt><%= d.day.day%></dt>

    <td align="center"> <dt><%= d.week.week %></dt>

    <td align="center"> <dt><%= d.term.term %></dt>

    <td align="center"> <dt><%= d.masterdev.masterdev %></dt>

    <td align="center" colspan="20"> <dt><%= link_to h('Course
Outline'), :controller => "admin", :action => 'course_outline', :id =>
h(d.id) %></dt>

    <td align="center" colspan="2"> <dt><%= d.lab.lab%></dt>

    <td align="center"> <dt><%= d.grouping%></dt>

  </tr>

<% end %>

</table><br>

<table border="1">

<tr>

<td colspan="2">Compulsory fields that are blank in stored records
<Br>now have a default value.</td>

</tr>

<tr>

<td><strong>Field</strong></td>

<td><strong>Default Value</strong></td>

</tr>

<tr>

<td>Credit Unit:</td>

<td>5</td>

</tr>

<tr>

<td>First Presentation:</td>

<td>Jan 2000</td>

</tr>

<tr>

<td>Final Presentation:</td>

<td>Jan 2000</td>

</tr>

<tr>

<td>Scheduled Review:</td>

<td>Jan 2000</td>

</tr>

<tr>

<td>Master Dev.:</td>

<td>UNISIM</td>

</tr>

<tr>

<td>Lab:</td>

<td>Non-Lab</td>

</tr>

<tr>

<td>Weightage:(for each component)</td>

<td>20%</td>

</tr>

</table>[/code]
in mozilla this turns out fine, but in IE, there's a huge empty space
before the table!

can anyone tell me how to solve this problem?

[img]http://i263.photobucket.com/albums/ii159/jocelynkoshiya/mozilla.png[/img]

[img]http://i263.photobucket.com/albums/ii159/jocelynkoshiya/ie.jpg[/img]

You have a lot of problems with your closing tags. I see a <p> and a
<b> tag that are missing their closing tags, as well as <th> tags. A
lot of the <td> tags have </dt> closing tags instead of </td> closing
tags.

Here's a free tool you can use to check your HTML: http://validator.w3.org/

And here's a good HTML reference site: http://www.w3schools.com/html/default.asp

You might want to grab the Webdeveloper tool kit for Firefox and validate the page. This is not an issue with RoR but rather bad html. There is a plugin that when you view your source of the page in Firefox you can get the html validated and see where the issue is. Also with Firebug installed you can look over the DOM and see what is broken.

Hope this helps.

JW

Jason West wrote:

You might want to grab the Webdeveloper tool kit for Firefox and
validate
the page. This is not an issue with RoR but rather bad html. There is
a
plugin that when you view your source of the page in Firefox you can get
the
html validated and see where the issue is. Also with Firebug installed
you
can look over the DOM and see what is broken.

Hope this helps.

JW

oh.. but this looks fine in firefox,

it's in IE when it gets all messed up..
and this website is running on localhost, can i still use the validation
thing?

because i did try http://validator.w3.org/ but they couldn't validate
localhost pages

You’re using

to open the tag, and then to close it. Use lowercase tags for everything.

Use this: http://validator.w3.org/#validate_by_input

And input the source of your page.

Also a more correct table layout would be:

Header Cell!
Body Cell!

theres nothing wrong with the codes, but once the table's width gets too
wide and scrolls out of screen, IE just pushes the entire table down.