Problems viewing page in NS6+ - But looks fine in IE6 :)

A

admin

Administrator
Staff member
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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=http://www.webdeveloper.com/forum/archive/index.php/"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

DavidGo with the flow, all that position:absolute is unnecessary.
Forgot semi-colon on entities.
One fieldset one ledgend (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LEGEND">http://www.w3.org/TR/REC-html40/interac ... def-LEGEND</a><!-- m -->).
z-index, rarely needed. A unique number! You can give several elements the same z-index, but the browser will increment it to the next unused number.
Mozilla can not give a checkbox a border.
Mozilla will always begin the legend on the left of the fieldset.
These last two problems can be faked using divs, but why bother.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body
{
background-color: #D5FFFF;
background-repeat: repeat;
}
form
{
background-image: url("bg1.gif");
background-repeat: repeat;
height: 400px;
margin-left: 50px;
margin-top: 0px;
width: 450px;
}
#register
{
border: 2px ridge teal;
color: #009B9B;
height: 20px;
margin-top: 15px;
margin-left: 160px;
width: 100px;
}
#legendforTitle
{
color: #009B9B;
padding:5px;
}
.required_indicator
{
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #009B9B;
height: 20px;
margin-left: 50px;
width: 200px;
}
form div {
font-family: 'Administer Book', Serif;
font-size: 15px;
font-style: italic;
color: #000;
height: 20px;
margin-top:15px;
margin-left: 255px;
}
label {
color: #009B9B;
height: 20px;
margin-left: 50px;
width: 150px;
white-space:nowrap;
}
input {
border: 2px ridge teal;
color: #009B9B;
height: 20px;
width: 150px;
}
#firstName {
margin-left: 60px;
}
#lastName {
margin-left: 70px;
}
#emailAddress {
margin-left: 95px;
}
#newsletterBoolean {
padding-top:5px;
margin-left: 80px;
width:50px;
}
#postCode {
margin-left: 85px;
width:50px;
}
-->
</style>
<body>
<form name="registration_form" method="post" action="">
<fieldset>
<legend id="legendforTitle">Registration Details</legend>

<div>Required Field</div>
<label id="labelforfirstName" for="firstName">First name: ¤<input id="firstName" type="text" /></label>

<div>Optional Field</div>
<label id="labelforlastName" for="lastName">Last name: <input id="lastName" type="text" /></label>

<div>Required Field</div>
<label id="labelforemailAddress" for="emailAddress">Email: ¤<input id="emailAddress" type="text" /></label>

<div>Optional Field</div>
<label id="labelfornewsletterBoolean" for="newsletterBoolean">Send me the newsletter!<input id="newsletterBoolean" type="checkbox" value="checkbox" /></label>

<div>Optional Field</div>
<label id="labelforpostCode" for="postCode">Your Postcode (4 digits)<input id="postCode" type="text" maxlength="4" /></label>

<input id="register" type="submit" />
<p class="required_indicator">¤ indicates a required field.</p>
</fieldset>
</form>
</body>
</html>

maxlength="4" added to postCode.
I could not check the background image layout.
 
You must log in or register to reply here.
Back
Top