view messed up in IE but not mozilla

rubyonrails-talk
1

[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\]

2

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: HTML Tutorial

3

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

4

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

5

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.

6

Also a more correct table layout would be:

Header Cell!
Body Cell!
7

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.