Solved

IE/NN difference

Posted on 2000-04-13
16
282 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
Comment Utility
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
Netscape crashed!
0
 
LVL 3

Expert Comment

by:hagur
Comment Utility
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
 
LVL 3

Expert Comment

by:messentary
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I'm still blaming the style tags in the <div> tags.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:jdaues
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

744 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now