Importing login form doesn;t maintain CSS settings. What am I doing wrong here?

No replies

Wed, 2011-12-21 10:16

zipster1967

Offline

newbie

Minnesota

Last seen: 9 years 21 weeks ago

Minnesota

Timezone: GMT-6

Joined: 2007-05-05

Posts: 1

Points: 2

I have a form that I got from a tutorial page and I am trying to import it into a page with multiple columns. But when I add the form code to my HTML page and the SCC codes to my CSS page the form loses all it's styling. The original form html looks like this:

  <form id=loginleft>
	<fieldset>
	  <ol>
		<li>
		  <label for=nick>Nick:</label>
		  <input id=nick name=nick type=text placeholder="First and last name" required autofocus>
		</li>
		<li>
		  <label for=passwd>Password:</label>
		  <input id=passwd name=passwd type=password placeholder="Password" required>
		</li>
		<li>
		  <fieldset>
          <p>
           <label>Gender</label>
		   <br />         
          <label for = "Male">Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "Male"
                 value = "Male"
                 checked = "checked" />
          <br />
          <label for = "Female">Female</label>
          <input type = "radio"
                 name = "userid"
                 id = "Female"
                 value = "Female" />
          <br />
         <label for = "bi_male">Bi Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "bi_male"
                 value = "Bi_Male" />
          <br />
           <label for = "gay_male">Gay Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "gay_male"
                 value = "Gay_Male" />
          <br />
         <label for = "lez_female">Lesbian</label>
          <input type = "radio"
                 name = "userid"
                 id = "lez_female"
                 value = "Lesbian" />
          <br />
         <label for = "ts_male">Transsexual Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "ts_male"
                 value = "TS_Male" />
          <br />
         <label for = "ts_female">Transsexual Female</label>
          <input type = "radio"
                 name = "userid"
                 id = "ts_female"
                 value = "TS_Female" />
 
        </p>       
      </fieldset>     
		</li>
	  </ol>
	</fieldset>
	<fieldset>
	  <ol>
		<li>
		  <label for=channel>Channel:</label>
		  <select>
		    <option value="#sweetoasis">#Sweetoasis</option>
			<option value="#sweetoasis_help">#Sweetoasis_Help</option>
			<option value="#sweetoasis_radio">#Sweetoasis_Radio</option>
		  </select>
		</li>
		<li>
		  <button type=submit>Connect</button>
		</li>
		<li>
		  <label for=country>Country</label>
		  <input id=country name=country type=text required>
		</li>
	  </ol>
	</fieldset>
  </form>

The corresponding CSS code section looks like this:

html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
	}
 
body {
	background: #FFFFFF;
	color: #FFFF80;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 20px;
    text-align:center;
	}
 
	h1 {
		font-size: 20px;
		margin-bottom: 20px;
        text-align:center;
		}
 
	form#loginleft {
		background: #FFFFF;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
		counter-reset: fieldsets;
		padding: 20px;
		width: 400px;
        margin-left: 320px;
			border: solid;
            border-color: Red;
		}
 
		form#loginleft fieldset {
            background: #8080FF;
			margin-bottom: 10px;
            float: left;
			}
 
		form#loginleft fieldset:last-of-type {
			margin-bottom: 0;
			}
 
				form#loginleft fieldset {
					color: #111111;
					font-size: 13px;
					font-weight: normal;
					padding-bottom: 0;
					}
 
			form#loginleft ol li {
				background: #8080FF;
				background: rgba(255,255,255,.3);
				border-color: #e3ebc3;
				border-color: rgba(255,255,255,.6);
				border-style: solid;
				border-width: 2px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-khtml-border-radius: 5px;
				border-radius: 5px;
				line-height: 30px;
				list-style: none;
				padding: 5px 10px;
				margin-bottom: 2px;
				}
 
				form#loginleft ol ol li {
					background: none;
					border: none;
					float: left;
					}
 
			form#loginleft label {
				float: left;
				font-size: 13px;
				width: 110px;
				}
 
			form#loginleft fieldset fieldset label {
				background: #8080FF;
				line-height: 20px;
				padding: 0 0 0 30px;
				width: auto;
				}
 
				form#loginleft fieldset fieldset label:hover {
					background: #8080FF;
					cursor: pointer;
					}
 
			form#loginleft input:not([type=radio]),
			form#loginleft textarea {
				background: #ffffff;
				border: none;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				-khtml-border-radius: 3px;
				border-radius: 3px;
				font: italic 13px Georgia, "Times New Roman", Times, serif;
				outline: none;
				padding: 5px;
				width: 200px;
				}
 
				form#loginleft input:not([type=submit]):focus,
				form#loginleft textarea:focus {
					background: #eaeaea;
					}
 
				form#loginleft input[type=radio] {
                    background: #8080FF;
					float: left;
					margin-right: 5px;
					}
 
			form#loginleft button {
				background: #FF0000;
				border: none;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				border-radius: 10px;
				color: #ffffff;
				display: block;
				font: 14px Georgia, "Times New Roman", Times, serif;
				letter-spacing: 1px;
				margin: auto;
				padding: 5px 15px;
				text-shadow: 0 1px 1px #000000;
				text-transform: uppercase;
                text-align: center;
				}
 
				form#loginleft button:hover {
					background: #1e2506;
					cursor: pointer;
					}

