Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

IE/NN difference

Posted on 2000-04-13
16
304 Views
Last Modified: 2010-04-09
this html looks good in IE, but not so good in NN
what does NN require?

<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<div id="loginInfoDiv" style="position: absolute; left: 228px; top: 211px; width: 240px; height: 77px; z-index: 2">

  <table id="loginInfoTable" border=3 bgcolor="#FFFFFF" cellspacing=3 cellpadding=1 width=242 mm_noconvert="TRUE">
    <tr>
      <td width=100 height=35>
        <p><b><span style="color: rgb(153,102,51);"> &nbsp;User Name:</span></b></p>
      </td>
      <td width=100 height=35>
        <p>
          <form>
            <input id="userIdField" type=TEXT name="userIdField" value="" size=13 maxlength=13>
          </form>
        </p>
      </td>
    </tr>
    <tr>
      <td width=100 height=37>
        <p><b><span style="color: rgb(153,102,51);">&nbsp;Password:</span></b></p>
      </td>
      <td width=100>
        <p>
          <form>
            <input id="passwordField" type=TEXT name="passwordField" value="" size=13 maxlength=13>
          </form>
        </p>
      </td>
    </tr>
  </table>

  </div>
<div id="Layer3" style="position: absolute; left: 457px; top: 411px; width: 252px; height: 80px; z-index: 3">
  <p><a href="forgotPassword.htm" target="_top"><font face="arial, sans-serif" size=2>Forgot
    Your Password?</font></a><br>
    <a href="problemsSigningIn.htm" target="_top"><font face="arial, sans-serif" size=2>Problems
    Signing In?</font></a></p>
  <p>
  <form>
    <input type="radio" name="remember" value="no" checked>
    <font face="arial, sans-serif" size=2>Remember My User Name & Password</font></p>
  </form>
</div>
<div id="Layer4" style="position: absolute; left: 250; top: 524px; width: 200; height: 16px; z-index: 4; line-height: 16px">
  <p align="center"><a href="privacy.htm" target="_top"><font face="arial, sans-serif" size=2><c>      
    Privacy Statement </c></font></a>
</div>

</body>
</html>
0
Comment
Question by:jdaues
  • 4
  • 4
  • 2
  • +5
16 Comments
 
LVL 5

Expert Comment

by:compmania
ID: 2714299
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2715190
Netscape crashed!
0
 
LVL 3

Expert Comment

by:hagur
ID: 2715520
I tried this in Netscape and it crashed too!

I think it must be the stylesheets, I didn't see anything else that could cause this behaviour.



0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 3

Expert Comment

by:messentary
ID: 2715588
I'm going to have to place the blame on the styles in the <div> tags.  IE is great at handling styles, however NN is very limited as to the styles it can and/or will support.  It's not the NN is really crashing, it is that once NN gets to a point where is doesn't understand code, it tends to start "giving up"
0
 
LVL 2

Expert Comment

by:burntout
ID: 2715695
the netmechanic.com link worked with my netscape...

What doesn't look so good in netscape?  Sometimes I have problems with table widths not looking the same with IE and NN I usually set the with to a percent to help.  witdh="90%" this is also good if the user has a different resolution then you.
0
 
LVL 5

Expert Comment

by:compmania
ID: 2716294
No, you give the location of the HTML file at www.netmechanic.com and it tells you what tags to change.
0
 

Author Comment

by:jdaues
ID: 2716348
i cleaned up the code per the netmechanic suggestions, and it looks like this:

<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<div id="loginInfoDiv" style="position: absolute; left: 228px; top: 211px; width: 240px; height: 77px; z-index: 2">

  <table id="loginInfoTable" border=3 bgcolor="#FFFFFF" cellspacing=3 cellpadding=1 width=242 >
    <tr>
      <td width=100 height=35>
        <p><b><span style="color: rgb(153,102,51);"> &nbsp;User Name:</span></b></p>
      </td>
      <td width=100 height=35>
        <p>
          <form>
            <input type=TEXT name="userIdField" size=13 maxlength=13>
          </form>
        </p>
      </td>
    </tr>
    <tr>
      <td width=100 height=37>
        <p><b><span style="color: rgb(153,102,51);">&nbsp;Password:</span></b></p>
      </td>
      <td width=100>
        <p>
          <form>
            <input type=password name="passwordField" size=13 maxlength=13>
          </form>
        </p>
      </td>
    </tr>
  </table>

  </div>
