Wed, 2011-12-21 10:16
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