The html page after I added the form code looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="modified-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div id="header_wrap">
<div id="header">
<div id="page_title">Header Text</div>
</div> <!-- header end -->
</div> <!-- header_wrap end -->
 
 
 
<div id="menu_wrap">   
<div id="menu">
<p>Paragraph in menu div of menu wrap</p>
</div> <!-- menu end -->
</div> <!-- menu_wrap end -->
 
 
 
<div id="content_wrap">
<div id="left_section">
<div class="top_image">
  <form id=loginleft>
	<fieldset>
	  <ol>
		<li>
		  <label for=nick>Nick:</label>
		  <input id=nick name=nick type=text placeholder="First and last name" required autofocus>
		</li>
		<li>
		  <label for=passwd>Password:</label>
		  <input id=passwd name=passwd type=password placeholder="Password" required>
		</li>
		<li>
		  <fieldset>
          <p>
           <label>Gender</label>
		   <br />         
          <label for = "Male">Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "Male"
                 value = "Male"
                 checked = "checked" />
          <br />
          <label for = "Female">Female</label>
          <input type = "radio"
                 name = "userid"
                 id = "Female"
                 value = "Female" />
          <br />
         <label for = "bi_male">Bi Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "bi_male"
                 value = "Bi_Male" />
          <br />
           <label for = "gay_male">Gay Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "gay_male"
                 value = "Gay_Male" />
          <br />
         <label for = "lez_female">Lesbian</label>
          <input type = "radio"
                 name = "userid"
                 id = "lez_female"
                 value = "Lesbian" />
          <br />
         <label for = "ts_male">Transsexual Male</label>
          <input type = "radio"
                 name = "userid"
                 id = "ts_male"
                 value = "TS_Male" />
          <br />
         <label for = "ts_female">Transsexual Female</label>
          <input type = "radio"
                 name = "userid"
                 id = "ts_female"
                 value = "TS_Female" />
 
        </p>       
      </fieldset>     
		</li>
	  </ol>
	</fieldset>
	<fieldset>
	  <ol>
		<li>
		  <label for=channel>Channel:</label>
		  <select>
		    <option value="#sweetoasis">#Sweetoasis</option>
			<option value="#sweetoasis_help">#Sweetoasis_Help</option>
			<option value="#sweetoasis_radio">#Sweetoasis_Radio</option>
		  </select>
		</li>
		<li>
		  <button type=submit>Connect</button>
		</li>
		<li>
		  <label for=country>Country</label>
		  <input id=country name=country type=text required>
		</li>
	  </ol>
	</fieldset>
  </form>
</div>
 
 
<div class="right_section">
<div class="project_text">project content,project text</div>
<div class="read_me"><a href="#">Read me</a></div>
</div>
 
 
 
