Hi there,
I'm having problems with a orm position in firefox. It renders correctly in IE. Its driving me mad. my is the page link:
<!-- m --><a class="postlink" href="http://myweb.tiscali.co.uk/snapandshare/register.htm">http://myweb.tiscali.co.uk/snapandshare/register.htm</a><!-- m -->
here is the html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Snap & Share</title>
<!-- function used to load different CSS depeding on browser to solve positioning problems-->
<script type="text/javascript" language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"javaScript/browser_detect.js"></script>
<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"><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></div>
<div class="page">
<div class="section">
<!-- start of the column 1 where main dynamic content will change-->
<div class="col-A">
<div class="col-A-topcap"></div>
<div class="col-A-center">
<form action="emptyref" method="get" id="regForm" name="regForm">
<fieldset>
<legend>User Registration</legend>
<label for="firstName">First Name</label>
<input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />
<br/>
<label for="lastName">Last Name</label>
<input class="formInputField" type="text" name="lastName" id="lastName" maxlength="15" tabindex="2" />
<br/>
<label for="email">Email Addr.</label>
<input class="formInputField" type="text" name="email" id="email" tabindex="3" />
<br/>
<label for="pass1">Password</label>
<input class="formInputField" type="password" name="pass1" id="pass1" tabindex="4" />
<br/>
<label for="pass2">Confirm Password</label>
<input class="formInputField" type="password" name="pass2" id="pass2" tabindex="5" />
</fieldset>
</form>
</div>
<div class="col-A-bottom"></div>
</div>
<!--This column contains login and advertsiments and other needed-->
<div class="col-B">
<div class="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 class="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>
<!--This column does not appear. width is set to 0. Is here just to support browser inconsistsences-->
<div class="col-C"></div>
<div class="clear"></div>
</div>
</div>
<div id="footer">© A.Sabnis G.Cornwell Development</div>
</div>
</body>
</html>
and here is the CSS file for its layout:
/*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
}
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: -20px;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
border-top: none;
}
#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 #FFFFFF;
}
/*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;
}
Oh, and here is the CSS for form styling:
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
order: 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;
}
Please help me!! Thanks
bagatrix.Here's where I believe your problem lies (code shortened)...
fieldset {
width: 450px;
}
label {
width: 120px;
}
However, in the following XHTML markup, I see a class defined (formInputField) but no style for that class in the CSS anywhere:
<input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />
What's probably happening here is that
(a) you forgot to include this code and what I'm about to say is irrelevant
(b) because you're not setting a width for the input fields, the text doesn't know what to align itself with. I'd say set it so the <label> and <input> both have sizes that, when added, almost or exactly total the number of pixels in any given form row. The text should then align itself to the left side of the input box as you want.
If there's missing code, please post it so myself and others can help you fully solve your problem
Hope this helps!Try form {margin:0;}
and "b" typo in borderfieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
border: solid 1px #D3D3D3;
width: 450px;Ok guys, Thanks for the prompts replies. I tried both your suggestions, and it hasn't solves the left aligining problem for the form fieldset. Here's the full form.css that you havent seen:
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #C7E1E1;
border: solid 1px #667EA2;
width: 450px;
}
form {
margin:0;
}
legend {
color: #666;
font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
font-size: medium;
background-color: #C7E1E1;
padding: 2px;
}
label {
font-weight: bold;
line-height: normal;
text-align: right;
display: block;
margin-right: 10px;
position: relative;
width: 120px;
float: left;
}
label.fieldLabel {
display: inline;
float: none;
}
input.formInputField {
border: solid 1px #667EA2;
background-color: #FFFFFF;
color: #333;
margin-right: 5px;
margin-bottom: 5px;
padding: 2px;
height: 15px;
}
See wot u think. thanks
bagatrix.Add margin-bottom:-1px; to .col-A-center and change:
form {
margin:0;
}
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
order: solid 1px #D3D3D3;
width: 450px;
margin:0 auto;
}
btw use conditional comments (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp</a><!-- m -->) to deliver css to browsers, not JavaScriptMuch respect Fang, Problem solved - thank for ur help. Another quick question:
I'm try to style a login form on a page using the same form.css file. how can I change the width of the the login form. Do can create a 2nd fieldset tag? please look att the page. The login is too wide:
<!-- m --><a class="postlink" href="http://myweb.tiscali.co.uk/snapandshare/home.htmIt">http://myweb.tiscali.co.uk/snapandshare/home.htmIt</a><!-- m --> is more convienient to use the form id, #login in this case, to define the width. The fieldset will expand to fit the form.
I'm having problems with a orm position in firefox. It renders correctly in IE. Its driving me mad. my is the page link:
<!-- m --><a class="postlink" href="http://myweb.tiscali.co.uk/snapandshare/register.htm">http://myweb.tiscali.co.uk/snapandshare/register.htm</a><!-- m -->
here is the html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Snap & Share</title>
<!-- function used to load different CSS depeding on browser to solve positioning problems-->
<script type="text/javascript" language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"javaScript/browser_detect.js"></script>
<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"><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></div>
<div class="page">
<div class="section">
<!-- start of the column 1 where main dynamic content will change-->
<div class="col-A">
<div class="col-A-topcap"></div>
<div class="col-A-center">
<form action="emptyref" method="get" id="regForm" name="regForm">
<fieldset>
<legend>User Registration</legend>
<label for="firstName">First Name</label>
<input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />
<br/>
<label for="lastName">Last Name</label>
<input class="formInputField" type="text" name="lastName" id="lastName" maxlength="15" tabindex="2" />
<br/>
<label for="email">Email Addr.</label>
<input class="formInputField" type="text" name="email" id="email" tabindex="3" />
<br/>
<label for="pass1">Password</label>
<input class="formInputField" type="password" name="pass1" id="pass1" tabindex="4" />
<br/>
<label for="pass2">Confirm Password</label>
<input class="formInputField" type="password" name="pass2" id="pass2" tabindex="5" />
</fieldset>
</form>
</div>
<div class="col-A-bottom"></div>
</div>
<!--This column contains login and advertsiments and other needed-->
<div class="col-B">
<div class="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 class="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>
<!--This column does not appear. width is set to 0. Is here just to support browser inconsistsences-->
<div class="col-C"></div>
<div class="clear"></div>
</div>
</div>
<div id="footer">© A.Sabnis G.Cornwell Development</div>
</div>
</body>
</html>
and here is the CSS file for its layout:
/*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
}
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: -20px;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
border-top: none;
}
#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 #FFFFFF;
}
/*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;
}
Oh, and here is the CSS for form styling:
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
order: 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;
}
Please help me!! Thanks
bagatrix.Here's where I believe your problem lies (code shortened)...
fieldset {
width: 450px;
}
label {
width: 120px;
}
However, in the following XHTML markup, I see a class defined (formInputField) but no style for that class in the CSS anywhere:
<input class="formInputField" type="text" name="firstName" id="firstName" maxlength="15" tabindex="1" />
What's probably happening here is that
(a) you forgot to include this code and what I'm about to say is irrelevant
(b) because you're not setting a width for the input fields, the text doesn't know what to align itself with. I'd say set it so the <label> and <input> both have sizes that, when added, almost or exactly total the number of pixels in any given form row. The text should then align itself to the left side of the input box as you want.
If there's missing code, please post it so myself and others can help you fully solve your problem
Hope this helps!Try form {margin:0;}and "b" typo in borderfieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
border: solid 1px #D3D3D3;
width: 450px;Ok guys, Thanks for the prompts replies. I tried both your suggestions, and it hasn't solves the left aligining problem for the form fieldset. Here's the full form.css that you havent seen:
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #C7E1E1;
border: solid 1px #667EA2;
width: 450px;
}
form {
margin:0;
}
legend {
color: #666;
font-family: 'Monotype Corsiva', 'Lucida Handwriting', cursive;
font-size: medium;
background-color: #C7E1E1;
padding: 2px;
}
label {
font-weight: bold;
line-height: normal;
text-align: right;
display: block;
margin-right: 10px;
position: relative;
width: 120px;
float: left;
}
label.fieldLabel {
display: inline;
float: none;
}
input.formInputField {
border: solid 1px #667EA2;
background-color: #FFFFFF;
color: #333;
margin-right: 5px;
margin-bottom: 5px;
padding: 2px;
height: 15px;
}
See wot u think. thanks
bagatrix.Add margin-bottom:-1px; to .col-A-center and change:
form {
margin:0;
}
fieldset {
color: #666666;
font: 0.8em 'Monotype Corsiva', 'Lucida Handwriting', cursive;
background-color: #EFEFEF;
order: solid 1px #D3D3D3;
width: 450px;
margin:0 auto;
}
btw use conditional comments (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">http://msdn.microsoft.com/workshop/auth ... nt_ovw.asp</a><!-- m -->) to deliver css to browsers, not JavaScriptMuch respect Fang, Problem solved - thank for ur help. Another quick question:
I'm try to style a login form on a page using the same form.css file. how can I change the width of the the login form. Do can create a 2nd fieldset tag? please look att the page. The login is too wide:
<!-- m --><a class="postlink" href="http://myweb.tiscali.co.uk/snapandshare/home.htmIt">http://myweb.tiscali.co.uk/snapandshare/home.htmIt</a><!-- m --> is more convienient to use the form id, #login in this case, to define the width. The fieldset will expand to fit the form.