Problem with Indent

**DoubleDee** · Jan 20, 2013 20:03

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 .

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

Any help would be appreciated.

Sincerely,

Debbie

**ralph.m** · Jan 20, 2013 20:17

Yeah, top/bottom padding/margin doesn't work like that on inline elements (such as ). 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 before it.

**DoubleDee** · Jan 20, 2013 21:28

Originally Posted by ralph.m

Yeah, top/bottom padding/margin doesn't work like that on inline elements (such as ). 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 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 is INSIDE the parent .

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

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

2.) Using a nested like I am now inside a parent 

3.) Other?

Debbie

**PicnicTutorials** · Jan 20, 2013 21:51

Try !important. If it works you know it's a specificity problem.

**DoubleDee** · Jan 20, 2013 21:57

Originally Posted by EricWatson

Try !important. If it works you know it's a specificity problem.

How and where do I do that?

Debbie

**ronpat** · Jan 20, 2013 21:58

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 tag and omit the 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>

**DoubleDee** · Jan 20, 2013 22:27

Originally Posted by ronpat

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

**ronpat** · Jan 20, 2013 22:52

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

**DoubleDee** · Jan 21, 2013 11:08

Originally Posted by ronpat

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

**DoubleDee** · Jan 21, 2013 13:38

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

**ronpat** · Jan 21, 2013 13:53

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.

**DoubleDee** · Jan 21, 2013 14:33

Originally Posted by ronpat

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

User Tag List

Thread: Problem with Indent

Thread Tools

Display

Problem with Indent

Bookmarks

Bookmarks

Posting Permissions