Link to home
Start Free TrialLog in
Avatar of Brett081597
Brett081597

asked on

Use of templates...Netscape vs. IE

Can someone tell me why this page won't display correctly in Netscape but every other page will.  Every page uses a templete with fixed width cells....

http://www.nasaga.org/nasaga00/proposals.htm

Everything looks fine in IE.  I'm using Netscape 4.06

Please help, the points are high...

Brett
brett@brettatkin.com
Avatar of davlun20080
davlun20080

Well as near as I can tell, you are getting problem in both IE and NS, and I think the problem is stemming from your combined use of declared and percentage widths in your tables.  

If I remember correcly, IE takes percentages of its parent or in this case the table and NS takes percentages from the it's parent, in this case the body.  Different DOM's so different approaches.  

Since you have an editable region called asp, I will assume at some point that you want to have integration with asp and will build something for you later today that will hold your content and avoid the resize problems.  From the size of your table, I will assume you are targetting the browser width of 800x600.

davlun
Try this code instead of what you have, you may find this works better on all of your pages. To make into a template, add the editable regions as needed.

The problem with some of your pages not all of them stems from the fact that only certain pages contain elements that extend beyond the space allocated to it by the browser.

davlun

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a:hover {color:red}
a:link {font-weight:bold}
a:visited {font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="#FF0000">
<table width="769" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="transparent.gif" width="8" height="1"></td>
    <td><img src="transparent.gif" width="154" height="1"></td>
    <td rowspan="4" bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
    <td><img src="transparent.gif" width="18" height="1"></td>
    <td><img src="transparent.gif" width="569" height="1"></td>
    <td><img src="transparent.gif" width="18" height="1"></td>
    <td rowspan="4" bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td rowspan="3" valign="top" bgcolor="#CCCC33">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr align="center" valign="top">
          <td><img src="images/xword.gif" width="73" height="73"></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="members/memdirectory.asp">Member
            Directory</a></font></b></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="become_member.htm">Become
            A Member</a></font></b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b><a href="resources.htm">Resources</a></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="simages.htm">SIMAGES</a></font></b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="events.htm">
            </a></font><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="nasaga00/conference.htm">The
            Conference</a></font></b></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></b></font><font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="history.htm">Our
            History</a></font></b></font></b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="feedback.htm">Your
            Feedback</a></font></b></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="contact_us.htm">Contact
            Us</a></font></b></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></b></font></td>
        </tr>
        <tr align="center">
          <td height="30"> <font color="#6666FF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="default.htm">Home</a></font></b></font></td>
        </tr>
      </table>
    </td>
    <td align="center">&nbsp;</td>
    <td align="center"><a href="http://www.powerquotes.net" target="_blank"><img src="images/ban1power.gif" width="468" height="60" border="0" alt="Powerquotes"></a></td>
    <td><img src="transparent.gif" width="18" height="80"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td colspan="3">
      <hr width="100%" noshade size="1">
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><br>
      Submit your proposal now - share your work - help others learn as you learn
      - receive feedback on your simulation/game - network with other professionals
      - market your business - and have fun too! <br>
      <br>
      Help propel NASAGA into the 21st century of learning with your expertise!
      Make our journey in Minneapolis this October an "out of this world" learning
      experience. We are especially interested in e-mail or web-based simulations
      and games. Submit your proposal now by completing the form below. It will
      be emailed directly to the Conference Chair for review. You can also download
      a zipped MS Word version to be completed and snail mailed. <br>
    </td>
    <td><img src="transparent.gif" width="1" height="300"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td valign="top" bgcolor="#CCCC33">&nbsp;</td>
    <td bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
    <td>&nbsp;</td>
    <td height="25"> All Fields are required. The deadline for submission is June
      15th. </td>
    <td>&nbsp;</td>
    <td bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td valign="top" bgcolor="#CCCC33">&nbsp;</td>
    <td bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
    <td>&nbsp;</td>
    <td valign="top">
      <form method="post" action="proposals_confirm.asp">
        <table border="0" cellspacing="8" cellpadding="0">
          <tr align="left" valign="top">
            <td><img src="transparent.gif" width="124" height="1"></td>
            <td><img src="transparent.gif" width="421" height="1"></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">First
              Name</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="firstname" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Last
              Name</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="lastname" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Email</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="email" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Address</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <textarea name="address" cols="40" rows="3"></textarea>
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">City</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="city" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">State</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="state" size="20">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Zip
              Code</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="zipcode" size="20">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Country</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="country" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Telephone</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="telephone" size="30">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b></b></td>
            <td>&nbsp;</td>
          </tr>
          <tr align="left" valign="top">
            <td colspan="2">
              <div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Presentation
                Information</font></b></div>
            </td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Title</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <input type="text" name="title" size="40">
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Content
              Area</font></b></td>
            <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <textarea name="content" cols="40" rows="5"></textarea>
              <br>
              (Such as Leadership Development, Undergraduate Political Science,
              Cross Cultural Awareness, ect...)</font><br>
              <br>
            </td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Type</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <select name="type">
                <option value="Simulation">Simulation</option>
                <option value="Game">Game</option>
                <option value="Roleplay">Roleplay</option>
                <option value="Icebreaker">Icebreaker</option>
                <option value="Email Game/Simulation">Email Game/Simulation</option>
                <option value="Web Based Game/Simulation">Web Based Game/Simulation</option>
                <option value="Other">Other</option>
              </select>
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Format</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <select name="format">
                <option value="Regular 90 minute concurrent session">Regular 90
                minute concurrent session</option>
                <option value="Half-day Pre-Conference workshop">Half-day Pre-Conference
                workshop</option>
              </select>
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Session
              Description</font></b></td>
            <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <textarea name="description" cols="40" rows="5"></textarea>
              <br>
              (100 word summary that can sell you session by stressing its key
              design features, benefits and link to the conference theme)</font><br>
              <br>
            </td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Focus</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <select name="focus">
                <option value="Design">Design</option>
                <option value="Delivery">Delivery</option>
                <option value="Evaluation">Evaluation</option>
                <option value="Other">Other</option>
              </select>
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Audience</font></b></td>
            <td> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <select name="audience">
                <option value="Beginner">Beginner</option>
                <option value="Advanced">Advanced</option>
                <option value="Beginner/Advanced">Beginner/Advanced</option>
              </select>
              </font></td>
          </tr>
          <tr align="left" valign="top">
            <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Other
              Info</b></font></td>
            <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
              <textarea name="other" cols="40" rows="5"></textarea>
              <br>
              Please explain any fields marked as other)<br>
              <br>
              </font></td>
          </tr>
          <tr align="center" valign="top">
            <td colspan="2">
              <input type="submit" name="Submit" value="Submit">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="reset" name="Submit2" value="Reset">
            </td>
          </tr>
        </table>
      </form>
    </td>
    <td>&nbsp;</td>
    <td bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33"><img src="transparent.gif" width="1" height="1"></td>
    <td bgcolor="#CCCC33"><img src="transparent.gif" width="1" height="1"></td>
    <td colspan="5" bgcolor="#000000"><img src="transparent.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td colspan="5" bgcolor="#FFFFFF">
      <p align="center"><br>
        <!-- Start of Recommend-It Code * Do not modify --> <a href=http://www.recommend-it.com/p.e?576585   onClick="window.open('http://www.recommend-it.com/p.e?576585', 'RIC','width=400,height=530,resizable=yes');return false;">
        <img src="http://graphic.recommend-it.com/smallbut3orange.gif" border=0></a>
        <!-- End of Recommend-It Code * Do not modify --> </p>
      <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Toll
        Free 888-432-GAME (U.S. Only)<br>
        Phone 317-387-1424 (Outside U.S.)<br>
        Fax 317-387-1921<br>
        <br>
        <a href="mailto:info@nasaga.org">info@nasaga.org</a> <br>
        P.O. Box 78636 Indianapolis, IN 46278 <br>
        </font></p>
      <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Copyright
        ) 2000 NASAGA, Inc. All rights reserved. </font></p>
      <p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><a href="../privacy.htm"><font size="1">Privacy
        Policy</font></a></font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
        </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> </font></p>
    </td>
  </tr>
  <tr>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td bgcolor="#CCCC33">&nbsp;</td>
    <td bgcolor="#FFFFFF"><img src="transparent.gif" width="1" height="1"></td>
    <td>&nbsp;</td>
    <td>
      <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font size="1">Site
        Design by <a href="http://www.theboundary.com">theboundary.com</a> using
        </font></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Macromedia
        Dreamweaver</font> </div>
    </td>
    <td>&nbsp;</td>
    <td><img src="transparent.gif" width="1" height="1"></td>
  </tr>