<div id="content_area">
<div id="content_width">
<div class="welcome">Welcome class</div>
<ul class="list">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</div>
 
 
 
<div id="news_container">
<div class="news">News and Events</div>
<div class="news_section">
<div class="square">
</div>
 
 
<div class="news_content">
<div class="text_content">Text in news_content</div>
<p>Paragraph in news_content</p>
</div>
 
 
<div class="cleaner"></div>
</div>
 
 
<div class="news_section">
<div class="square">
</div>
 
 
<div class="news_content">
<div class="text_content">2nd occurence of Text in news_content</div>
<p>Another paragraph in news_content</p>
</div>
 
 
<div class="cleaner"></div>
</div>
 
 
<div class="news_section">
<div class="square">
</div>
 
 
<div class="news_content">
<div class="text_content">Lorem ipsum dolor sit</div>
<p>Lorem ipsum dolor sit amet, cons ect etur adipiscing elit. Vestibu lum ac dui non tellus auctor.</p>
</div>
 
 
<div class="cleaner"></div>
</div>
 
</div>
 
 
<div class="cleaner"></div>
</div>
 
<div class="cleaner"></div>
</div>
 
</div> 
</body>
</html>

And the resulting CSS page looks like this:

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	background: #FFFFFF;
}
 
a:link, a:visited { color: #ffffff; text-decoration: underline; font-weight: normal; } 
a:active, a:hover { color: #ffffff; text-decoration: none; }
 
p {
	margin: 0px;
	padding: 0px;
}
 
.text_content {
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
 
}
 
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
 
.read_me a{
	clear: both;
	display: block;
	width: 104px;
	height: 25px;
	padding-top: 5px;
	background: url(images/readmore_button.jpg) no-repeat;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
 
 
.welcome {
	clear: both;
	padding-bottom: 30px;
	margin-bottom: 15px;
	font-size: 22px;
	letter-spacing: 2px;
	color: #000000;
}
 
.news {
	clear: both;
	font-size: 18px;
	letter-spacing: 2px;
	color: #D8D7D7;
	height: 20px;
	padding: 10px 20px;
	margin-bottom: 20px;
}
 
.project_text {
	clear: both;
	font-size: 18px;
	color: #D8D7D7;
	font-weight: bold;	
	padding: 0 0 10px 0;
	margin: 0 0 15px 0;
    border-style:solid;
    border-color: #0000FF;
}
 
#header_wrap {
	width: 100%;
	height: 30px;
	margin: 0 auto;
    border-style:solid;
    border-color: #000000;
}
 
#header {
	width: 980px;
	margin: 0 auto;
}
 
#header #page_title {
/*	float: left; */
    text-align: center;
	width: 100%;
	height: 90px;
	font-size: 30px;
    color: maroon;
    border-style:solid;
    border-color: yellow;
}
 
#menu_wrap {
	clear: both;
	width: 100%;
	height: 51px;
	margin: 0 auto;
    border-style:solid;
    border-color: aqua;
}
 
#menu {
	width: 980px;
	height: 51px;
	margin: auto auto;
    color: #FF0000;
    font-weight: bold;
    text-align: center;
}
 
#menu ul {
	margin: 0 0 0 28px;
	padding: 0px;
	list-style: none;
}
 
#menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
}
 
#menu ul li a {
	float: left;
	display: block;
	height: 22px;
	width: 128px;
	padding: 13px 0 0 0;
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	color: #FFF;	
	font-weight: bold;
	outline: none;
}
 
#menu li a:hover, #menu li .current {
	color: #000;
}
 
#content_wrap {
	clear: both;
	width: 75%;
	margin: 0 auto;
    border-style:solid;
    border-color: red;
}
 
#left_section {
	width: 900px;
	margin: 30px;
	padding: 9px;
	border: 1px solid Fuchsia;
	background: black;
}
 
.recent_projects {
	float: left;
	width: 900px;
	height: 260px;
	margin-bottom: 10px;
	background: black;
}
 
.top_image {
	float: left;
	width: 47%;
	height: 260px;
	padding: 0px;
	overflow: hidden;
    background: black;
    border-style:solid;
    border-color: orangeRed;
}
	form#loginleft {
		background: #FFFFF;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;
		counter-reset: fieldsets;
		padding: 20px;
		width: 400px;
        margin-left: 320px;
			border: solid;
            border-color: Red;
		}
 
		form#loginleft fieldset {
            background: #8080FF;
			margin-bottom: 10px;
            float: left;
			}
 
		form#loginleft fieldset:last-of-type {
			margin-bottom: 0;
			}
 
				form#loginleft fieldset {
					color: #111111;
					font-size: 13px;
					font-weight: normal;
					padding-bottom: 0;
					}
 
			form#loginleft ol li {
				background: #8080FF;
				background: rgba(255,255,255,.3);
				border-color: #e3ebc3;
				border-color: rgba(255,255,255,.6);
				border-style: solid;
				border-width: 2px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				-khtml-border-radius: 5px;
				border-radius: 5px;
				line-height: 30px;
				list-style: none;
				padding: 5px 10px;
				margin-bottom: 2px;
				}
 
				form#loginleft ol ol li {
					background: none;
					border: none;
					float: left;
					}
 
			form#loginleft label {
				float: left;
				font-size: 13px;
				width: 110px;
				}
 
			form#loginleft fieldset fieldset label {
				background: #8080FF;
				line-height: 20px;
				padding: 0 0 0 30px;
				width: auto;
				}
 
				form#loginleft fieldset fieldset label:hover {
					background: #8080FF;
					cursor: pointer;
					}
 
			form#loginleft input:not([type=radio]),
			form#loginleft textarea {
				background: #ffffff;
				border: none;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				-khtml-border-radius: 3px;
				border-radius: 3px;
				font: italic 13px Georgia, "Times New Roman", Times, serif;
				outline: none;
				padding: 5px;
				width: 200px;
				}
 
				form#loginleft input:not([type=submit]):focus,
				form#loginleft textarea:focus {
					background: #eaeaea;
					}
 
				form#loginleft input[type=radio] {
                    background: #8080FF;
					float: left;
					margin-right: 5px;
					}
 
			form#loginleft button {
				background: #FF0000;
				border: none;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				border-radius: 10px;
				color: #ffffff;
				display: block;
				font: 14px Georgia, "Times New Roman", Times, serif;
				letter-spacing: 1px;
				margin: auto;
				padding: 5px 15px;
				text-shadow: 0 1px 1px #000000;
				text-transform: uppercase;
                text-align: center;
				}
 
				form#loginleft button:hover {
					background: #1e2506;
					cursor: pointer;
					}
 
.right_section {
	float: right;
	width: 47%;
	height: 180px;
	padding: 40px 20px;
	overflow: hidden;
	background: black;
    border-style:solid;
    border-color: white;
}
 
.project_content p{
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	margin-bottom: 20px;
}
 
#content_area {
	clear: both;
	width: 898px;
	border: 1px solid #c6c5c5;
	background: black;
}
 
#content_width {
	float: left;
	width: 510px;
	padding: 40px 48px 20px 50px;
	background: black;
}
 
#news_container {
	float: left;
	width: 290px;
	background: black;
	padding-top: 2px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}
 
.news_section {
	clear: both;
	margin: 0 20px 20px 20px;
}
 
.news_section .square {
	float: left;
	width: 70px;
	height: 50px;
	padding: 20px 0 0 0;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	color: blue;
	background: white;
}
 
.news_section .square span {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: normal;
}
 
.news_section .news_content {
	float: right;
	width: 160px;
}
 
 
.news_container_content {
	margin: 0 20px;
}
 
.list {
	margin: 0 0 0 30px;
	padding: 0px;
	list-style: none;
}
 
.list li {
	margin: 0 0 10px 0;
	padding: 0 0 0 30px;
}

If you load the first page and CSS it shows up styled but after the import it show up using styles from the body and enclosing Div

Tags:

CSS Styling

Importing login form doesn;t maintain CSS settings. What am I doing wrong here?

User login

Navigation