Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By sasha_bolcina

Thread: Input Weirdness

  1. #1
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times

    Input Weirdness

    Just wondering if anyone knows something I don't about forms/inputs and their CSS.
    I'm creating a contact form, and working with the positioning of the inputs. For some reason, when not floated, they sit in the middle of their parent element, seemingly with margins. There are no margins, there's no padding on the parent element, no other element in the way. When I float them left, everything operates as expected, and the inputs sit right next to each other with no margins. I've been through the code, DOM inspector, checked box model representations, and more several times, and I'm really stumped.
    Not Floated:
    not_floated.jpg

    Floated:
    floated.jpg

    SCSS:
    Code:
    form.contact{        
            background:rgba(darken(gray,33%), 0.75);
            position:fixed;
            bottom:0;
            border:1px solid white;
            border-bottom:0;
            border-radius:5px 5px 0 0;
            border-radius:0.5rem 0.5rem 0 0;
            min-height:80px;
            min-height:8rem;
            width:100%;
            input, textarea{
                background:none;
                position:relative;
                border:1px solid white;
                border-radius:5px;
                border-radius:0.5rem;
                float:left;
                // margin-left:10px;
                // margin-left:1rem;
                padding:5px;
                padding:0.5rem;
                color:white;
                &.website{
                    visibility:hidden;
                    height:0;
                    width:0;
                    border:0;
                    margin:0;
                    padding:0;
                }
            }
        }
    Computed styles:
    Code:
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #FFF;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: #FFF;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #FFF;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #FFF;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: #FFF;
    float:left;
    font-family: Ubuntu;
    font-size: 14.6667px;
    line-height: 17px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    position: relative;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    No difference between Chrome and FF.

    EDIT: Just to be clear, I'm able to work around this, it's just an OMGWTF exercise. One that will cause me headaches until I figure it out.
    Last edited by Ronald Roe; Oct 05th, 2014 at 03:42 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    UPDATE: Seems to be tied to the display value. With block, the weird margins go away. With inline or inline-block (the default), the margins are there.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Theoretically, vertical-align: top; could work.

    EDIT: on the input, textarea elements.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Possibly, but I'm curious what causes this behavior to begin with. If vertical-align were to work, that would mean the line was larger to begin with. I can't seem to find anything that causes a ghost margin or enlarged line for inline/inline-block elements, and I've never encountered anything like that before. The cross-browser consistency makes me think it's somehow supposed to be that way.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I don't really have an explanation for it. I only thought it as far as the possible solution.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Form elements are defined as inline-block elements and styled as a text. If you use floating they are automatically turned into block level and default (browser) css will render them in different way.
    I found this here: The Problem Of CSS Form Elements | Smashing Magazine
    Ronald Roe likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com