</table>
</body>
</html>
Avatar of Brett081597

ASKER

Can you explain to me what you did here with your code?  Did you using layers to position the elements and then convert to tables?

What's with all the spacier gifs?

Thanks

Brett
I did a number of things to your original code, but the basic setup I  hand-coded.  Since this table was fairly simple, it was not hard to do in DW using the html preview.  If you want to take the time to drop everything in it own layer, you can also use the convert to layers function, BUT this will give you one big table unless you add the nested table after you have already converted the main table. If you let DW build for you, use column widths and heights, that is how it makes the conversions.  

Since I did not comment as I go (my fault on that one) I will remember  as best I can and then see if that is enought to point you in the right direction.  Just came home from working another 13 hour day, not counting the commute.

First, I changed your main table into a fixed width table of 769 so that it will fit a common target of 800x600 browsers.  Then using the spacers (not column width's) set up the width of the columns to total 769.  I use spacers because the width of a cell in a column is determined by the widest cell, in this case the spacer row.  I do the same thing for row heights in most cases since the tallest cell in a row will determine the height for the whole row.  Where exact spacing is not required, I may use a row height.

Second, placed your nested table in the large column I created in your table, and sized that table to fit within that cell, then sized the columns using another set of spacers for that table.

Then I set up the small rows to serve as borders, sized them with 1x1 clear gif's so they would collapse all the way down to 1 pixel and colored them gray, similar to what you had done.

Then when I looked at your form, the nested table was blowing out in both IE and NS still, so I looked at the nested table part, everything else should have been fine at that point unless something in the form was blowing it out.  Turns out, needed to shorten all of the form elements to get them to fit into their assigned space (don't count on DW preview window for this, size and check against an actual browser during your coding, DW is good but not that good).

Lastly, since I am now using clear spacer for setting row heights (where needed) and column widths, I removed as many of those tags as possible so they would not conflict with anything else I had put in.

BOTTOM LINE: Did the code I give you solve your problem when you put in the server, really am curious on this one.

Let me know if you have any other questions,
davlun
Forgot one thing, if you want to get your comments on your text areas right up against your box, when you are finally finished coding your page, open up the file in Notepad or Homesite and put that entire cell on one long line, with no extra whitespace.  This should eliminate the space between the two.  Since I was using DW, the minute I went back to the preview window, it split the line into several so it could wrap in the html preview and then the space was back.

davlun
Adjusted points from 200 to 500
Thanks for all the time you put into this.  Take a look at the pages now, are they still giving you problems???

After looking over the code you wrote and your comment on %'s and fixed widths, I changed everything to fixed widths and it appears to have fixed the problems, at least on my two browers.

How's it look on your end?

Brett
After looking at this from my work system, I think I would add a row height to the rows around your form elements.  In NS here at work, the form elements are right on top of each other, but it does look ok in IE.  The row height will not affect the layout, for width, but will give you a more appropriate spacing.  If you use DW for this, remember to close up the space below your text areas again.

Glad to help,
davlun
ASKER CERTIFIED SOLUTION
Avatar of davlun20080
davlun20080

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial