Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Huge difference in display between IE6 and NS6

Status
Not open for further replies.
JProg

JProg

Programmer
Apr 4, 2002
88
0
0
JP
Hello Everybody,

I am writing a web page that relies heavily upon CSS for page element positioning. When viewed in IE6 my code looks really good, however it looks like garbage in NS6. I have obviously overlooked some compatibility issues. If anybody can point out the code that is causing the compatibility issues it will be greatly appreciated. My code looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<title>Registration Page</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
body
{
background-color: #D5FFFF;
background-repeat: repeat;
}
form
{
background-image: url("bg1.gif");
background-repeat: repeat;
position: absolute;
height: 400px;
margin-left: 50px;
margin-top: 0px;
width: 450px;
z-index: 0;
}
#firstName
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 210px;
margin-top: 50px;
width: 150px;
z-index: 1;
}
#lastName
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 210px;
margin-top: 100px;
width: 150px;
z-index: 1;
}
#emailAddress
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 210px;
margin-top: 150px;
width: 150px;
z-index: 1;
}
#newsletterBoolean
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 310px;
margin-top: 200px;
width: 50px;
z-index: 1;
}
#postCode
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 310px;
margin-top: 250px;
width: 50px;
z-index: 1;
}
#register
{
border: 2px ridge teal;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 160px;
margin-top: 300px;
width: 100px;
z-index: 1;
}
#labelforfirstName
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 50px;
margin-top: 50px;
width: 150px;
z-index: 1;
}
#labelforlastName
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 50px;
margin-top: 100px;
width: 150px;
z-index: 1;
}
#labelforemailAddress
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 50px;
margin-top: 150px;
width: 150px;
z-index: 1;
}
#labelfornewsletterBoolean
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 50px;
margin-top: 200px;
width: 200px;
z-index: 1;
}
#labelforPostCode
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 50px;
margin-top: 250px;
width: 200px;
z-index: 1;
}
#legendforTitle
{
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 120px;
margin-top: 5px;
width: 200px;
z-index: 2;
}
#legendforfirstName
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #404000;
position: absolute;
height: 10px;
margin-left: 210px;
margin-top: 30px;
width: 100px;
z-index: 2;
}
#legendforlastName
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #404000;
position: absolute;
height: 20px;
margin-left: 210px;
margin-top: 80px;
width: 200px;
z-index: 2;
}
#legendforemailAddress
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #404000;
position: absolute;
height: 20px;
margin-left: 210px;
margin-top: 130px;
width: 200px;
z-index: 2;
}
#legendfornewsletterBoolean
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #404000;
position: absolute;
height: 20px;
margin-left: 280px;
margin-top: 180px;
width: 200px;
z-index: 2;
}
#legendforpostCode
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #404000;
position: absolute;
height: 20px;
margin-left: 280px;
margin-top: 230px;
width: 200px;
z-index: 2;
}
.required_indicator
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #009B9B;
position: absolute;
height: 20px;
margin-left: 120px;
margin-top: 320px;
width: 200px;
z-index: 2;
}
/*]]>*/-->
</style>
<body>
<form name="registration_form" method="post" action="">
<fieldset>

<legend id="legendforTitle">Registration Details</legend>

<legend id="legendforfirstName">Required Field</legend>

<label id="labelforfirstName" for="firstName">First name: &#164</label>

<input id="firstName" type="text" />

<legend id="legendforlastName">Optional Field</legend>

<label id="labelforlastName" for="lastName">Last name: </label>

<input id="lastName" type="text" />

<legend id="legendforemailAddress">Required Field</legend>

<label id="labelforemailAddress" for="emailAddress">Email: &#164</label>

<input id="emailAddress" type="text" />

<legend id="legendfornewsletterBoolean">Optional Field</legend>

<label id="labelfornewsletterBoolean" for="newsletterBoolean">Send me the newsletter!</label>

<input id="newsletterBoolean" type="checkbox" value="checkbox" />

<legend id="legendforpostCode">Optional Field</legend>

<label id="labelforpostCode" for="postCode">Your Postcode (4 digits)</label>

<input id="postCode" type="text" />

<input id="register" type="submit" />
</fieldset>
</form>
<br />
<span class="required_indicator">&#164 indicates a required field.</span>
</body>
</html>

Thanks for your help.

Regards

David
 
Sort by date Sort by votes

If you change the "margin-top" and "margin-left" styles for "top" and "left", most things come back into place, but just need a few more tweaks.

Using margins to position elements isn't the best way of doing things, IMHO.

Hope this helps,
Dan
 
Upvote 0 Downvote
Some other things:

- LEGEND tag is allowed only as first element in a FIELDSET
- absolute positioning confuses FIELDSET in Moz... not sure is it a bug or feature

Plus absolute positioning and lotsa CSS ID's isn't the way to do it... IMHO.
 
Upvote 0 Downvote
Also, you have your <style>tags outside your <head></head> tags. I think the style tag needs to be inside the head tags.

Paul
 
Upvote 0 Downvote
Also, Netscape 6 uses an old, buggy version of the Gecko rendering engine, and is rarely used nowadays. Have you tried on Netscape 7.2 or Mozilla?

News and views of some obscure guy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
216
spamjim
spamjim
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
171
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
66
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
321
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
216
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top