<div id="Layer3" style="position: absolute; left: 457px; top: 411px; width: 252px; height: 80px; z-index: 3">
  <p><a href="forgotPassword.htm" target="_top"><font face="arial, sans-serif" size=2>Forgot
    Your Password?</font></a><br>
    <a href="problemsSigningIn.htm" target="_top"><font face="arial, sans-serif" size=2>Problems
    Signing In?</font></a></p>
  <form>
  <p>
    <input type="radio" name="remember" value="no" checked>
    <font face="arial, sans-serif" size=2>Remember My User Name & Password</font></p>
  </form>
</div>
<div id="Layer4" style="position: absolute; left: 250; top: 524px; width: 200; height: 16px; z-index: 4; line-height: 16px">
  <p align="center"><a href="privacy.htm" target="_top"><font face="arial, sans-serif" size=2>      
    Privacy Statement</font></a>
</div>

</body>
</html>


it still exhibits the same problem, though.
the problem is that in NN the tables are not positioned correctly (they appear left-justified)
0
 
LVL 3

Expert Comment

by:messentary
ID: 2716388
I'm still blaming the style tags in the <div> tags.
0
 

Author Comment

by:jdaues
ID: 2716527
messentary,
so what to do about the <div> tags?
get rid of them and figure out another way to do it?
0
 
LVL 3

Expert Comment

by:messentary
ID: 2716582
You can just get rid of the styles.  All the absolute positionsing is going to be done with the use of the tables anyways.  Give it a try, (I would but I don't have NN here at work).  It should work.  Most of the problems I have encountered in the past with Netscape and IE was because of the styles.  
0
 

Author Comment

by:jdaues
ID: 2716689
messentary,
so what to do about the <div> tags?
get rid of them and figure out another way to do it?
0
 
LVL 3

Accepted Solution

by:
messentary earned 50 total points
ID: 2716712
No, keep the div tags, but don't use any styles within them.  The code would be <div>All the table codes</div>
0
 

Expert Comment

by:drew_moffat
ID: 2717233
In line style sheets are unique to IE only, and will not display on Netscape, unless you declare them globally at the top of the code.

<http://webdeveloper.internet.com/html/html_css_2.html>

Kinda explains the limitations...looks to me as if you don't need the css at all.  Try to define all those elements in the body tag.

Let me know if this helps.

Drew
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2730125
Communicator 4.7, NT4sp5 crashed.

Since this is the HTML forum, lets pick the code apart.

It's a sad combination of presentational and not-so-presentational markup, probably created by Dreamweaver (I spot the 'mm_').  First rule for making things work is: Make sure your code is good.

1: <body bgcolor="#ffffff"> if you define one of those colors, define them all so they won't clash with user preferences.

2: <p><b><span ... > unecessary, apply the style directly to the paragraph, and add 'font-weight:bold;' so you get the '<b>' in there too.

3: the paragraph and the form is incorrectly nested, should be the other way around (<form><p>).  paragrahps can't contain block level elements (it implies a </p>).  besides, FORM elements aren't allowed inside table cells, so remove one of the forms and wrap the table inside the form.

4: the two FONT elements are redundant.  you're using CSS for other things, so use it for everything.  apply the style attribute to the paragraph, and dump the font properties there. <p style="font-family:Arial,Helvetica,sans-serif;font-size:75%;">

5: what's that C element?

anyway, it's the first table/layer/div that crashes Netscape.  more specifically, the second input field (shouldn't it be of type "password" btw?), once you wrap the paragraph around it Netscape crashes (don't know exactly why).

I'm also curious as to why the div/layer containing the first table has a width of 240px, while the table itself is set to 242 pixels.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2730450
I just did a few things with the source code you supplied. And the difficulty that it crashed seems to be in the <p> and </p> around the form tags. if you get rid of those netscape won't crash.

Netscape doesn't WANT the style=".." in it's <div>, itm wants it's coordinates in the tag itself like:
left=457 top=... etc etc.

Hope that helped
0
 

Author Comment

by:jdaues
ID: 2732482
Indeed, it was originally generated in Dreamweaver.  DW puts the style=".." in its div and also creates the <span...>.  I'll play around with the suggestions here and get back...

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 55
need to fire confirm() popup window in IE using VBA 2 22
Asp in script 6 37
Need HTML output in powershell line by line 3 27
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question