hello i have a problem using my editor. i'm using dreamweaver cs6 and would like to use a fieldset.
the problem with that is that i tried to implement my original code from here:
original code
where i thought it used to be same style in my editor. but it is not the same as in the example. as a result i will get this:
as you can see on left hand side it seems to be that there are automatically added tabs in there so that the input fields not flushes with the dark frame.
if there is someone who could tell me how to solve this i really would appreciate. thanks a lot.
UPDATE:
the picture above is what i will see in dreamweaver.
when i publish it on my webserver with that code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
height: 400px;
width: 500px;
float: left;
border: solid 2px #f23;
}
#left #frame {
background-color:#444444;
height: 337px;
width: 440px;
margin-top: 36px;
}
#left #frame form fieldset {
height: 337px;
width: 440px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border: none;
}
#left #frame form fieldset h1 {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
#left #frame form fieldset h2 {
font-size: 13px;
font-weight:lighter;
margin-left: 10px;
margin-top: 3px;
}
#left #frame form fieldset ul {
list-style-type: none;
margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
font-size: 12px;
color: #ECECEC;
font-weight: bolder;
width: 80px;
margin-bottom: 2px;
}
#left #frame form fieldset ul input {
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
}
#left #frame form fieldset ul .fl {
width: 180px;
float: left;
margin-bottom: 15px;
background-color: #f23;
margin-left: 0px;
}
#left #frame form fieldset ul .fr {
width: 180px;
float: right;
margin-bottom: 15px;
background-color: #0F6;
margin-right: 0px;
}
</style>
</head>
<body>
<div id="left">
<div id="frame">
<form action="" method="post">
<fieldset>
<h1>Text 1</h1>
<h2>text 2</h2>
<ul>
<li class="fl">
<label for="label1">Label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>
<li class="fr">
<label for="label2">Label 2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>
<li class="fl">
<label for="label3">Label 3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>
<li class="fr">
<label for="label4">Label 4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>
<li class="fl">
<label for="label5">Label 5</label>
<input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
</li>
<li class="fr">
<label for="label6">Label 6</label>
<input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
</body>
</html>
i will get as a result:
and entering the same code on jsfiddle will result:
this
It will probably be an automatic padding/margin issue, try 0'ing out all your values as the first thing you do, then you can set the values as you want
* {
margin:0;
padding:0;
}
Related
I recently received some help to fix an issue with my footer being in the middle of the page (much much appreciated!) but it looks like I have another issue - the photo in my header (supposed to be centered and fixed) is now more to the left and moves when I scroll the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "utf-8">
<Title>Contact</Title>
<link rel="stylesheet" href="contact3.css">
</head>
<body>
<header>
<nav>
<ul>
<!-- list item one -->
<li>
Home
</li>
<!-- list item two -->
<li>
About
</li>
<!-- list item three -->
<li>
Services
</li>
<!-- list item four -->
<li>
Contact
</li>
</ul>
</nav>
<img src="CG1.svg" alt-text="Collision Guru Logo" width=250px height=80px class="center">
</header>
<h1> Contact Us</h1><div class="form-container">
<div class="form-container">
<img src="yellow car headlight collision.jpg" width=450px height=400px class="carimg">
<form action="C:\Users\elizabeth.sweeney\Downloads\form_data.php" method="post">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="phone" id="phone" name="phone">
<br>
<input type="checkbox" id="option1" name="option1" value="Paint">
<label for="option1"> Paint Job</label><br>
<input type="checkbox" id="option2" name="option2" value="Body">
<label for="option2"> Body Work</label><br>
<input type="checkbox" id="option3" name="option3" value="Clean">
<label for="option3"> Cleaning</label><br>
<div class="submitbutton">
<input type="submit" value="Submit"></div>
</form>
</div>
<footer>
<nav>
<div class="contactinfo">
440-555-6893 • mike.tarescavage#gmail.com
</div>
<div class="sociallinks">
<img src= "facebook-icon.png" width=30px height=30px> <img src= "IG-icon-2.png" width=30px height=30px>
</div>
</nav>
</footer>
</body>
</html>
CSS:
body {
margin: 0;
background: #ffffff;
font-family: century gothic;
font-size: 18px;
text-align: center;
padding-bottom: 40px;
}
header {
background: #000000;
height: 125px;
color: #ffffff;
}
a{
color: #ffffff;
text-decoration: none;
}
ul{
margin: 0;
padding: 0px;
/*this option by default dispose the elements in a row (flex-direction: row)*/
display: flex;
}
li{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 1vw;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
width: 50%;
top: 20px;
position: fixed;
}
h1 {
text-align: center;
font-family: century gothic;
font-size: 60px;
font-weight: bold;
color: #000000;
}
.form-container {
overflow: hidden;
}
form
{
float: right;
margin-right: 75px;
text-align: left;
display: inline-block;
}
input[type=text], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=email], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=phone], select {
width: 100%;
text-align:left;
padding: 12px 20px;
margin: 8px 0;
margin-left: 30px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-right: 50px;
}
input[type=checkbox] {
text-align: left;
display: in-line block;
margin-left: 30px;
}
.submitbutton {
text-align: center;
padding-left: 80px;
display: block;
}
input[type=submit] {
width: 75%;
margin-left: 30px;
background-color: #000000;
color: white;
padding: 12px 20px;
padding-left: 30px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
display: in-line block;
}
.carimg {
float: left;
margin-left: 50px;
padding-bottom: 90px;
}
footer {
background: #000000;
height: 125px;
color: #ffffff;
}
.footerlinks {
float: left;
word-spacing: 30px;
text-align: left;
padding-top: 50px;
margin-left: 20px;
}
.contactinfo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
text-align: center;
padding-top: 50px;
}
.sociallinks {
float: right;
margin-right: 40px;
word-spacing: 20px;
}
This happened after adding the form-container class - not sure if that has anything to do with it, or perhaps another step needs to be taken with the photo? Or is it's completely unrelated.
Please let me know your thoughts.
Thanks! :)
If you want your logo to stay fixed in the top center on scroll, then update the css to be:
.center {
display: block;
margin-bottom: 20px;
width: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: fixed;
}
But if you want it to only be centered on your header, then you just need to remove the "center" class form the logo.
You have display: fixed; applied to your .center class which is causing your img element in the header to move with the scrollbar. Removing the class="center" attribute from the img element solves the scrolling issue but now your image is positioned slightly to the right of where it was.
Goal: I am trying to set up an input on a side project I'm working on where the user inputs some information. Currently I have it set up with the label of the input in the left most bubble followed by two text input bubbles.
Problem: The input fields are about 5 pixels bellow the bubble that is labeling them and I can't figure out how to correct that.
Notes: I'm fairly new to HTML/CSS and am completely self taught so if there is a better way to do what I am trying to do please let me new. Bellow is the section that is giving me trouble
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>
I have updated your snippet below. I think this is what you are looking for and was simply fixed by using vertical-align: middle; on the label. Not sure of what you are using this for, however, I would suggest perhaps using a framework such as https://getbootstrap.com/. Most frameworks will have great foundation blocks across all screen sizes and devices (as in the snippet below, you'll have to view in full screen, otherwise it is a mess. Currently, from a UI focus, this implementation is very limited by not being responsive.
Hope this helps.
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>
Use display: flex; for .textContainer to solve 5px problem.
Please see this document for FlexBox
One thing I noticed in your HTML code is your second .inputContainer is missing a .textContainer. Since you've said that you're fairly new to HTML and CSS, I suggest that you use basic properties like float to make elements stacked side by side and margin for spacing/aligning.
.inputConatiner {
height: auto;
}
/* Without this, the layout would be ruined because of float */
.inputConatiner:before, .inputConatiner:after {
content: '';
display: table;
}
.inputConatiner:after {
clear: both;
}
.textContainer {
height: auto;
width: 500px;
margin-top: 20px;
margin-left: 10px;
float: left; /* This makes the elements stacked side by side */
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
float: left; /* This makes the elements stacked side by side */
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
</form>
How can I align this code:
CSS:
input {
border: none;
}
input.name {
color: #f39200;
background: url('../images/name.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 1px;
padding-left: 100px;
font-size: 24px;
}
input.company {
vertical-align: middle;
color: #f39200;
background: url('../images/company.png') no-repeat left top;
width: 368px;
height: 48px;
padding-top: 0px;
padding-left: 140px;
font-size: 24px;
}
HTML:
<form id="contact-form" action="contact.php" method="post" style="list-style-type: none; width: 400px;">
<input type="hidden" name="redirect" value="/sent" />
<ul>
<li>
<input type="text" name="name" class="name" value="" />
</li>
<li>
<input type="text" name="company" class="company" value="" />
</li>
</ul>
</form>
I want to align them next to each other. So it will look something like this:
http://dflzqrzibliy5.cloudfront.net/images3/contact-form-generator.png
The first two are next to each other the others are not.. etc..
You could use float:left; and display: inline-block;. And you should check the width of the form and the width + padding of the input fields.
Here is a JSFiddle.
Try this:
ul li{
display: inline-block;
}
I am working on site with fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
When I reduce the height of the browser window size
I am noticing 2 probelms:
The scroller height doesnt change with the height of the browser.
When the height is reduced the fixed button shows on top of the scroller
How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
I've made a JSFiddle demonstration of my problem here ->
MY JSFIDDLeDEMO
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in JSfiddle:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
1. The scroller height doesnt change with the height of the browser.
That is because you have set a fixed height for #form-b, set at 500px:
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
2. When the height is reduced the fixed button shows on top of the scroller
It is unnecessary to wrap the submit button with a fieldset. Simply absolutely position the submit button relative to the containing parent, <form>.
3. How can i make the button always stay at a fixed position and also the auto adjust overflow height when the browser height changes?
Fixed position as in, fixed in the viewport, or fixed relative to the scrolling div? Moreover, you will have to rely on JS to readjust the height of the form whenever browser height changes, something along the line of:
$(document).ready(function() {
$(window).resize(function() {
// Set <form> height here with calculations (...)
$("#form-b).height(...);
}).resize(); // Trigger another resize when document is ready
});
I have design a login form using html and css. The styles are displayed correctly in chrome and firefox. But in IE it has some problems.
HTML
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>
CSS
#wrapper{
width:1000px;
margin:0 auto;
}
p{
margin:0;
padding:0;
}
#page{
float: left;
width: 1000px;
min-height: 480px;
background-color: #FFFFFF;
padding-bottom:20px;
}
.submit{
float:left;
width: 130px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
cursor: pointer;
height:30px;
background: url('/img/bg/submit.jpg');
border: none;
border-radius: 10px;
color: #960000;
}
.alert{
float: left;
width: 100%;
margin-top: 5px;
color: #C00;
display:none;
}
#adminLoginForm{
float: left;
width: 350px;
height: 170px;
margin-left: 325px;
margin-top: 150px;
background: url('/img/bg/b15.jpg');
border-radius: 10px;
box-shadow: 0px 0px 10px #A38D77;
padding-top: 10px;
}
#adminLoginForm label{
float: left;
width: 150px;
text-align: right;
font-weight: bold;
color: #000000;
font-size: 15px;
margin-top: 20px;
}
#adminLoginForm input{
float: left;
width: 150px;
margin-top: 19px;
margin-left: 5px;
padding-left: 5px;
padding-right: 5px;
}
#adminLoginForm input.loginSubmit{
width:130px;
margin-left:111px;
}
Output in Chrome & Firefox
Output in IE
I know the border-radius and box-shadow not works in IE. But I don't know why the gap between the label and text-boxes in IE. Can anybody help me to resolve this..?
If you wrap the contents of the form in a div that then becomes the only child of the form, the issue is fixed:
HTML:
<form id="adminLoginForm">
<div>
<label>User Name :</label>
<input type="text" class="uname"/>
<label>Password :</label>
<input type="password" class="pwd"/>
<input type="submit" class="loginSubmit submit" value="SUBMIT"/>
<p class="alert loginAlert">Test alert</p>
</div>
</form>
I thought of this because I recall (back in the days when it seemed XHTML would become the new web standard) that, with XHTML, native inline elements (like <label> and <input>) are not valid children of the <form> element.
I don't think that's the case with regular HTML, but the point is that the <form> tag and the various <input>elements are rather special, and tend to follow their own CSS formatting rules.
try to use table pattern for these type of designs..best compatibility trick for all browsers..
<div id="wrapper">
<div id="page">
<form id="adminLoginForm">
<table>
<tr><td><label>User Name :</label></td><td><input type="text" class="uname"/></td></tr>
<tr><td><label>Password :</label></td><td><input type="password" class="pwd"/></td></tr>
<tr><td colspan="2" style="text-align:center;"><input type="submit" class="loginSubmit submit" value="SUBMIT"/></td></tr>
</table>
<p class="alert loginAlert">Test alert</p>
</form>
</div>
</div>