SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Problem with Indent

    Okay, I am embarrassed to be asking for help on this, but obvious my HTML and CSS are rusty?!

    When a user changes their e-mail, I display a message confirming the change.

    I would like the e-mail to be bold, indented maybe 2em, and have maybe 0.5em above and below it, so that it stands out from the other text.

    For the life of me, I cannot get the code below to recognize my style?!

    HTML Code:
    <div id="pageMidCol_1">
      <div id="boxMessage">
        <h1>E-mail Changed</h1>
        <p>Your e-mail has been changed, and a confirmation e-mail sent to:<br />
        <span id='indentText'><b>username@mail.com</b></span></p>
        <p>Please log in using the new e-mail. (2128)</p>
        <a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
      </div>
    </div><!-- End of #MIDDLE -->

    Code CSS:
    #boxMessage p{
    	padding: 0.5em 0 0.5em 0;
    }
     
     
    #boxMessage #indentText{
    	padding: 0.5em 0 0 2em;
    }

    The code above is actually generated by PHP, which is why I have the single quotes around <span id='indentText'>.

    Also, I tried using FireBug to figure things out, but no luck.

    Any help would be appreciated.

    Sincerely,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yeah, top/bottom padding/margin doesn't work like that on inline elements (such as <span>). You can fix it by doing this:

    Code:
    #boxMessage #indentText{
    	padding: 0.5em 0 0 2em;
    	display: block;
    }
    With display: block on the span, you can also now lose the <br> before it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yeah, top/bottom padding/margin doesn't work like that on inline elements (such as <span>). You can fix it by doing this:

    Code:
    #boxMessage #indentText{
    	padding: 0.5em 0 0 2em;
    	display: block;
    }
    With display: block on the span, you can also now lose the <br> before it.
    That should have worked, Ralph, but this is what I see...

    E-mail Changed

    Your e-mail has been changed, and a confirmation e-mail sent to:username@mail.com

    Please log in using the new e-mail. (2128)

    It seems like my code is ignoring my style...


    Also, notice that my <span> is INSIDE the parent <p>.


    I suppose there are a couple of ways I could do things, including:

    1.) Making each line a paragraph and wrapping the Email in <p> tags

    2.) Using a nested <span> like I am now inside a parent <p>

    3.) Other?


    Debbie

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try !important. If it works you know it's a specificity problem.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Try !important. If it works you know it's a specificity problem.
    How and where do I do that?


    Debbie

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Debbie, the style recommended by Ralph works for me in Firefox and IE8. I see:
    Code:
    E-mail Changed
    
    Your e-mail has been changed, and a confirmation e-mail sent to:
    
        username@mail.com
    
    
    Please log in using the new e-mail. (2128)
    
    Log In
    Could there be other code overriding your styles?

    PS: you could assign #indentText to the <b> tag and omit the <span> if you wish.

    Try the following test page in your browser and see how it behaves. What browser are you using?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?958892-Problem-with-Indent
    Thread: Problem with Indent
    2013.01.20 21:03
    DoubleDee
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    #boxMessage {
        outline:1px solid magenta;
    }
    #boxMessage p {
        padding: 0.5em 0 0.5em 0;
        background-color:#ccf;
    }
    #boxMessage #indentText {
        display:block;
        padding: 0.5em 0 0 2em;
        background-color:#fcc;
    }
    
        </style>
    </head>
    <body>
    
    <div id="pageMidCol_1">
      <div id="boxMessage">
        <h1>E-mail Changed</h1>
        <p>Your e-mail has been changed, and a confirmation e-mail sent to:
        <b id='indentText'>username@mail.com</b></p>
        <p>Please log in using the new e-mail. (2128)</p>
        <a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
      </div>
    </div> <!-- End of #MIDDLE -->
    
    </body>
    </html>

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Debbie, the style recommended by Ralph works for me in Firefox and IE8. I see:
    Code:
    E-mail Changed
    
    Your e-mail has been changed, and a confirmation e-mail sent to:
    
        username@mail.com
    
    
    Please log in using the new e-mail. (2128)
    
    Log In
    Could there be other code overriding your styles?
    This may be a case of where FireFox's cache is causing issues AGAIN.

    Right now I'm listening to Casey Kasem's Countdown, and we're on #5, but after my show is over, I'll close all instance of FireFox, and see if that helps?!


    Debbie

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Just in case clearing the cache doesn't help, try Eric's suggestion and add the !important modifier to your styles like this:
    Code:
    #boxMessage p {
        padding: 0.5em 0 0.5em 0 !important;
    }
    #boxMessage #indentText {
        padding: 0.5em 0 0 2em !important;
        display:block !important;
    }
    If this solves the problem, then eliminate the modifiers one at a time until you determine which property is being overridden; then try to find out where the override is occurring and you should be able to address your selector so it wins the contest.

    The !important modifier shouldn't be considered a solution unless there is no other way to overcome the specificity issue.

    There is a recent thread that gives some great information about specificity:

    http://www.sitepoint.com/forums/show...=1#post5291916


    A bit of useful trivia for your notebook:

    Ctrl+F5 (or) Ctrl+Shift+R will force a full reload of a page in Firefox.
    http://support.mozilla.org/en-US/kb/...&r=0&e=es&as=s

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Just in case clearing the cache doesn't help, try Eric's suggestion and add the !important modifier to your styles like this:
    Code:
    #boxMessage p {
        padding: 0.5em 0 0.5em 0 !important;
    }
    #boxMessage #indentText {
        padding: 0.5em 0 0 2em !important;
        display:block !important;
    }
    If this solves the problem, then eliminate the modifiers one at a time until you determine which property is being overridden; then try to find out where the override is occurring and you should be able to address your selector so it wins the contest.

    The !important modifier shouldn't be considered a solution unless there is no other way to overcome the specificity issue.

    There is a recent thread that gives some great information about specificity:

    http://www.sitepoint.com/forums/show...=1#post5291916
    Well, it is a new day, and I tried all of the suggestions above and I am still striking out?!

    Here is the *incorrect* output I am seeing...
    E-mail Changed
    Your e-mail has been changed, and a confirmation e-mail sent to:

    username@mail.com

    Please log in using the new e-mail. (2128)

    And here is the PHP code I am currently using...
    PHP Code:
            echo '<h1>E-mail Changed</h1>';
            echo 
    '<p>Your e-mail has been changed, and a confirmation e-mail sent to:</p>';
            echo 
    '<p id="newEmailAddy">' str2htmlentities($newEmail) . '</p>';
    //            echo '<p>Your e-mail has been changed, and a confirmation e-mail sent to:';
    //            echo '<span id="indentText"><b>' . str2htmlentities($newEmail) . '</b></span></p>';
            
    echo '<p>Please log in using the new e-mail. (2128)</p>';
            echo 
    '<a class="button" href="' BASE_URL '/account/log-in.php">Log In</a>'

    Here are my current styles...
    Code CSS:
    #boxMessage h1{
    	font-size: 1.2em;						/* 2012-05-11 */
    	margin: 0.5em 0 -0.2em 0;		/* 2011-05-11 */
    	padding: 0;									/* 2011-05-11 */
    }
     
     
    #boxMessage p{
    	padding: 0.5em 0 0.5em 0;
    }
     
    #newEmailAddy{
    	display: block;
    	padding: 1em 0 1em 2em !important;
    }


    And here is the actual HTML from my PHP...
    HTML Code:
    	<!-- MIDDLE COLUMN -->
    		<div id="pageMidCol_1">
    			<div id="boxMessage">
    				<h1>E-mail Changed</h1><p>Your e-mail has been changed, and a confirmation e-mail sent to:</p>
    				<p id="newEmailAddy">username@mail.com</p>
    				<p>Please log in using the new e-mail. (2128)</p>
    				<a class="button" href="http://local.debbie/account/log-in.php">Log In</a>
    			</div>
    		</div><!-- End of #MIDDLE -->

    When I select this code in FireBug...
    HTML Code:
    <p id="newEmailAddy">username@mail.com</p>

    ...I see this in the Style window off to the side...
    HTML Code:
    #boxMessage p {
        padding: 0.5em 0;
    }
    ...which is active, and then I see this below it...
    HTML Code:
    p {
        padding: 0 0 1em;
    }
    ...which has a STRIKETHOUGH through it saying that my #boxMessage style is over-riding my default p style.

    However, nowhere do I see newEmailAddy?!

    Any ideas what is going on???

    Thanks,



    Debbie

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I *think* I have things working now, but I certainly can't explain all of the anomalous behavior described above?!

    When I added this line first thing today, it didn't help...
    Code:
    	padding: 0 0 0.5em 2em !important;	/**/
    And then later it started working?!


    Then I decided to experiment some more, and tried this...
    Code:
    p#newEmailAddy{
    	display: block;
    /*	padding: 0 0 0.5em 2em !important;	/**/
    	padding: 0 0 0.5em 2em;		/**/
    	font-weight: bold;
    }

    And that seems to also work - and is probably better.

    Yet when I tried p#newEmailAddy last night it was NOT working...

    Strange?!


    Debbie

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The difference may be that leading "p" in p#newEmailAddy which makes the selector more specific. Yesterday's code doesn't appear to have included that leading "p".

    That message about specificity would be a worthwhile read.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    The difference may be that leading "p" in p#newEmailAddy which makes the selector more specific. Yesterday's code doesn't appear to have included that leading "p".
    In what I posted last night, you are correct. But before coming to SP, I did have p#newEmailAddy in my code, and it didn't help. (May have been that notorious FireFox Caching issue...)


    That message about specificity would be a worthwhile read.
    Yes, I did read the link you provided, and I think I knew all of that.

    (I think when I re-write my site in v3.0 I need to completely scrap my CSS and start from scratch. It has become unwieldy, and its messiness probably complicates issues like this one.)

    Thanks for the help, though!



    Debbie


Bookmarks

Posting Permissions

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