NEED HELP WITH DIV CLASSES!!!!!

  • Profile Image
    The_Mighty_Optiq
    Asked on February 05, 2012 at 06:57 PM

    WHY IS MY FORM DOING THIS???!!!!!!

    http://form.jotform.com/form/20323153808

     

    As you can see the numbers go 1,53,52,51,50,49,48 etc...  But if you scroll down you'll see the image strip I'm referencing everything from and will see that is COMPLETELY backwards.  I can't figure out what the problem is and I keep rechecking my math and everything is factored out properly.... Here is the code I'm putting in the HTML boxes

     

    <div id="black01" class="blacks"><p></div>
    <div id="black02" class="blacks"><p></div>
    <div id="black03" class="blacks"><p></div>
    <div id="black04" class="blacks"><p></div>

     

    <div id="black05" class="blacks"><p></div>
    <div id="black06" class="blacks"><p></div>
    <div id="black07" class="blacks"><p></div>
    <div id="black08" class="blacks"><p></div>

    etc. etc. up to "black53"

     

    Here's the Div Class I put in the properties

     

    .blacks {width:105px; height:44px; background-image:url(http://www.jotform.com/uploads/The_Mighty_Optiq/form_files/Black.jpg); float:left;margin-right:17px;}

    #black01 {background-position: 0px 0px; }
    #black02 {background-position: 0px 44px; }
    #black03 {background-position: 0px 88px; }
    #black04 {background-position: 0px 132px; }
    #black05 {background-position: 0px 176px; }
    #black06 {background-position: 0px 220px; }
    #black07 {background-position: 0px 264px; }
    #black08 {background-position: 0px 308px; }
    #black09 {background-position: 0px 352px; }
    #black10 {background-position: 0px 396px; }
    #black11 {background-position: 0px 440px; }

    etc. etc. up to #black53......

    How is it possible that 0px is the first image... which is what it's suppose to be.... and 44px is black53.... which should be 2288px at the bottom....????  I don't understand how I'm getting the results I'm getting... everything is in order... SOMEONE PLEASE HELP!!!!

  • Profile Image
    fxr
    Answered on February 05, 2012 at 07:07 PM

    Just make the numbers fit. 

    change #black02 {background-position: 0px 44px; }

    to #black02 {background-position: 0px 2288px; }

    so #black03 {background-position: 0px 2244px; }

    etc

    Just do it with a couple first , to make sure its working as expected.

    Once you have that one strip done, the rest should just follow the same. 

  • Profile Image
    The_Mighty_Optiq
    Answered on February 05, 2012 at 08:00 PM

    I tried that too... it worked... but then I wanted to see if the problem could be identified before I just settled for that because if everything I'm doing is right and it's something wrong somewhere else along the cycle then that would be my only option... but if I'm doing something wrong then it could be fixed... besides that I'd just hate to have to go back and reverse everything later on once something gets resolved wherever the issue is....  I guess that's just what I'll have to do if nothing else can be found... thanks for your help though... you've made a HUGE difference with everything..

  • Profile Image
    fxr
    Answered on February 05, 2012 at 08:06 PM

    It is possible that I have misunderstood exactly how that background-position rule works. 

    I think you should just plough ahead with reversing the divs. 

     

    Lets see what type of difference this change makes to the load times of your form, before we get too compimentary. :)

  • Profile Image
    The_Mighty_Optiq
    Answered on February 05, 2012 at 08:32 PM

    yeah... I'm lining up the colors now to make them all one image instead of a strip and am going to put the numbers in the right places for each color just to see how it works that way too.... hopefully it's not the same problem with the width too...

  • Profile Image
    The_Mighty_Optiq
    Answered on February 06, 2012 at 02:44 PM

    EUREKA!!!!!! JUST FIGURED IT OUT!!!!!.... with the spacing we gotta put a - before the number.... for example...

    #red08 {background-position: -315px -308px; }

     

    that makes everything line up PERFECT!!!!.... I'm exvited now... lol

  • Profile Image
    fxr
    Answered on February 06, 2012 at 02:47 PM

    good stuff. keep us updated on your progress.