#1
  1. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,969
    Rep Power
    374

    Form label margin difference between IE 8 & the rest


    Hi

    http://joy-thestore.ec-campaigns.com/index.php

    The first form field "Email" is slightly towards the left but i am not sure why?

    here is related CSS:

    Code:
    label {
        float: left;
        width: 35%;
        margin-left: 1em;
    }
    
    input {
        margin-bottom: 0.4em;
        width: 50%;  
    
    }

    here is an image:



    OK i have solved this by creating an I.E hack and manually changing the email to have "more" margin-left so it is aligned with other fields. HOWEVER if you would like to tell me why i need to do this then I will be grateful.
    Last edited by paulh1983; April 17th, 2013 at 06:06 AM.
  2. #2
  3. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    661
    Rep Power
    83
    Can you post the HTML also, from the start of its container to the end.
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    IE9 and IE10 also have this issue. I'm surprised they haven't fixed the bug that causes it. And IE10 doesn't support conditional comments (in standards mode).

    The cause is in another rule applied to another element. Hint: What else is inside that form? Can anybody else find it?

    Can you post the HTML also, from the start of its container to the end.
    Why do you want him to post it? Don't you know that you can use Firebug to find what the parent is and then go find it in the source for the page?
    Last edited by Kravvitz; April 16th, 2013 at 08:12 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Upon further investigation, I'm not sure this is a bug, but there definitely is a difference between how IE and other browsers render this example.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,969
    Rep Power
    374
    thanks Kravvitz esp warning about 1E10 not supporting conditional statements..

    Shall i ignore your statement:

    The cause is in another rule applied to another element. Hint: What else is inside that form? Can anybody else find it?
    Last edited by paulh1983; April 17th, 2013 at 06:07 AM.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Shall i ignore your statement:

    The cause is in another rule applied to another element. Hint: What else is inside that form? Can anybody else find it?
    That was mainly directed at wellandpower, DonR, RDoyle, and Nanomech. However, through good ole' trial-and-error, using IE's developer tools to disable one property at a time applied to other elements in that form, you would be likely to find it too.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo