...

View Full Version : Adding Form Submit Button Causes Input Fields to Move



d'Anconia
11-30-2012, 03:03 AM
Okay so this is confusing the heck out of me and a good example of why I dislike HTML and CSS. I am using Google Chrome to test out an eCommerce site that I am trying to create for my portfolio.

For one part, when I create a cart and want the customer to be able to enter their quantities and update their cart, the positioning of the <input type="text"> areas are acting silly.

At first when I have the <form> field included but have not yet added the "Update" button (and containing div), the positioning of the text inputs seems to be fine:

http://ecommerce.danconia.us/images/okay.jpg
*Notice the HTML structure in the console area*

But when I add the Update Cart button (and containing div) to the form all of the sudden the text input fields all get shoved down by approximately one cart div or so:
http://ecommerce.danconia.us/images/too_low.jpg

Does anyone know why this is happening? It seems to only happen when I add the actual div containing the "Update Cart" button. I cannot find anything in my CSS that would cause this to happen. I can post my style sheet if necessary.

sugisha
11-30-2012, 06:56 AM
Please post your css

webdevs
11-30-2012, 10:49 AM
Can you please show me your CSS to resolve the issue?

d'Anconia
11-30-2012, 01:42 PM
/*
CSS Credit: http://www.templatemo.com
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: arial, verdana, Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #dbdada;
background: #333333;
}

a:link, a:visited { color: #5b93ef; text-decoration: underline; font-weight: normal; }
a:active, a:hover { color: #5b93ef; text-decoration: none; }

p {
margin: 0px;
padding: 0px;
}

img {
margin: 0px;
padding: 0px;
border: none;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }

.margin_right_40 { margin-right: 40px; }
.margin_right_70 { margin-right: 70px; }

.fl { float: left; }
.fr { float: right }

.em_text {
color: #ffffff;
}

.button_01 a {
display: inline;
width: 95px;
height: 21px;
padding: 5px 25px 0 0;
background: url(../images/templatemo_button_01.jpg) no-repeat;
color: #dcdada;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
}

.header_01 {
clear: both;
height: 27px;
padding: 8px 0 0 10px;
margin-bottom: 20px;
background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;
font-size: 20px;
color: #ffffff;
}

.header_02 {
clear: both;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
margin-left: 10px;
font-size: 24px;
line-height: 100%;
color: #ffffff;
background-color: #000000;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
position: relative;
top: 10px;
width: 400px;
border: 1px #555555 solid;
}


.header_03 {
clear: both;
padding: 0px 0 0 0px;
background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;
font-size: 20px;
color: #ffffff;
width: 200px;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px #555555 solid;
}




.special_header {
clear: both;
padding: 0px 0 0 0px;
background: #161616 url(../images/templatemo_header_icon.jpg) center right no-repeat;
font-size: 20px;
color: #00ff00;
width: 200px;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px #555555 solid;
}

.header_03 a {
text-decoration: none;
color: #ffffff;
}

.header_02 p {
font-size: 18px;
line-height: 120%;
color: #ffffff;
}

.login_form {
min-width:50%;
margin: 0 auto 0 0;
padding:0 0 0 20px;
display: inline-block;
}

caption {
text-align: left;
}

table {
width: 90%;
}

.red_text {
color: red;
}

#error_span {
color: red;
}

td.form_left { height: 30px; text-align: right;}
td.form_right { height: 30px; text-align: left;}


#templateo_container {
width: 1100px;
/* padding: 0 10px; */
margin: 0 auto;
}

/* top panel */

#templatemo_top_panel {
clear: both;
/*width: 960px;*/
height: 110px;
padding: 3px 0;
}

#site_logo {
float: left;
width: 450px;
height: 110px;
}

#site_logo a {
outline: none;
}

#site_title {
float: left;
width: 450px;
margin-top: 30px;
font-size: 40px;
padding: 10px 0;
color: #e8e8e8;
}

#site_title a {
color: #e8e8e8;
text-decoration: none;
}

#site_title span {
/*display: block; */
margin-left: 70px;
margin-top: 20px;
font-size: 16px;
color: #767676;
}

#header_menu_section {
float: right;
width: 320px;
display: inline;
font-size: 1.4em;
}

.header_menu a {
float: right;
/*display: block;*/
display: inline;
width: 100px;
height: 93px;
outline: none;
}

.home_menu a { background: url(../images/home_icon.jpg) no-repeat; background-size: 70%; }
.home_menu a:hover { background: url(../images/home_icon_hover.jpg) no-repeat; background-size: 70%; }

.contact_menu a { background: url(../images/contact_icon.jpg) no-repeat; background-size: 70%; }
.contact_menu a:hover { background: url(../images/contact_icon_hover.jpg) no-repeat; background-size: 70%;}

/* end of top panel */

/* menu & banner panel */

#templatemo_menu_banner_panel {
clear: both;
/* height: 280px; */
padding: 10px;
background: #3c3b3b;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}

/* menu */

#templatemo_menu_wrapper {
margin-right: auto;
margin-left: auto;
width: 642px;
/* height: 278px; */
background: #111111;
overflow: hidden;
}

#templatemo_menu {
padding-top: 12px;
padding-bottom: 12px;
border: 1px solid #313131;
background: #262626;
overflow: hidden;
text-align: center;
}

#templatemo_menu a {
/*display: block; */
text-align: center;
margin-right: 0px;
margin-left: 0px;
/* width: 170px; */
height: 28px;
padding: 10px 10px 10px 10px;
color: #9fa2a4;
font-size: 16px;
text-decoration: none;
font-weight: normal;
/* background: url(../images/templatemo_menu_list_icon.jpg) left center no-repeat; */
outline: none;
border: solid 2px #3C3B3B;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;

}

#templatemo_menu .last {
margin-bottom: 0px;
}

/* end of menu*/

#templatemo_banner {
float: left;
width: 1080px;
height: 200px;
padding: 0px;
overflow: hidden;
background: url(../images/laser_rave_1100x200.jpg) no-repeat;
}

#templatemo_banner p {

}

#templatemo_banner_title {
line-height: 140%;
}

#templatemo_banner a {
color: #000000;
font-weight: bold;
text-decoration: none;
}

/* end of menu & banner panel */

#templatemo_content_wrapper {
clear: both;
width: 1080px;
background: #3c3b3b;
padding: 10px;
margin-top: 10px;
}

.large_form {
clear: both;
width: 1080px;
background: #3c3b3b;
padding: 10px;
margin-top: 10px;

}

#templatemo_content {
padding: 10px;
background: #262626;
min-height: 275px;
overflow: hidden;
}

#registration_form {
display: inline-block;
}

#submit_product_form {
display: inline-block;
min-width: 50%;
}

.product_box {
width: 250px;
height: 300px;
text-align: left;
border: 1px solid #aaaaaa;
display: inline-block;
padding: 18px 8px 8px 8px;
margin: 2px 2px 2px 2px;
border-radius:12px;
-moz-border-radius:12px;
}

.cart_product {
/* width: 60%; */
height: 168px;
text-align: left;
border: 1px solid #aaaaaa;
/* display: inline-block; */
padding: 8px 8px 8px 8px;
margin: 2px 2px 2px 2px;
border-radius:12px;
-moz-border-radius:12px;
}

.cart_product_image{
display: inline-block;
vertical-align: middle;
min-width: 150px;
min-height: 150px;
text-align: center;
}

.cart_product_image a{
vertical-align: middle;
}

.cart_product_info{
display: inline-block;
margin-left: 25px;
/* vertical-align: middle; */
font-size: 140%;
}

.cart_product_info h2 {
font-size: 135%;
padding-top: 0px;
padding-bottom: 0px;
}

.cart_product_price{
display: inline-block;
float: right;
margin-right: 25px;
padding-top: 20px;
text-align: center;
}

.cart_product_quantity{
display: inline-block;
float: right;
margin-right: 25px;
padding-top: 20px;
text-align: center;
}

.cart_product_quantity input{
text-align: center;
}

.product_box div {
text-align: center;
font-size: 1.5em;
margin-left: auto;
margin-right: auto;
}

.product_box input {
text-align: center;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
}

.product_image {
text-align: center;
width: 200px;
height: 200px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
vertical-align: middle;

}

.cart_image {
text-align: center;
/* width: 200px; */
/* height: 200px; */
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;

}

.product_image img {
max-width: 196px;
max-height: 200px;
border: 0px;
}

.form_header {
text-align: center;
}

.submit {
text-align: center;
margin-right: auto;
margin-left: auto;
}

#templatemo_side_column {
display: inline-block;
float: left;
width: 225px;
}

.side_column_content {
clear: both;
padding: 0px;
}

.news_section {
clear: both;
margin-bottom: 20px;
}

.news_date {
color: #ffffff;
font-weight: bold;
}

.news_title {
font-size: 12px;
color: #5b93ef;
font-weight: bold;
}

#templatemo_main_content_column {
float: right;
width: 820px;
}

.section_w600 {
padding: 0px;
}

#templatemo_main_content_column p {
margin-bottom: 15px;
}

#templatemo_main_content_column img {
/* border: 10px solid #000000;
margin-bottom: 5px; */
}

.fl_image {
float: left;
margin: 3px 15px 5px 0;
}

.section_w280 {
width: 260px;
}

.section_w280_content {
padding: 0px;
}

.content_list_01 {
margin: 0 0 0 10px;
padding: 0px;
}

.content_list_01 li {
margin: 0px;
padding: 0 0 0px 0;
list-style: decimal-leading-zero;
}

/* end of content */

/* footer */
#templatemo_footer {
clear: both;
width: 1000px;
padding: 20px 0px;
text-align: center;
}

#templatemo_footer a {
color: #ffffff;
text-decoration: none;
}
/* end of footer */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum