Skip navigation
Currently Being Moderated

Form Label Text-Align Center

Apr 24, 2013 8:30 AM

I am having troubles aligning the label of my form to center. When the page loads, it looks like it wants to be center aligned, but then aligns to the left. I can't tell which CSS is making it do this. Would you be able to help me narrow it down?

 

link is http://www.thelightingpower.com/donate-now

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 24, 2013 9:19 AM   in reply to designNMP

    That is because of the attribute position: absolute; that gets added at runtime with your jQuery custom function.

     

    To fix, Find this in your custom.js file:

     

    $('textarea').each(function() {

    if( $(this).val() == ''){

    $("label[for="+$(this).attr("id")+"]").css( "position", "absolute" ).css("z-index", "2");

    }else{

    $("label[for="+$(this).attr("id")+"]").hide('slide', 'fast');

    }

    });

     

    And replace that chunk of code with this:

     

    $('textarea').each(function() {

    if( $(this).val() == ''){

    $("label[for="+$(this).attr("id")+"]").css("z-index", "2");

    }else{

    $("label[for="+$(this).attr("id")+"]").hide('slide', 'fast');

    }

    });

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 9:58 AM   in reply to designNMP

    Remove the text align center atribute from style.css (line 664) and center the table

    table td {

        padding: 10px 5px;

        text-align: center;

    }

     

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 24, 2013 10:31 AM   in reply to designNMP

    In the code you originally have in your custom.js file, try changing 'absolute' to 'relative' to see if the label gets centered along with the input box. If it does, that is definitely the culprit. Maybe you could actually stick to 'relative' instead of fully removing it - as you said that didn't work earlier.

     

    $('textarea').each(function() {

    if( $(this).val() == ''){

    $("label[for="+$(this).attr("id")+"]").css( "position", "relative" ).css("z-index", "2");

    }else{

    $("label[for="+$(this).attr("id")+"]").hide('slide', 'fast');

    }

    });

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2013 9:46 AM   in reply to designNMP

    I dont know why it is happening but I can tell you the source of the problem is the js file below. If you  comment it out like below the text is centered.

     

     

    <!-- <script type="text/javascript" src="http://www.thelightingpower.com/js/video.js"></script>-->

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2013 9:45 AM   in reply to designNMP

    designNMP wrote:

     

    Thank you for your replies. Both of them did not work...not sure where the text-align: left is coming from. If you have any other ideas, I would greatly appreciate them.

     

    For me the label text is jumping to the right not the left?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2013 1:57 PM   in reply to designNMP

    Did you miss my reply above?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points