Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts

    Adding Form Submit Button Causes Input Fields to Move

    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:


    *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:


    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.
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hi

    Please post your css

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Can you please show me your CSS to resolve the issue?

  • #4
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Code:
    /*
    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 */
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •