Positioning not happening in MOZILLA!!!

liunx · Jan 12, 2008

My page positions perfectly in IE but not in mozilla. I know i should have developed in firefox first but leasson learned! My form containner leaves a gap beneath it, and the form is out of position too. There is also a big gap beween the header and the navbar(menu). Any ideas?

+++++++++++++++++++++HTML file***************************8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xml:lang="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Snap & Share</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"css/masterHome.css" rel="stylesheet" type="text/css" media="all" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"css/forms.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="outer">

<div id="header"></div>

<div id="menu"><PRE><h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">Home</a><a href="register.htm">Register</a><a href="search.htm">Search friend</a><a href="">About</a></h1></PRE></div>

<div class="page">

<div class="section">



<div class="col-A">
<div class="col-A-topcap"></div>
<div class="col-A-center">
<form action="emptyref" method="get" name="regForm">

<fieldset>
<legend>User Registration</legend>
<label for="firstName">First Name</label>
<input class="formInputField" name="firstName" type="text" maxlength="15" tabindex="1" />
<br>
<label for="lastName">Last Name</label>
<input class="formInputField" name="lastName" type="text" maxlength="15" tabindex="2" />
<br>
<label for="email">Email Addr.</label>
<input class="formInputField" name="email" type="text" tabindex="3" />
<br>
<label for="pass1">Password</label>
<input class="formInputField" name="pass1" type="password" tabindex="4" />
<br>
<label for="pass2">Confirm Password</label>
<input class="formInputField" name="pass2" type="password" tabindex="5" />
<br>
</fieldset>
</form>
</div>
<div class="col-A-bottom"></div>
</div>



<div class="col-B">
<div id="col-B-block">
<div class="col-B-topcap"></div>
<div class="col-B-center">col B upper</div>
<div class="col-B-bottom"></div>
</div>
<div id="col-B-block">
<div class="col-B-topcap"></div>
<div class="col-B-center">col B lower</div>
<div class="col-B-bottom"></div>
</div>
</div>



<div class="col-C"></div>

<div class="clear"></div>

</div>

</div>

<div id="footer">Â© A.Sabnis G.Cornwell Development</div>

</div>

</body>
</html>

********************************************************
********************MASTER.CSS***************************

/*HTML selectors all at the top of this doc. Adjust according to page change*/
body {
background-image: url(../images/body_bg.gif);
background-position: 50% 0%;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
background-color: #EEE
}

td, th {
color: #330033;
}

h1 {
font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
color: #FFFFFF;
}

/*link appearence for page*/
a {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #647C9C;
}

a:active {
color: #647C9C;
text-transform: capitalize;
}

/*ID selectors are next to be listed. These control the structure of the page. ie.header -> conetent -> footer, etc*/
#outer {
width: 773px;
margin-left: auto;
margin-right: auto;
}

#header {
background-image: url(../images/header2.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 175px;
width: 770px;

}

#menu {
background-image: url(../images/navbar.jpg);
margin-top: 1px;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
}

#footer {
background-image: url(../images/footer_bg.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 25px;
width: auto;
}

/*following code sections out the columns*/
.page {
width: auto;
border-left: 550px solid #FFF;
border-right: 0px solid #993399;
border-top: 0px solid #FFF;
}

.section {
margin: 0;
width: 100%;
}

.col-A, .col-B, .col-C {
position: relative;
float: left;
}

.col-A {
margin-left: -550px;
margin-right: 1px;
width: 550px;
z-index: 2;
}

.col-B {
margin: 0 -3px 0 -2px;
width: auto;
}

.col-C {
color: white;
margin-left: 0px;
width: 0px;
}

/*stop coloumn overlapping*/
.clear {
clear: both;
}

.page > .section {
border-bottom: 1px solid #FFFFF;
}

/*graphical backgrouds for column A with expanding center */
.col-A-topcap {
background-image: url(../images/col_top.jpg);
width: 550px;
height: 115px;
z-index: 1;
}

.col-A-center {
/*background-image: url(../images/col_middle.jpg);*/
background-color: #330033;
display: block;
text-align: center;
width: 550px;
height: auto;
z-index: 1;
}

.col-A-bottom {
background-image: url(../images/col_bottom.jpg);
width: 550px;
height: 143px;
z-index: 1;
}

/*Layer's for column B - include adbanners, login, friends list. */

#col-B-block {
display: block;
text-align: center;
background-color: #330033;
float: left;
width: 220px;
height: auto;
}

.col-B-topcap {
background-image: url(../images/side_colB_top.jpg);
width: 220px;
height: 65px;
z-index: 1;
}

.col-B-center {
background-image: url(../images/side_colB_middle.jpg);
width: 220px;
height: auto;
z-index: 1;
}

.col-B-bottom {
background-image: url(../images/side_colB_bottom.jpg);
width: 220px;
height: 70px;
z-index: 1;
}

*******************************************************************
***********************FORMSTYLING.CSS********************************

fieldset {
color: #666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
border: solid 1px #D3D3D3;
width: 450px;

}

legend {
color: #666;
font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #D3D3D3;
padding: 2px;
}

label {
font-weight: bold;
line-height: normal;
text-align: right;
display: block;
margin-right: 10px;
position: relative;
width: 120px;
float: left;
}Put it up and post a link.Validate your code. You have several errors.

Positioning not happening in MOZILLA!!!

liunx

Guest